/* Copyright Nige Ltd. Author: Nigel Hamilton. */
/* ------------------------------------------------------------------
   iz4.you site pages: the front page, /brand and /invariant-zero.

   Two voices, on purpose, and never blended:
     intent          -> ink or paper text, a solid green rule
     implementation  -> mono, slate grey, a dashed rule

   Ink bookends (hero, closing), warm paper body, one green. Scoped
   under .site because these pages render inside the shared layout.
   Tokens come from app.css.
   ------------------------------------------------------------------ */

.site {
    --surface:   var(--paper);
    --surface-2: #ece8df;
    --impl:      #6f6e69;
    --rule:      var(--line);
    --rule-dark: rgba(28, 26, 23, .28);
    --dark-2:    #14120f;
    --dark-impl: rgba(245, 241, 232, .55);
    --measure:   40rem;
    --radius:    var(--r);

    font-size: 1.0625rem;
    line-height: 1.65;
    margin-top: -28px;
}
@media (min-width: 48rem) { .site { font-size: 1.125rem; } }

.site *, .site *::before, .site *::after { box-sizing: border-box; }
.site p { margin: 0 0 1rem; }
.site a { color: inherit; }
.site :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.site .mono { font-family: var(--mono); font-size: .9em; }
.site .small { font-size: .9rem; }
.site .muted { color: var(--muted); }
.site .tm { font-size: .55em; vertical-align: super; margin-left: .15em; font-weight: 400; opacity: .7; }

/* full-bleed backgrounds for the two shell sections */
.site .bleed { position: relative; isolation: isolate; }
.site .bleed::before {
    content: ""; position: absolute; z-index: -1;
    top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
    width: auto; transform: none;
    background: var(--bleed-color);
}

/* -------------------------------------------------------------- type */

.site .display, .site .h2 {
    font-family: var(--display);
    font-weight: 600;
    letter-spacing: -.022em;
    text-wrap: balance;
    margin: 0;
}
.site .display {
    font-size: clamp(2.2rem, 5vw, 3.7rem);
    line-height: 1.06;
    max-width: 20ch;
}
.site .display--sm { font-size: clamp(1.8rem, 3.8vw, 2.7rem); max-width: 22ch; }
.site .display em, .site .h2 em { font-style: normal; color: var(--accent-ink); }
.site .hero .display { color: var(--dark-text); }
.site .hero .display em { color: var(--dark-accent); }

.site .h2 {
    font-size: clamp(1.55rem, 2.8vw, 2.1rem);
    line-height: 1.15;
    margin-bottom: 1rem;
    max-width: 26ch;
    color: var(--heading);
}

/* a plain line above a heading: sans, sentence case, quiet */
.site .eyebrow { color: var(--accent-ink); font-family: var(--sans); font-size: 1rem; font-weight: 500; letter-spacing: 0; text-transform: none; margin: 0 0 .9rem; }
.site .hero .eyebrow, .site .cta .eyebrow { color: var(--dark-accent); }
.site .eyebrow .mono { font-size: 1em; }

.site .lede { font-size: 1.15rem; line-height: 1.55; max-width: 34rem; }
@media (min-width: 48rem) { .site .lede { font-size: 1.25rem; } }
.site .band-text p { max-width: var(--measure); }
.site .band-text p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- buttons */

.site .actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.75rem 0 0; align-items: center; }
.site .btn { font-size: 1rem; padding: .8rem 1.35rem; }
.site .btn--primary { background: var(--accent-fill); color: var(--on-accent); }
/* a button is a link too, but never takes the inherited ink of `.site a`:
   white on the deep green, or the deep green for a ghost on paper */
.site a.btn { color: var(--on-accent); }
.site a.btn--ghost { color: var(--accent-ink); }
.site .hero .btn--ghost, .site .cta .btn--ghost { color: var(--dark-text); border-color: var(--dark-rule); background: transparent; }
.site .hero .btn--ghost:hover, .site .cta .btn--ghost:hover { background: transparent; color: var(--dark-text); border-color: var(--dark-accent); }

/* -------------------------------------------------- spec (intent) */

.site .spec {
    font-family: var(--mono);
    font-size: .88rem;
    line-height: 1.65;
    color: var(--heading);
    border-left: 2px solid var(--accent);
    padding-left: 1rem;
    overflow-wrap: anywhere;
}
.site .spec--lg { font-size: .95rem; }
.site .spec .l { display: block; }
.site .spec .ind { padding-left: 1.2em; }
.site .spec .kw { color: var(--accent-ink); }
.site .spec .nm { font-weight: 500; }

/* ------------------------------------------- impl (implementation) */

.site .impl {
    font-family: var(--mono);
    font-size: .82rem;
    line-height: 1.55;
    color: var(--impl);
    margin: 0;
    padding: 0 0 0 1rem;
    border-left: 2px dashed var(--rule-dark);
    overflow-x: auto;
}
.site .impl .c { color: var(--muted); font-style: italic; }

/* -------------------------------------------------------------- hero */

.site .hero {
    --bleed-color: var(--dark);
    color: var(--dark-text);
    position: relative;
    padding-block: clamp(3rem, 7vw, 6rem) clamp(3rem, 7vw, 5.5rem);
}
.site .hero .lede { color: var(--dark-muted); margin-top: 1.5rem; }
.site .hero .lede strong { color: var(--dark-text); font-weight: 500; }
.site .hero-mark { display: none; }
@media (min-width: 64rem) {
    .site .hero-mark { display: block; position: absolute; right: 0; top: clamp(3rem, 7vw, 6rem); color: var(--dark-text); }
    .site .hero-mark svg { display: block; }
}

/* the one picture: one sentence of intent, one implementation obeying it */
.site .layers {
    margin: clamp(2.5rem, 6vw, 4rem) 0 0;
    border: 1px solid var(--dark-rule);
    border-radius: var(--radius);
    background: var(--dark-2);
    display: grid;
}
@media (min-width: 54rem) {
    .site .layers { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
    .site .layer--intent { border-right: 1px dashed var(--dark-rule); }
}
@media (max-width: 53.99rem) { .site .layer--intent { border-bottom: 1px dashed var(--dark-rule); } }
.site .layer { padding: 1.25rem 1.5rem 1.5rem; min-width: 0; }
.site .layer-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1rem; gap: 1rem; }
.site .layer-label { font-size: .9rem; font-weight: 600; color: var(--dark-text); }
.site .layer--intent .layer-label { color: var(--dark-accent); }
.site .layer-note { font-size: .85rem; color: var(--dark-muted); }
.site .layers .spec { color: var(--dark-text); border-left-color: var(--dark-accent); }
.site .layers .spec .kw { color: var(--dark-accent); }
.site .layers .impl { color: var(--dark-impl); border-left-color: var(--dark-rule); }
.site .layers .impl .c { color: #8a8378; }
.site .layer-caption {
    grid-column: 1 / -1;
    border-top: 1px solid var(--dark-rule);
    padding: .85rem 1.5rem;
    font-size: .9rem; color: var(--dark-muted);
}

/* -------------------------------------------------------------- bands */

.site .band {
    display: grid;
    gap: clamp(1.75rem, 4vw, 4rem);
    padding-block: clamp(3rem, 7vw, 5.5rem);
    border-top: 1px solid var(--rule);
    align-items: start;
}
.site .hero + .band { border-top: 0; }
@media (min-width: 60rem) {
    .site .band { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
    .site .band--wide { grid-template-columns: 1fr; }
    .site .band--wide .band-text { max-width: 44rem; }
}

/* three plain reasons, one per audience */
.site .reasons { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 48rem) { .site .reasons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.site .reasons li { border-top: 2px solid var(--accent); padding-top: 1rem; }
.site .reasons h3 { font-family: var(--display); font-weight: 600; letter-spacing: -.01em; font-size: 1.15rem; margin: 0 0 .5rem; color: var(--heading); }
.site .reasons p { margin: 0; color: var(--muted); font-size: .97rem; }
.site .reasons p strong { color: var(--heading); font-weight: 500; }

/* -------------------------------------------------------- specdoc */

.site .specdoc {
    display: grid; gap: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    padding: clamp(1.25rem, 3vw, 2rem);
}
.site .spec-row { display: grid; gap: .6rem 2.5rem; align-items: start; }
@media (min-width: 60rem) { .site .spec-row { grid-template-columns: minmax(0, 1fr) 17rem; } }
.site .note {
    font-size: .9rem; line-height: 1.5; color: var(--muted);
    border-left: 1px solid var(--rule); padding-left: 1rem;
}
.site .note strong { color: var(--heading); font-weight: 600; }
@media (min-width: 60rem) { .site .note { border-left: 0; padding-left: 0; padding-top: .1rem; } }

/* -------------------------------------------------------- timeline */

.site .timeline {
    background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius);
    padding: clamp(1.25rem, 3vw, 1.75rem);
}
.site .cmd { font-size: .85rem; color: var(--muted); margin: 0 0 1.25rem; }
.site .entries { display: grid; gap: 1.4rem; }
.site .timeline-note { margin: 1.25rem 0 0; }

/* ------------------------------------------------------------ lists */

.site .uses { margin: 0; padding-left: 1.1rem; max-width: var(--measure); list-style: disc; }
.site .uses li { margin: .3rem 0; padding: 0; }
.site .uses li::before { content: none; }
.site .uses li::marker { color: var(--accent); }

/* ------------------------------------------------------- register */

.site .cert-grid { display: grid; gap: 1rem; }
@media (min-width: 48rem) { .site .cert-grid { grid-template-columns: 1fr 1fr; } }
.site .cert-card { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--surface); padding: 1.25rem 1.5rem 1.25rem; margin: 0; }
.site .cert-label { display: block; font-weight: 600; color: var(--heading); margin-bottom: .9rem; }
.site .cert-stage { color: var(--heading); padding: .25rem 0 1rem; }
.site .cert-stage svg { display: block; height: 44px; width: auto; max-width: 100%; }
.site .cert-card p { margin: 0; font-size: .95rem; color: var(--muted); }
.site .cert-card p strong { color: var(--heading); font-weight: 500; }

/* ------------------------------------------------------------- cta */

.site .cta {
    --bleed-color: var(--dark);
    color: var(--dark-text);
    padding-block: clamp(3.5rem, 9vw, 6.5rem) clamp(3rem, 7vw, 5.5rem);
}
.site .cta .display--sm { color: var(--dark-text); }
.site .cta .lede { margin-top: 1.25rem; color: var(--dark-muted); }
.site .cta .lede .mono { color: var(--dark-text); }

/* ------------------------------------------------------------ brand */

.site .brand-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) 1rem; }
.site .brand-head .lede { margin-top: 1rem; }
.site .brand-head .lede strong { color: var(--heading); font-weight: 500; }
.site .brand-sec { padding-block: 2rem 2.5rem; border-top: 1px solid var(--rule); }
.site .brand-h { font-family: var(--display); font-weight: 600; letter-spacing: -.02em; font-size: 1.35rem; margin: 0 0 1rem; }
.site .brand-sub { font-weight: 400; font-size: .9rem; color: var(--muted); margin-left: .5rem; }
.site .brand-row { display: flex; flex-wrap: wrap; gap: 1rem; }
.site .brand-stage { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.75rem; padding: 1.5rem 1.75rem; border: 1px solid var(--rule); margin: 0; max-width: 100%; }
/* the identity's two grounds, and nothing else */
.site .brand-stage--paper { background: var(--bg); color: var(--ink); }
.site .brand-stage--ink { background: var(--dark); color: var(--dark-text); border-color: var(--dark); --mark-accent: var(--dark-accent); }
.site .brand-stage figure { margin: 0; display: grid; justify-items: center; gap: .5rem; }
.site .brand-stage figcaption { font-family: var(--mono); font-size: .72rem; color: var(--muted); text-align: center; }
.site .brand-stage--ink figcaption { color: var(--dark-muted); }
.site .brand-stage svg, .site .brand-stage img { display: block; max-width: 100%; height: auto; }
.site .brand-stage--sizes { align-items: flex-end; gap: 22px; }
.site .brand-stage--badge { display: block; width: min(100%, 650px); }
.site .brand-stage--badge a { display: block; line-height: 0; }
.site .brand-stage--badge img { width: 100%; height: auto; }
.site .brand-stage--badge figcaption { margin-top: .5rem; }
.site .brand-note { font-size: .95rem; color: var(--muted); max-width: 52rem; margin: 1rem 0 0; }
.site .brand-note strong { color: var(--heading); }
.site .brand-spec { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 24px; font-size: .95rem; }
.site .brand-spec strong { color: var(--heading); }
.site .mark-meaning { margin: 1.5rem 0 0; font-size: .95rem; color: var(--muted); max-width: 52rem; }
.site .mark-meaning svg { display: inline-block; vertical-align: -5px; margin-right: .35rem; color: var(--heading); }
.site .mark-meaning em { font-style: normal; color: var(--heading); font-weight: 500; }

/* the benefits grid and cta band on the invariant page use app.css; keep
   their measure inside the wide site shell */
.site .benefits { padding-block: 2.5rem 1rem; border-top: 1px solid var(--rule); }
.site .benefits .section-title { margin-top: 0; }
.site .cta-band { padding-block: 2rem 3rem; }

/* ----------------------------------------------- positioning, 2026-09-17 */

/* the three-sentence thesis: the third sentence is the point */
.site .display--triple { max-width: 26ch; font-size: clamp(1.9rem, 4.2vw, 3.1rem); }
.site .display--triple em { display: block; margin-top: .15em; }

.site .enough { margin-top: 1.5rem; }
.site .enough strong { color: var(--heading); }

/* the decision rule, set apart but quiet */
.site .rule {
    margin: 0; padding: 1.25rem 1.5rem;
    border-left: 3px solid var(--accent); background: var(--surface);
    border-radius: 0 var(--radius) var(--radius) 0;
    max-width: 44rem;
}
.site .rule p { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.15rem; line-height: 1.4; letter-spacing: -.01em; color: var(--heading); text-wrap: balance; }
.site .rule .rule__answer { margin-top: .75rem; font-family: var(--sans); font-weight: 400; font-size: 1rem; color: var(--muted); }

/* don't write / write: three pairs, each a small file fragment */
.site .pairs { margin: 0; display: grid; gap: 1.25rem; }
@media (min-width: 60rem) { .site .pairs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.site .pair { display: grid; gap: .4rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.1rem 1.25rem 1.2rem; min-width: 0; }
.site .pair dt { font-size: .85rem; font-weight: 600; color: var(--muted); margin-top: .35rem; }
.site .pair dt:first-child { margin-top: 0; }
.site .pair dd { margin: 0; font-size: .85rem; }
.site .pair .spec--bad { border-left-color: var(--rule-dark); color: var(--impl); text-decoration: line-through; text-decoration-color: var(--rule-dark); text-decoration-thickness: 1px; }
.site .pair .spec--bad .kw { color: var(--impl); }
.site .pair__why { margin: .6rem 0 0; font-size: .9rem; color: var(--muted); }

/* what each part of a repository answers */
.site .fits { margin: 0; font-size: 1rem; align-self: center; }
.site .fits > div { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--rule); align-items: baseline; }
.site .fits > div:last-child { border-bottom: 1px solid var(--rule); }
.site .fits dt { font-family: var(--mono); font-size: .9rem; color: var(--impl); }
.site .fits dd { margin: 0; color: var(--muted); }
.site .fits .fits__iz4 dt { color: var(--accent-ink); font-weight: 500; }
.site .fits .fits__iz4 dd { color: var(--heading); font-family: var(--display); font-weight: 600; font-size: 1.15rem; letter-spacing: -.01em; }
@media (max-width: 30rem) { .site .fits > div { grid-template-columns: 6.5rem minmax(0, 1fr); gap: .75rem; } }

/* the inheritance ladder: each rung sits under the one above */
.site .ladder { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; align-self: center; }
.site .ladder li { display: grid; gap: .15rem; padding: .85rem 1.1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); position: relative; }
.site .ladder li + li { margin-left: 1.25rem; }
.site .ladder li + li::before { content: ""; position: absolute; left: -1.25rem; top: -.5rem; width: .75rem; height: 1.5rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); border-radius: 0 0 0 6px; }
.site .ladder li:first-child { border-left: 3px solid var(--accent); }
.site .ladder strong { color: var(--heading); font-family: var(--display); font-weight: 600; }
.site .ladder span { font-size: .92rem; color: var(--muted); }

/* start: three steps, each one command */
.site .steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; counter-reset: step; align-self: center; }
.site .steps li { counter-increment: step; display: grid; grid-template-columns: 2rem 5.5rem minmax(0, 1fr); gap: .5rem 1rem; align-items: center; padding: .85rem 1.1rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); min-width: 0; }
.site .steps li::before { content: counter(step); width: 1.75rem; height: 1.75rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent-fill); color: var(--on-accent); font: 600 .9rem/1 var(--display); }
.site .steps__what { font-weight: 600; color: var(--heading); }
.site .steps code { font-family: var(--mono); font-size: .85rem; color: var(--heading); overflow-x: auto; white-space: nowrap; display: block; min-width: 0; }
.site .steps__note { grid-column: 3; font-size: .85rem; color: var(--muted); }
@media (max-width: 40rem) { .site .steps li { grid-template-columns: 2rem minmax(0, 1fr); } .site .steps__what { grid-column: 2; } .site .steps code, .site .steps__note { grid-column: 2; } }

/* ---------------------------------------------- the quiet site, 2026-09-17
   Few elements, lots of air, one column that reads top to bottom. Every
   band is one story; nothing competes with the sentence on the page. */

.site--quiet .band--quiet { display: block; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.site--quiet .band--quiet .h2 { max-width: 24ch; margin-bottom: 1.25rem; }
.site--quiet .band--quiet .band-text + .band-text { margin-top: 1.25rem; }
.site--quiet .band-text p { max-width: 38rem; }
.site--quiet .big { font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 2.4vw, 1.7rem); letter-spacing: -.02em; line-height: 1.25; color: var(--heading); margin: 0 0 1.1rem; text-wrap: balance; }
.site .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* hero: the file itself is the picture */
.site--quiet .hero { padding-block: clamp(3.5rem, 8vw, 7rem) clamp(3rem, 7vw, 5.5rem); }
.site--quiet .hero .display { max-width: 18ch; }
.site--quiet .hero .lede { max-width: 36rem; }
.site .specdoc--dark { margin: clamp(2rem, 5vw, 3.5rem) 0 0; max-width: 44rem; background: var(--dark-2); border-color: var(--dark-rule); display: block; }
.site .specdoc--dark .spec { color: var(--dark-text); border-left-color: var(--dark-accent); }
.site .specdoc--dark .spec .kw { color: var(--dark-accent); }
.site .specdoc__note { margin: 1.1rem 0 0; font-size: .88rem; color: var(--dark-muted); }
.site .specdoc__note .mono { color: var(--dark-text); }
.site .install { margin: 1.75rem 0 .35rem; font-size: .95rem; overflow-x: auto; white-space: nowrap; }
.site .install .mono { color: var(--dark-text); font-size: .95em; }
.site .hero .small { color: var(--dark-muted); }
.site .hero .small .mono { color: var(--dark-text); }

/* three questions, each alone on its line */
.site .three { padding-block: clamp(3.5rem, 9vw, 7rem) clamp(2rem, 5vw, 3.5rem); border-bottom: 1px solid var(--rule); }
.site .three__q { font-family: var(--display); font-weight: 600; letter-spacing: -.025em; line-height: 1.1; font-size: clamp(1.9rem, 4.6vw, 3.4rem); color: var(--heading); margin: 0 0 .55em; max-width: 22ch; text-wrap: balance; }
.site .three__q em { font-style: normal; color: var(--accent-ink); }
.site .three__a { margin: 1.75rem 0 0; max-width: 34rem; color: var(--muted); font-size: 1.05rem; }

/* what survives: the same sentence, above and below a column of change */
.site .endure { max-width: 34rem; margin: .5rem 0 2rem; }
.site .endure__state { border-left: 2px solid var(--accent); padding: .25rem 0 .25rem 1.1rem; }
.site .endure__when { display: block; font-size: .85rem; font-weight: 600; color: var(--accent-ink); margin-bottom: .3rem; }
.site .endure__inv { margin: 0; font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: -.015em; line-height: 1.3; color: var(--heading); }
.site .endure__inv .mono { display: block; font-family: var(--mono); font-weight: 400; font-size: .8rem; color: var(--muted); margin-bottom: .2rem; letter-spacing: 0; }
.site .endure__changes { list-style: none; margin: 0; padding: 1.25rem 0 1.25rem 2.6rem; position: relative; color: var(--impl); font-size: .95rem; display: grid; gap: .55rem; }
.site .endure__changes::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2px dashed var(--rule-dark); }
.site .endure__changes li { position: relative; }
.site .endure__changes li::before { content: ""; position: absolute; left: -2.6rem; top: .55em; width: 1.4rem; border-top: 2px dashed var(--rule-dark); }

/* not an invariant / invariant */
.site .contrast { margin: .5rem 0 1.5rem; display: grid; gap: 1rem; max-width: 44rem; }
.site .contrast > div { display: grid; grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr); gap: .35rem 1.25rem; padding: 1rem 0; border-top: 1px solid var(--rule); align-items: baseline; }
.site .contrast dt { font-size: .82rem; font-weight: 600; color: var(--muted); }
.site .contrast dd { margin: 0; color: var(--impl); }
.site .contrast dt:nth-of-type(2) { color: var(--accent-ink); }
.site .contrast dt:nth-of-type(2) + dd { color: var(--heading); font-weight: 500; }
@media (max-width: 30rem) { .site .contrast > div { grid-template-columns: 1fr; gap: .15rem; } .site .contrast dd { margin-bottom: .5rem; } }

/* what each thing answers, IZ4 last, beneath the rest */
.site .fits--stack { max-width: 34rem; margin: .5rem 0 1.75rem; }
.site .fits--stack .fits__iz4 { border-top: 2px solid var(--accent); margin-top: .35rem; padding-top: .9rem; }

/* the foundation section on the front page */
.site .quiet-link { color: var(--muted); font-size: .95rem; }

/* the dialogue: a thinking aid, not an oracle */
.site .dialogue { max-width: 40rem; margin: .5rem 0 1.5rem; padding: 1.25rem 1.5rem; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); font-size: .95rem; }
.site .dialogue p { margin: 0 0 .5rem; }
.site .dialogue__q { color: var(--muted); }
.site .dialogue__q--again { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px dashed var(--rule-dark); }
.site .dialogue__a { color: var(--heading); font-weight: 500; padding-left: 1.25rem; }
.site .dialogue__a::before { content: "> "; color: var(--accent-ink); margin-left: -1.25rem; }
.site .dialogue__v { color: var(--accent-ink); font-weight: 500; }
.site .dialogue__cmd { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--rule); font-size: .85rem; color: var(--heading); overflow-wrap: anywhere; }

/* the long view */
.site .cta--long .long { font-family: var(--display); font-weight: 500; font-size: clamp(1.15rem, 2.2vw, 1.5rem); color: var(--dark-muted); margin: 0 0 .25rem; letter-spacing: -.01em; }
.site .cta--long .display--sm { margin-top: 1.5rem; max-width: 20ch; }
.site .install--dark { margin-top: 2rem; font-size: 1.15rem; }
.site .cta__foot { color: var(--dark-muted); margin: 1.5rem 0 0; max-width: 40rem; }
.site .cta__foot a { color: var(--dark-text); }

/* the Is For format: a block is a line in capitals, then plain text */
.site .spec--blocks .kw { letter-spacing: .04em; }
.site .spec--blocks .l:not(:has(.kw)) { padding-left: 0; }
.site .dialogue__a--enter { color: var(--muted); font-weight: 400; font-style: italic; }


/* the foundation as five chunks: number, name, text, because */
.site .fdn { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .85rem; max-width: 52rem; }
.site .fdn__item { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; }
.site .fdn__num { text-decoration: none; display: grid; place-items: center; align-content: center; gap: .3rem; padding: .9rem 0; font-family: var(--display); font-weight: 600; font-size: 1.15rem; color: var(--heading); background: var(--surface-2); --part-base: #c4bdb0; }
.site .fdn__body { padding: 1rem 1.25rem 1.05rem; display: grid; gap: .45rem; }
.site .fdn__kw { margin: 0; font-size: .82rem; color: var(--accent-ink); letter-spacing: .03em; }
.site .fdn__text { margin: 0; color: var(--heading); font-size: 1.02rem; line-height: 1.5; }
.site .fdn__because { margin: 0; color: var(--muted); font-size: .95rem; }
.site .fdn__because strong { color: var(--heading); font-weight: 600; }
.site .fdn__item:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
@media (max-width: 30rem) { .site .fdn__item { grid-template-columns: 2.75rem minmax(0, 1fr); } .site .fdn__num { font-size: 1rem; } .site .fdn__num .part { width: 22px; height: auto; } }

/* mouse over an invariant and it shows focus, in green, like the diagram */
.site .fdn__item { transition: border-color .15s, box-shadow .15s; }
.site .fdn__item:hover, .site .fdn__item:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.site .fdn__item:hover .fdn__num, .site .fdn__item:focus-within .fdn__num, .site .fdn__item:target .fdn__num { background: var(--accent-soft); color: var(--accent-ink); --part-base: var(--heading); }
@media (prefers-reduced-motion: reduce) { .site .fdn__item { transition: none; } }

/* ------------------------------------------------ the mark's direction
   Lists take the diamond as their marker. */
.site .uses { list-style: none; padding-left: 1.25em; }
.site .uses li { position: relative; }
/* the list marker is the mark's own solid green diamond */
.site .uses li::before { content: ""; position: absolute; left: -1.25em; top: .6em; width: .5em; height: .5em; background: var(--accent); transform: rotate(45deg); }
.site .btn { border-radius: var(--r); }

/* ---------------------------------------- the mark, read as the foundation
   One glyph of the mark with one part lit: the base muted, the part green. */
.site .part { display: block; }
.site .part__base { fill: var(--part-base, var(--heading)); }
/* each part of a glyph is its own layer, ink like the mark until it lights */
.site .part .pp { fill: var(--part-base, var(--heading)); transition: fill .3s ease; }
.site .part .part__lit, .site .part .pp.part__lit { fill: var(--accent); }
/* hover: the parts light in turn, round the mark, until the foundation has joined hands */
.site .parts li:hover .pp, .site .parts li:focus-within .pp, .site .fdn__item:hover .pp, .site .fdn__item:focus-within .pp, .site .part:hover .pp { fill: var(--accent); }
.site .part .pp--1 { transition-delay: .12s; }
.site .part .pp--2 { transition-delay: .24s; }
.site .part .pp--3 { transition-delay: .36s; }
.site .part .pp--4 { transition-delay: .48s; }

/* the front-page figure: the mark drawn large, every part a link */
.site .anatomy { margin: .5rem 0 1.5rem; max-width: 48rem; }
.site .anatomy svg { display: block; width: 100%; height: auto; }
.site .anatomy a { cursor: pointer; text-decoration: none; }
.site .anatomy a rect, .site .anatomy a path, .site .anatomy a text, .site .anatomy a tspan { transition: fill .15s, stroke .15s; }
.site .anatomy a.layer--code:hover rect, .site .anatomy a.layer--code:focus-visible rect { stroke: var(--accent); }
.site .anatomy a.layer--code:hover text, .site .anatomy a.layer--code:focus-visible text,
.site .anatomy a.legend:hover text, .site .anatomy a.legend:focus-visible text { fill: var(--accent-ink); }
.site .anatomy a:focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) { .site .anatomy a rect, .site .anatomy a path, .site .anatomy a text { transition: none; } }

/* the parts, as a list: a glyph, then the words */
.site .parts { list-style: none; margin: .5rem 0 1.5rem; padding: 0; max-width: 44rem; display: grid; gap: .5rem; }
.site .parts li { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); gap: .9rem; align-items: start; padding: .75rem 1rem; border: 1px solid var(--rule); background: var(--surface); transition: border-color .15s, background-color .15s; }
.site .parts li strong { color: var(--heading); font-weight: 600; margin-right: .35rem; }
.site .parts__glyph { display: grid; place-items: center; padding-top: .1rem; }
.site .parts li:hover { background: var(--accent-soft); border-color: var(--accent); }
.site .parts li:hover strong { color: var(--accent-ink); }
.site .parts__yours { border-top: 2px solid var(--accent); }
@media (prefers-reduced-motion: reduce) { .site .parts li { transition: none; } }

/* cumulative: an invariant rests on the ones before it, so reaching, hovering
   or clicking Invariant n lights 0 to n, in the chunks and in the figure */
.site .fdn:has(.fdn__item--0:target) .fdn__item--0, .site .fdn:has(.fdn__item--0:hover) .fdn__item--0, .site .fdn:has(.fdn__item--0:focus-within) .fdn__item--0 { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.site .fdn:has(.fdn__item--0:target) .fdn__item--0 .fdn__num, .site .fdn:has(.fdn__item--0:hover) .fdn__item--0 .fdn__num, .site .fdn:has(.fdn__item--0:focus-within) .fdn__item--0 .fdn__num { background: var(--accent-soft); color: var(--accent-ink); --part-base: var(--heading); }
.site .fdn:has(.fdn__item--1:target) .fdn__item--0, .site .fdn:has(.fdn__item--1:hover) .fdn__item--0, .site .fdn:has(.fdn__item--1:focus-within) .fdn__item--0, .site .fdn:has(.fdn__item--1:target) .fdn__item--1, .site .fdn:has(.fdn__item--1:hover) .fdn__item--1, .site .fdn:has(.fdn__item--1:focus-within) .fdn__item--1 { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.site .fdn:has(.fdn__item--1:target) .fdn__item--0 .fdn__num, .site .fdn:has(.fdn__item--1:hover) .fdn__item--0 .fdn__num, .site .fdn:has(.fdn__item--1:focus-within) .fdn__item--0 .fdn__num, .site .fdn:has(.fdn__item--1:target) .fdn__item--1 .fdn__num, .site .fdn:has(.fdn__item--1:hover) .fdn__item--1 .fdn__num, .site .fdn:has(.fdn__item--1:focus-within) .fdn__item--1 .fdn__num { background: var(--accent-soft); color: var(--accent-ink); --part-base: var(--heading); }
.site .fdn:has(.fdn__item--2:target) .fdn__item--0, .site .fdn:has(.fdn__item--2:hover) .fdn__item--0, .site .fdn:has(.fdn__item--2:focus-within) .fdn__item--0, .site .fdn:has(.fdn__item--2:target) .fdn__item--1, .site .fdn:has(.fdn__item--2:hover) .fdn__item--1, .site .fdn:has(.fdn__item--2:focus-within) .fdn__item--1, .site .fdn:has(.fdn__item--2:target) .fdn__item--2, .site .fdn:has(.fdn__item--2:hover) .fdn__item--2, .site .fdn:has(.fdn__item--2:focus-within) .fdn__item--2 { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.site .fdn:has(.fdn__item--2:target) .fdn__item--0 .fdn__num, .site .fdn:has(.fdn__item--2:hover) .fdn__item--0 .fdn__num, .site .fdn:has(.fdn__item--2:focus-within) .fdn__item--0 .fdn__num, .site .fdn:has(.fdn__item--2:target) .fdn__item--1 .fdn__num, .site .fdn:has(.fdn__item--2:hover) .fdn__item--1 .fdn__num, .site .fdn:has(.fdn__item--2:focus-within) .fdn__item--1 .fdn__num, .site .fdn:has(.fdn__item--2:target) .fdn__item--2 .fdn__num, .site .fdn:has(.fdn__item--2:hover) .fdn__item--2 .fdn__num, .site .fdn:has(.fdn__item--2:focus-within) .fdn__item--2 .fdn__num { background: var(--accent-soft); color: var(--accent-ink); --part-base: var(--heading); }
.site .fdn:has(.fdn__item--3:target) .fdn__item--0, .site .fdn:has(.fdn__item--3:hover) .fdn__item--0, .site .fdn:has(.fdn__item--3:focus-within) .fdn__item--0, .site .fdn:has(.fdn__item--3:target) .fdn__item--1, .site .fdn:has(.fdn__item--3:hover) .fdn__item--1, .site .fdn:has(.fdn__item--3:focus-within) .fdn__item--1, .site .fdn:has(.fdn__item--3:target) .fdn__item--2, .site .fdn:has(.fdn__item--3:hover) .fdn__item--2, .site .fdn:has(.fdn__item--3:focus-within) .fdn__item--2, .site .fdn:has(.fdn__item--3:target) .fdn__item--3, .site .fdn:has(.fdn__item--3:hover) .fdn__item--3, .site .fdn:has(.fdn__item--3:focus-within) .fdn__item--3 { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.site .fdn:has(.fdn__item--3:target) .fdn__item--0 .fdn__num, .site .fdn:has(.fdn__item--3:hover) .fdn__item--0 .fdn__num, .site .fdn:has(.fdn__item--3:focus-within) .fdn__item--0 .fdn__num, .site .fdn:has(.fdn__item--3:target) .fdn__item--1 .fdn__num, .site .fdn:has(.fdn__item--3:hover) .fdn__item--1 .fdn__num, .site .fdn:has(.fdn__item--3:focus-within) .fdn__item--1 .fdn__num, .site .fdn:has(.fdn__item--3:target) .fdn__item--2 .fdn__num, .site .fdn:has(.fdn__item--3:hover) .fdn__item--2 .fdn__num, .site .fdn:has(.fdn__item--3:focus-within) .fdn__item--2 .fdn__num, .site .fdn:has(.fdn__item--3:target) .fdn__item--3 .fdn__num, .site .fdn:has(.fdn__item--3:hover) .fdn__item--3 .fdn__num, .site .fdn:has(.fdn__item--3:focus-within) .fdn__item--3 .fdn__num { background: var(--accent-soft); color: var(--accent-ink); --part-base: var(--heading); }
.site .fdn:has(.fdn__item--4:target) .fdn__item--0, .site .fdn:has(.fdn__item--4:hover) .fdn__item--0, .site .fdn:has(.fdn__item--4:focus-within) .fdn__item--0, .site .fdn:has(.fdn__item--4:target) .fdn__item--1, .site .fdn:has(.fdn__item--4:hover) .fdn__item--1, .site .fdn:has(.fdn__item--4:focus-within) .fdn__item--1, .site .fdn:has(.fdn__item--4:target) .fdn__item--2, .site .fdn:has(.fdn__item--4:hover) .fdn__item--2, .site .fdn:has(.fdn__item--4:focus-within) .fdn__item--2, .site .fdn:has(.fdn__item--4:target) .fdn__item--3, .site .fdn:has(.fdn__item--4:hover) .fdn__item--3, .site .fdn:has(.fdn__item--4:focus-within) .fdn__item--3, .site .fdn:has(.fdn__item--4:target) .fdn__item--4, .site .fdn:has(.fdn__item--4:hover) .fdn__item--4, .site .fdn:has(.fdn__item--4:focus-within) .fdn__item--4 { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.site .fdn:has(.fdn__item--4:target) .fdn__item--0 .fdn__num, .site .fdn:has(.fdn__item--4:hover) .fdn__item--0 .fdn__num, .site .fdn:has(.fdn__item--4:focus-within) .fdn__item--0 .fdn__num, .site .fdn:has(.fdn__item--4:target) .fdn__item--1 .fdn__num, .site .fdn:has(.fdn__item--4:hover) .fdn__item--1 .fdn__num, .site .fdn:has(.fdn__item--4:focus-within) .fdn__item--1 .fdn__num, .site .fdn:has(.fdn__item--4:target) .fdn__item--2 .fdn__num, .site .fdn:has(.fdn__item--4:hover) .fdn__item--2 .fdn__num, .site .fdn:has(.fdn__item--4:focus-within) .fdn__item--2 .fdn__num, .site .fdn:has(.fdn__item--4:target) .fdn__item--3 .fdn__num, .site .fdn:has(.fdn__item--4:hover) .fdn__item--3 .fdn__num, .site .fdn:has(.fdn__item--4:focus-within) .fdn__item--3 .fdn__num, .site .fdn:has(.fdn__item--4:target) .fdn__item--4 .fdn__num, .site .fdn:has(.fdn__item--4:hover) .fdn__item--4 .fdn__num, .site .fdn:has(.fdn__item--4:focus-within) .fdn__item--4 .fdn__num { background: var(--accent-soft); color: var(--accent-ink); --part-base: var(--heading); }

/* the install line on the front page selects whole on a click: no JavaScript here */
.site .install .mono { user-select: all; -webkit-user-select: all; cursor: text; }

/* the diagram lights the part an invariant stands for, green, going round
   the mark: hover or focus a legend row or a list item */
.site .anatomy .hl { fill: transparent; transition: fill .15s; }
.site #invariant-zero:has(.legend--0:hover, .legend--0:focus-visible, .parts__item--0:hover) .hl--0 { fill: var(--accent); }
.site #invariant-zero:has(.legend--1:hover, .legend--1:focus-visible, .parts__item--1:hover) .hl--1 { fill: var(--accent); }
.site #invariant-zero:has(.legend--2:hover, .legend--2:focus-visible, .parts__item--2:hover) .hl--2 { fill: var(--accent); }
.site #invariant-zero:has(.legend--3:hover, .legend--3:focus-visible, .parts__item--3:hover) .hl--3 { fill: var(--accent); }
.site #invariant-zero:has(.legend--4:hover, .legend--4:focus-visible, .parts__item--4:hover) .hl--4 { fill: var(--accent); }
@media (prefers-reduced-motion: reduce) { .site .anatomy .hl { transition: none; } }
/* hovering the mark in the diagram runs the same sweep: each figure, then the band */
.site #invariant-zero:has(.layer--foundation:hover, .layer--foundation:focus-visible) .hl { fill: var(--accent); }
.site .anatomy .hl--1 { transition-delay: .12s; }
.site .anatomy .hl--2 { transition-delay: .24s; }
.site .anatomy .hl--3 { transition-delay: .36s; }
.site .anatomy .hl--4 { transition-delay: .48s; }
@media (prefers-reduced-motion: reduce) { .site .part .pp, .site .anatomy .hl { transition: none; transition-delay: 0s; } }
/* yours: once the foundation has joined hands, the green diamond at the
   centre grows a fifth and brightens */
.site .part__core, .site .anatomy .anatomy__core { transform-box: fill-box; transform-origin: center;
    transition: transform .35s ease, fill .35s ease; }
.site .parts li:hover .part__core, .site .parts li:focus-within .part__core, .site .part:hover .part__core,
.site #invariant-zero:has(.layer--iz4:hover, .layer--iz4:focus-visible, .legend--yours:hover, .legend--yours:focus-visible, .parts__yours:hover) .anatomy__core {
    transform: scale(1.2); fill: #27ad66; transition-delay: .6s; }
@media (prefers-reduced-motion: reduce) { .site .part__core, .site .anatomy .anatomy__core { transition: none; } }
/* hovering a part of the mark lights it and the words for it: its legend row and its card below */
.site .anatomy .hl--4 { pointer-events: none; }
.site .anatomy .hlink { cursor: pointer; }
.site #invariant-zero:has(.hlink--0:hover, .hlink--0:focus-visible) .hl--0 { fill: var(--accent); }
.site #invariant-zero:has(.hlink--0:hover, .hlink--0:focus-visible) .legend--0 text { fill: var(--accent-ink); }
.site #invariant-zero:has(.hlink--0:hover, .hlink--0:focus-visible) .parts__item--0 { background: var(--accent-soft); border-color: var(--accent); }
.site #invariant-zero:has(.hlink--1:hover, .hlink--1:focus-visible) .hl--1 { fill: var(--accent); }
.site #invariant-zero:has(.hlink--1:hover, .hlink--1:focus-visible) .legend--1 text { fill: var(--accent-ink); }
.site #invariant-zero:has(.hlink--1:hover, .hlink--1:focus-visible) .parts__item--1 { background: var(--accent-soft); border-color: var(--accent); }
.site #invariant-zero:has(.hlink--2:hover, .hlink--2:focus-visible) .hl--2 { fill: var(--accent); }
.site #invariant-zero:has(.hlink--2:hover, .hlink--2:focus-visible) .legend--2 text { fill: var(--accent-ink); }
.site #invariant-zero:has(.hlink--2:hover, .hlink--2:focus-visible) .parts__item--2 { background: var(--accent-soft); border-color: var(--accent); }
.site #invariant-zero:has(.hlink--3:hover, .hlink--3:focus-visible) .hl--3 { fill: var(--accent); }
.site #invariant-zero:has(.hlink--3:hover, .hlink--3:focus-visible) .legend--3 text { fill: var(--accent-ink); }
.site #invariant-zero:has(.hlink--3:hover, .hlink--3:focus-visible) .parts__item--3 { background: var(--accent-soft); border-color: var(--accent); }
.site #invariant-zero:has(.layer--iz4:hover, .layer--iz4:focus-visible) .legend--yours text { fill: var(--accent-ink); }
.site #invariant-zero:has(.layer--iz4:hover, .layer--iz4:focus-visible) .parts__yours { background: var(--accent-soft); border-color: var(--accent); }
/* old #invariant-N links still land on their foundation invariant */
.site .fdn__item { position: relative; }
.site .fdn__anchor { position: absolute; top: 0; left: 0; width: 0; height: 0; }
/* a foundation invariant at its own name: https://humans-first.iz4.you */
.site .named__id { font-size: clamp(1.6rem, 5vw, 2.6rem); line-height: 1.15; overflow-wrap: anywhere; margin: .2rem 0 1rem; }
.site .named__text { font-size: 1.25rem; line-height: 1.5; max-width: 44rem; }
.site .named__because { color: var(--muted); max-width: 44rem; }
.site .named__digest { overflow-wrap: anywhere; font-size: .9rem; }
.site .named__five { list-style: none; padding: 0; display: grid; gap: .5rem; }
.site .named__five li { display: flex; align-items: center; gap: .6rem; }

/* named invariants (iz4 0.16): what changes, the folded foundation, names vs numbers */
.site .hero .changes { list-style: none; margin: 1.25rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; color: var(--dark-text); font-family: var(--display); font-weight: 500; font-size: 1.05rem; }
.site .hero .changes li { white-space: nowrap; }
.site .spec .l--fold { color: var(--muted); }
.site .specdoc--dark .spec .l--fold { color: var(--dark-muted); }
.site .contrast__row--yes dt { color: var(--accent-ink) !important; }
.site .contrast__row--yes dd { color: var(--heading); font-weight: 500; }
.site pre.spec { white-space: pre; overflow-x: auto; overflow-wrap: normal; margin: 0; }
.site .namegrid { display: grid; gap: 1.5rem 2.5rem; align-items: start; max-width: 60rem; margin-top: 1.5rem; }
@media (min-width: 52rem) { .site .namegrid { grid-template-columns: 15rem minmax(0, 1fr); } }
.site .flow { margin-top: 1.5rem; max-width: 24rem; }
.site #references .specdoc { max-width: 44rem; margin-bottom: 1.5rem; }
.site #file .specdoc--dark { margin: 0 0 1.75rem; }