/* EngineD blog skin — "engineering drawing".

   The page is a drawing sheet on vellum: ink line work, a title block heading every system page, figures drawn on
   faint drafting grid with corner marks. Colour carries MEANING, never decoration:
     cobalt     = the simulation (the part that decides)
     verdigris  = the adapter (the part that shows, sounds and draws)
     hazard     = a hit, damage, a warning; used sparingly
   Fonts: Archivo (headings, labels, diagrams; its width axis is used expanded for display) and Literata (body).
   Component kit reference: Areas/Blog/Projects/EngineD/AUTHORING.md -> "Component kit". */

/* Mirrored in Projects/EngineD/project.json "plate" (the blog index cannot load this skin): paper = --ed-vellum,
   ink = --ed-ink, accent = --ed-cobalt. Change both together.
   Contrast: ink on vellum and graphite on paper pass AA for body text; graphite on --ed-hazard-wash is ≈4.46:1, just
   under 4.5, so small graphite text (lbl-sm) is never drawn on a `box hit` / hazard wash: use ink there. */
:root {
    --ed-vellum: #ecede6;
    --ed-paper: #f6f7f2;
    --ed-ink: #18242e;
    --ed-graphite: #5b6670;
    --ed-rule: #c9cec6;
    --ed-rule-strong: #9aa39b;
    --ed-cobalt: #2449b8;
    --ed-cobalt-wash: #dfe4f1;
    --ed-verdigris: #2e8c7a;
    --ed-verdigris-ink: #1d6b5b;
    --ed-verdigris-wash: #dbe9e3;
    --ed-hazard: #b3261e;
    --ed-hazard-wash: #f1dcd6;
    --ed-grid: rgb(36 73 184 / 0.07);

    --ed-font-display: "Archivo", "Arial Narrow", system-ui, sans-serif;
    --ed-font-body: "Literata", Georgia, "Times New Roman", serif;
    /* Text spans the whole page (the user, 2026-10-23: the 40rem column left half of a wide page empty). */
    --ed-measure: 100%;
    --ed-gutter: clamp(1rem, 4vw, 2.5rem);
    /* The shared page-width rule (80% of the window from 64rem up) plus this skin's gutters. */
    --ed-wide: calc(var(--blog-page-width) + 2 * var(--ed-gutter));

    /* Shared Blog component tokens (Areas/Blog/AUTHORING.md -> "Component CSS variables"). */
    --blog-ink: var(--ed-ink);
    --blog-ink-muted: var(--ed-graphite);
    --blog-surface: var(--ed-vellum);
    --blog-surface-raised: var(--ed-paper);
    --blog-rule: var(--ed-rule);
    --blog-accent: var(--ed-cobalt);
    --blog-accent-ink: #ffffff;
    --blog-focus: var(--ed-cobalt);
    --blog-radius: 2px;
    --blog-gap: 1.25rem;
    --blog-font-ui: var(--ed-font-display);
    --blog-media-backdrop: var(--ed-paper);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body.ed {
    margin: 0;
    background: var(--ed-vellum);
    color: var(--ed-ink);
    font-family: var(--ed-font-body);
    /* 17 px up to 1920 wide, growing to 20 px at 2560, so the wide lines stay readable. */
    font-size: clamp(1.0625rem, 0.5rem + 0.47vw, 1.25rem);
    line-height: 1.65;
    font-optical-sizing: auto;
}

.ed a {
    color: var(--ed-cobalt);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.ed a:hover {
    text-decoration-thickness: 2px;
}

.ed a:focus-visible,
.ed summary:focus-visible {
    outline: 2px solid var(--ed-cobalt);
    outline-offset: 2px;
}

/* The shared skip link (blog-components.css places it); the drawing's ink and display face. */
.ed a.blog-skip {
    background: var(--ed-ink);
    color: var(--ed-vellum);
    font-family: var(--ed-font-display);
}

/* ---- Masthead ---- */

.ed-masthead {
    border-bottom: 1px solid var(--ed-ink);
    background: var(--ed-vellum);
}

.ed-masthead-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 2rem;
    max-width: var(--ed-wide);
    margin: 0 auto;
    padding: 0.85rem var(--ed-gutter);
}

/* The logo: "ENGINE" in wide Archivo caps + the face-ring nut as the D, its flats on the cap height and baseline. */
.ed .ed-brand {
    display: inline-flex;
    align-items: baseline;
    color: var(--ed-ink);
    text-decoration: none;
    font-family: var(--ed-font-display);
    font-weight: 800;
    font-stretch: 112.5%;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ed-brand .ed-brand-nut {
    /* Archivo's cap height is about 0.72em; the nut is as tall, sitting on the baseline. */
    height: 0.72em;
    width: auto;
    aspect-ratio: 30 / 25.98;
    margin: 0 0 0 0.04em;
    flex: none;
    fill: currentColor;
}

.ed .blog-nav {
    font-size: 0.9375rem;
}

.ed .blog-nav a {
    color: var(--ed-ink);
}

.ed .blog-nav a[aria-current] {
    text-decoration-color: var(--ed-cobalt);
}

.ed .blog-nav-item--intro {
    display: none;
}

/* ---- Main column ---- */

.ed-main {
    max-width: var(--ed-wide);
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 3rem) var(--ed-gutter) 4rem;
}

.ed-prose > *,
.ed-measure {
    max-width: var(--ed-measure);
}

.ed-prose > .ed-fig,
.ed-prose > .ed-flow,
.ed-prose > .ed-stats,
.ed-prose > .ed-table-wrap,
.ed-prose > .ed-split,
.ed-prose > .ed-cards,
.ed-prose > .ed-bars,
.ed-prose > .blog-panel {
    max-width: none;
}

.ed h1,
.ed h2,
.ed h3,
.ed h4 {
    font-family: var(--ed-font-display);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.ed h1 {
    margin: 0;
    font-size: clamp(2rem, 5.5vw, 3.4rem);
    font-weight: 800;
    font-stretch: 115%;
}

.ed-prose h2 {
    margin: 2.75rem 0 0.75rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--ed-ink);
    font-size: clamp(1.35rem, 3vw, 1.7rem);
    font-weight: 700;
    font-stretch: 108%;
}

.ed-prose h3 {
    margin: 1.9rem 0 0.4rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.ed-prose p,
.ed-prose ul,
.ed-prose ol {
    margin: 0 0 1rem;
}

/* Only plain prose lists get the item spacing; component lists (any list with a class) set their own margins, so they
   need no !important to undo this. */
.ed-prose :where(ul:not([class]), ol:not([class])) > li + li {
    margin-top: 0.3rem;
}

.ed-lead {
    margin: 0 0 1.5rem;
    font-size: clamp(1.15rem, 2.2vw, 1.3rem);
    line-height: 1.55;
}

.ed-asof {
    font-family: var(--ed-font-display);
    font-size: 0.8125rem;
    color: var(--ed-graphite);
}

/* ---- Title block (top of every system sheet; Kit/_Sheet.cshtml) ---- */

.ed-titleblock {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    border: 1.5px solid var(--ed-ink);
    background: var(--ed-paper);
    margin-bottom: 2.25rem;
}

.ed-titleblock-main {
    padding: 1.25rem 1.4rem 1.3rem;
}

.ed-titleblock-group {
    margin: 0 0 0.5rem;
    font-family: var(--ed-font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ed-cobalt);
}

.ed-titleblock-summary {
    margin: 0.7rem 0 0;
    color: var(--ed-graphite);
    font-size: 1.0625rem;
}

/* Three stacked cells on the right (sheet, engine, as of); a row of three on narrow screens. */
.ed-titleblock-cells {
    display: grid;
    grid-template-columns: minmax(8.5rem, auto);
    align-content: stretch;
    margin: 0;
    border-left: 1.5px solid var(--ed-ink);
    font-family: var(--ed-font-display);
}

.ed-titleblock-cell {
    padding: 0.55rem 1rem;
    border-bottom: 1px solid var(--ed-rule-strong);
}

.ed-titleblock-cell:last-child {
    border-bottom: 0;
}

.ed-titleblock-cell dt {
    font-size: 0.75rem;
    color: var(--ed-graphite);
}

.ed-titleblock-cell dd {
    margin: 0.1rem 0 0;
    font-size: 1.0625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .ed-titleblock {
        grid-template-columns: minmax(0, 1fr);
    }

    .ed-titleblock-cells {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-left: 0;
        border-top: 1.5px solid var(--ed-ink);
    }

    .ed-titleblock-cell {
        border-bottom: 0;
        border-right: 1px solid var(--ed-rule-strong);
        padding: 0.5rem 0.6rem;
    }

    .ed-titleblock-cell:last-child {
        border-right: 0;
    }

    .ed-titleblock-cell dd {
        font-size: 0.95rem;
    }
}

/* ---- Figure: a plate on drafting grid with corner marks, numbered "Figure n" per page ---- */

.ed-sheet-body,
.ed-intro {
    counter-reset: ed-figure;
}

.ed-fig {
    position: relative;
    margin: 2rem 0 2.25rem;
    padding: clamp(0.9rem, 2.5vw, 1.6rem);
    border: 1px solid var(--ed-rule-strong);
    background-color: var(--ed-paper);
    background-image:
        linear-gradient(var(--ed-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--ed-grid) 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: -1px -1px;
    counter-increment: ed-figure;
}

/* Corner marks: short L strokes at two opposite corners (top-left, bottom-right), like a drawing's frame. */
.ed-fig::before,
.ed-fig::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border-color: var(--ed-ink);
    border-style: solid;
    pointer-events: none;
}

.ed-fig::before {
    top: -1px;
    left: -1px;
    border-width: 2px 0 0 2px;
}

.ed-fig::after {
    right: -1px;
    bottom: -1px;
    border-width: 0 2px 2px 0;
}

.ed-fig > figcaption {
    margin-top: 1rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--ed-rule);
    font-family: var(--ed-font-display);
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--ed-graphite);
}

.ed-fig > figcaption::before {
    content: "Figure " counter(ed-figure) ". ";
    font-weight: 700;
    color: var(--ed-ink);
}

.ed-fig-title {
    margin: 0 0 1rem;
    font-family: var(--ed-font-display);
    font-size: 1rem;
    font-weight: 700;
}

/* Every diagram sits in an ed-fig-scroll: on phones it scrolls sideways instead of shrinking its labels.
   The minimum keeps the smallest label (lbl-sm, 13 units) at about 11 px or more for a viewBox up to 565 units wide
   (480 px / 565 units x 13); a viewBox up to 750 units wide uses ed-fig-scroll--wide (640 px). On a desktop the
   drawing grows with the window up to 48rem (60rem when wide), so labels stay between about 15 and 20 px.
   The minimums apply on phone widths only: on wider screens a drawing in a narrow column (the intro hero) fits its
   column instead of being clipped behind a scrollbar. */
.ed-fig-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.ed-fig-scroll > svg {
    max-width: clamp(36rem, 40vw, 48rem);
}

.ed-fig-scroll--wide > svg {
    max-width: clamp(46rem, 50vw, 60rem);
}

@media (max-width: 40rem) {
    .ed-fig-scroll > svg {
        min-width: 30rem;
    }

    .ed-fig-scroll--wide > svg {
        min-width: 40rem;
    }
}

.ed-fig-scroll:focus-visible,
.ed-table-wrap:focus-visible {
    outline: 2px solid var(--ed-cobalt);
    outline-offset: 2px;
}

/* ---- Inline SVG vocabulary: draw with classes, never with inline colours ---- */

.ed-svg {
    display: block;
    width: 100%;
    height: auto;
    max-width: clamp(46rem, 50vw, 60rem);
    margin: 0 auto;
    overflow: visible;
    font-family: var(--ed-font-display);
    font-size: 15px;
    fill: var(--ed-ink);
}

.ed-svg .box {
    fill: var(--ed-paper);
    stroke: var(--ed-ink);
    stroke-width: 1.5;
}

.ed-svg .box.sim {
    fill: var(--ed-cobalt-wash);
    stroke: var(--ed-cobalt);
}

.ed-svg .box.adp {
    fill: var(--ed-verdigris-wash);
    stroke: var(--ed-verdigris);
}

.ed-svg .box.hit {
    fill: var(--ed-hazard-wash);
    stroke: var(--ed-hazard);
}

.ed-svg .box.ghost {
    fill: none;
    stroke: var(--ed-rule-strong);
    stroke-dasharray: 5 4;
}

.ed-svg .line {
    fill: none;
    stroke: var(--ed-ink);
    stroke-width: 1.5;
}

.ed-svg .line.sim {
    stroke: var(--ed-cobalt);
}

.ed-svg .line.adp {
    stroke: var(--ed-verdigris);
}

.ed-svg .line.hit {
    stroke: var(--ed-hazard);
}

.ed-svg .line.dash {
    stroke-dasharray: 6 5;
}

.ed-svg .line.thin {
    stroke-width: 1;
    stroke: var(--ed-graphite);
}

.ed-svg .dot {
    fill: var(--ed-ink);
}

.ed-svg .dot.sim {
    fill: var(--ed-cobalt);
}

.ed-svg .dot.adp {
    fill: var(--ed-verdigris);
}

.ed-svg .dot.hit {
    fill: var(--ed-hazard);
}

.ed-svg .area {
    fill: var(--ed-cobalt-wash);
    stroke: none;
}

.ed-svg .area.adp {
    fill: var(--ed-verdigris-wash);
}

.ed-svg .area.hit {
    fill: var(--ed-hazard-wash);
}

.ed-svg .lbl {
    font-size: 15px;
    font-weight: 600;
    fill: var(--ed-ink);
}

.ed-svg .lbl-lg {
    font-size: 18px;
    font-weight: 700;
    fill: var(--ed-ink);
}

.ed-svg .lbl-sm {
    font-size: 13px;
    fill: var(--ed-graphite);
}

.ed-svg .lbl.sim,
.ed-svg .lbl-sm.sim {
    fill: var(--ed-cobalt);
}

.ed-svg .lbl.adp,
.ed-svg .lbl-sm.adp {
    fill: var(--ed-verdigris-ink);
}

.ed-svg .lbl.hit,
.ed-svg .lbl-sm.hit {
    fill: var(--ed-hazard);
}

.ed-svg .mid {
    text-anchor: middle;
}

.ed-svg .end {
    text-anchor: end;
}

.ed-svg .arrowhead {
    fill: var(--ed-ink);
}

.ed-svg .arrowhead.sim {
    fill: var(--ed-cobalt);
}

.ed-svg .arrowhead.adp {
    fill: var(--ed-verdigris);
}

.ed-svg .arrowhead.hit {
    fill: var(--ed-hazard);
}

/* ---- Flow: a left-to-right chain of steps (stacks on phones). Steps are a real sequence. ---- */

/* One row, never wrapped (a wrapped row would leave an arrow pointing off the edge); below 760px it stacks. */
.ed-flow {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.75rem 1.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: ed-flow;
}

.ed-flow > li {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    /* A six-step flow leaves each step ≈64px of text between ≈760 and 950px: long words hyphenate there instead of
       splitting at an arbitrary letter (the page is lang="en"). */
    overflow-wrap: break-word;
    hyphens: auto;
    margin: 0;
    padding: 0.75rem 0.85rem 0.85rem;
    border: 1.5px solid var(--ed-ink);
    background: var(--ed-paper);
    font-family: var(--ed-font-display);
    font-size: 0.9rem;
    line-height: 1.4;
    counter-increment: ed-flow;
}

.ed-flow > li::before {
    content: counter(ed-flow);
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.4rem;
    border: 1.5px solid currentColor;
    border-radius: 50%;
    font-size: 0.8rem;
    font-weight: 700;
}

/* The connecting arrow sits in the gap to the right of every step but the last. */
.ed-flow > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(-1.9rem + 0.35rem);
    width: calc(1.9rem - 0.7rem);
    height: 10px;
    margin-top: -5px;
    background:
        linear-gradient(var(--ed-ink), var(--ed-ink)) left center / calc(100% - 7px) 1.5px no-repeat,
        conic-gradient(from -120deg at 100% 50%, var(--ed-ink) 0 60deg, transparent 60deg) right center / 8px 10px no-repeat;
}

.ed-flow b,
.ed-flow strong {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 1rem;
}

.ed-flow > li.is-sim {
    border-color: var(--ed-cobalt);
    background: var(--ed-cobalt-wash);
}

.ed-flow > li.is-sim::before {
    color: var(--ed-cobalt);
}

.ed-flow > li.is-adp {
    border-color: var(--ed-verdigris);
    background: var(--ed-verdigris-wash);
}

.ed-flow > li.is-adp::before {
    color: var(--ed-verdigris-ink);
}

.ed-flow > li.is-hit {
    border-color: var(--ed-hazard);
    background: var(--ed-hazard-wash);
}

.ed-flow > li.is-hit::before {
    color: var(--ed-hazard);
}

/* A flow that must not wrap mid-row: it becomes a vertical chain below 760px. */
@media (max-width: 760px) {
    .ed-flow {
        flex-direction: column;
        gap: 1.4rem;
    }

    .ed-flow > li {
        flex: none;
    }

    .ed-flow > li:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: calc(-1.4rem + 0.2rem);
        left: 1.6rem;
        width: 10px;
        height: calc(1.4rem - 0.4rem);
        margin: 0;
        background:
            linear-gradient(var(--ed-ink), var(--ed-ink)) center top / 1.5px calc(100% - 7px) no-repeat,
            conic-gradient(from 150deg at 50% 100%, var(--ed-ink) 0 60deg, transparent 60deg) center bottom / 10px 8px no-repeat;
    }
}

/* ---- Stats: dimension callouts. Each value sits over a dimension line with end ticks. ---- */

.ed-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: 1.5rem 2rem;
    margin: 2rem 0;
    padding: 0;
}

.ed-stat {
    margin: 0;
}

.ed-stat-value {
    margin: 0;
    font-family: var(--ed-font-display);
    font-size: clamp(2rem, 5vw, 2.6rem);
    font-weight: 800;
    font-stretch: 110%;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--ed-ink);
}

.ed-stat-value::after {
    content: "";
    display: block;
    height: 9px;
    margin: 0.55rem 0 0.45rem;
    background:
        linear-gradient(var(--ed-cobalt), var(--ed-cobalt)) left top / 1.5px 100% no-repeat,
        linear-gradient(var(--ed-cobalt), var(--ed-cobalt)) right top / 1.5px 100% no-repeat,
        linear-gradient(var(--ed-cobalt), var(--ed-cobalt)) left center / 100% 1px no-repeat;
}

.ed-stat-label {
    margin: 0;
    font-family: var(--ed-font-display);
    font-size: 0.9rem;
    line-height: 1.35;
    color: var(--ed-graphite);
}

/* ---- Tables ---- */

.ed-table-wrap {
    margin: 1.75rem 0 2rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.ed-table {
    width: 100%;
    min-width: 30rem;
    border-collapse: collapse;
    font-family: var(--ed-font-display);
    font-size: 0.9375rem;
    line-height: 1.4;
    background: var(--ed-paper);
}

.ed-table caption {
    margin-bottom: 0.6rem;
    font-weight: 700;
    text-align: left;
}

.ed-table th,
.ed-table td {
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--ed-rule-strong);
    text-align: left;
    vertical-align: top;
}

.ed-table thead th {
    border-bottom: 1.5px solid var(--ed-ink);
    background: var(--ed-vellum);
    font-weight: 700;
}

.ed-table tbody th {
    font-weight: 600;
}

.ed-table .is-sim {
    color: var(--ed-cobalt);
}

.ed-table .is-adp {
    color: var(--ed-verdigris-ink);
}

.ed-table .is-hit {
    color: var(--ed-hazard);
}

.ed-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---- Split: "the simulation decides" vs "the adapter shows" (or any two-sided comparison) ---- */

.ed-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    margin: 2rem 0;
    border: 1.5px solid var(--ed-ink);
}

.ed-split > section {
    padding: 1rem 1.2rem 1.1rem;
    background: var(--ed-paper);
}

.ed-split > section + section {
    border-left: 1.5px solid var(--ed-ink);
}

.ed-split h3 {
    margin: 0 0 0.5rem;
    font-size: 1.05rem;
}

.ed-split .is-sim h3,
.ed-split > .is-sim > h3 {
    color: var(--ed-cobalt);
}

.ed-split > .is-adp > h3 {
    color: var(--ed-verdigris-ink);
}

.ed-split > .is-hit > h3 {
    color: var(--ed-hazard);
}

.ed-split > .is-sim {
    box-shadow: inset 0 4px 0 var(--ed-cobalt);
}

.ed-split > .is-adp {
    box-shadow: inset 0 4px 0 var(--ed-verdigris);
}

.ed-split > .is-hit {
    box-shadow: inset 0 4px 0 var(--ed-hazard);
}

.ed-split ul {
    margin: 0;
    padding-left: 1.1rem;
}

.ed-split p:last-child,
.ed-split ul:last-child {
    margin-bottom: 0;
}

@media (max-width: 640px) {
    .ed-split {
        grid-template-columns: minmax(0, 1fr);
    }

    .ed-split > section + section {
        border-left: 0;
        border-top: 1.5px solid var(--ed-ink);
    }
}

/* ---- Bars: a simple horizontal bar chart. Set --v (0..1) on each li; the value text is the li's last span. ---- */

.ed-bars {
    margin: 1.75rem 0 2rem;
    padding: 0;
    list-style: none;
    font-family: var(--ed-font-display);
    font-size: 0.9rem;
}

.ed-bars > li {
    display: grid;
    grid-template-columns: minmax(7rem, 14rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 0.55rem;
}

.ed-bars > li::after {
    content: "";
    grid-column: 2;
    grid-row: 1;
    height: 0.85rem;
    width: calc(var(--v, 0) * 100%);
    min-width: 2px;
    background: var(--ed-cobalt);
}

.ed-bars > li.is-adp::after {
    background: var(--ed-verdigris);
}

.ed-bars > li.is-hit::after {
    background: var(--ed-hazard);
}

.ed-bars > li > span:last-child {
    grid-column: 3;
    font-variant-numeric: tabular-nums;
    color: var(--ed-graphite);
}

@media (max-width: 520px) {
    .ed-bars > li {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.25rem 0.75rem;
    }

    .ed-bars > li > span:first-child {
        grid-column: 1 / -1;
    }

    .ed-bars > li::after {
        grid-column: 1;
        grid-row: 2;
    }

    .ed-bars > li > span:last-child {
        grid-column: 2;
        grid-row: 2;
    }
}

/* ---- Steps: numbered panels for a real sequence (Life of a shot). ---- */

/* As wide as the page, like the rest of the text. */
.ed-prose > .ed-steps,
.ed-steps {
    margin: 2rem 0;
    padding: 0;
    list-style: none;
    counter-reset: ed-step;
}

.ed-steps > li {
    position: relative;
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    gap: 0 1.25rem;
    margin: 0;
    padding: 0 0 2rem;
    counter-increment: ed-step;
}

/* The connecting rail between step numbers. */
.ed-steps > li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 3.25rem;
    bottom: 0;
    left: calc(1.625rem - 0.75px);
    width: 1.5px;
    background: var(--ed-ink);
}

.ed-steps > li::before {
    content: counter(ed-step);
    display: grid;
    place-items: center;
    width: 3.25rem;
    height: 3.25rem;
    border: 1.5px solid var(--ed-ink);
    border-radius: 50%;
    background: var(--ed-paper);
    font-family: var(--ed-font-display);
    font-size: 1.25rem;
    font-weight: 800;
}

.ed-steps > li.is-sim::before {
    border-color: var(--ed-cobalt);
    color: var(--ed-cobalt);
    background: var(--ed-cobalt-wash);
}

.ed-steps > li.is-adp::before {
    border-color: var(--ed-verdigris);
    color: var(--ed-verdigris-ink);
    background: var(--ed-verdigris-wash);
}

.ed-steps > li.is-hit::before {
    border-color: var(--ed-hazard);
    color: var(--ed-hazard);
    background: var(--ed-hazard-wash);
}

.ed-step-panel {
    min-width: 0;
    padding: 1rem 1.2rem 1.1rem;
    border: 1px solid var(--ed-rule-strong);
    background: var(--ed-paper);
}

.ed-step-panel h3 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
}

.ed-step-panel p {
    margin: 0 0 0.75rem;
}

.ed-step-panel .ed-svg {
    margin: 0.5rem 0 0.75rem;
}

.ed-step-link {
    font-family: var(--ed-font-display);
    font-size: 0.9rem;
    font-weight: 600;
}

@media (max-width: 520px) {
    .ed-steps > li {
        grid-template-columns: 2.25rem minmax(0, 1fr);
        gap: 0 0.75rem;
    }

    .ed-steps > li::before {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
    }

    .ed-steps > li:not(:last-child)::after {
        top: 2.25rem;
        left: calc(1.125rem - 0.75px);
    }

    .ed-step-panel {
        padding: 0.85rem 0.9rem 0.95rem;
    }
}

/* ---- Note: a drafting note in the margin of the text ---- */

.ed-note {
    margin: 1.5rem 0;
    padding: 0.2rem 0 0.2rem 1rem;
    border-left: 3px solid var(--ed-cobalt);
    font-family: var(--ed-font-display);
    font-size: 0.95rem;
    line-height: 1.5;
}

.ed-note.is-hit {
    border-left-color: var(--ed-hazard);
}

.ed-note.is-adp {
    border-left-color: var(--ed-verdigris);
}

.ed-note > :last-child {
    margin-bottom: 0;
}

/* ---- Key: a legend for the colour meaning ---- */

.ed-key {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.25rem;
    margin: 0 0 1rem;
    padding: 0;
    list-style: none;
    font-family: var(--ed-font-display);
    font-size: 0.85rem;
    color: var(--ed-graphite);
}

.ed-key li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
}

.ed-key li::before {
    content: "";
    width: 0.9rem;
    height: 0.9rem;
    border: 1.5px solid var(--ed-ink);
    background: var(--ed-paper);
}

.ed-key li.is-sim::before {
    border-color: var(--ed-cobalt);
    background: var(--ed-cobalt-wash);
}

.ed-key li.is-adp::before {
    border-color: var(--ed-verdigris);
    background: var(--ed-verdigris-wash);
}

.ed-key li.is-hit::before {
    border-color: var(--ed-hazard);
    background: var(--ed-hazard-wash);
}

/* ---- Cards: small grid of linked items (e.g. "see also" sheets) ---- */

.ed-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    gap: 0.75rem;
    margin: 1.5rem 0;
    padding: 0;
    list-style: none;
}

.ed-cards > li {
    margin: 0;
    padding: 0.8rem 0.95rem 0.9rem;
    border: 1px solid var(--ed-rule-strong);
    background: var(--ed-paper);
    font-family: var(--ed-font-display);
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--ed-graphite);
}

.ed-cards > li > a,
.ed-cards > li > strong {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1rem;
    font-weight: 700;
}

/* ---- Sheet footer: used-in panels and previous/next sheet ---- */

.ed-sheet-foot {
    max-width: var(--ed-measure);
    margin-top: 3.5rem;
}

.ed .blog-panel {
    border-left-width: 4px;
    background: var(--ed-paper);
}

.ed-pager {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ed-ink);
    font-family: var(--ed-font-display);
}

.ed-pager a {
    display: block;
    padding: 0.6rem 0.8rem;
    border: 1px solid var(--ed-rule-strong);
    background: var(--ed-paper);
    text-decoration: none;
    line-height: 1.3;
}

.ed-pager a:hover {
    border-color: var(--ed-cobalt);
}

.ed-pager small {
    display: block;
    color: var(--ed-graphite);
    font-size: 0.8rem;
}

.ed-pager-next {
    grid-column: 2;
    text-align: right;
}

/* ---- Intro: hero, system map ---- */

.ed-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 2rem 3rem;
    align-items: center;
    margin-bottom: 3rem;
}

.ed-hero-text .ed-lead {
    margin-top: 1.1rem;
}

/* `.ed` raises it above the `.ed h1` heading rule without !important. */
.ed .ed-hero-title {
    font-size: clamp(2.75rem, 9vw, 5.5rem);
    font-stretch: 125%;
    line-height: 0.95;
    letter-spacing: -0.03em;
}

@media (max-width: 860px) {
    .ed-hero {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ed-map {
    margin: 1.5rem 0 1rem;
}

.ed-map-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0.5rem 1.5rem;
    align-items: center;
    margin-bottom: 1.25rem;
    padding: 1rem 1.2rem;
    border: 1.5px solid var(--ed-hazard);
    background: var(--ed-paper);
    font-family: var(--ed-font-display);
}

.ed-map-feature a {
    font-size: 1.2rem;
    font-weight: 700;
}

.ed-map-feature p {
    margin: 0.2rem 0 0;
    color: var(--ed-graphite);
    font-size: 0.95rem;
}

.ed-map-feature svg {
    width: 9rem;
    height: auto;
}

@media (max-width: 520px) {
    .ed-map-feature {
        grid-template-columns: minmax(0, 1fr);
    }

    .ed-map-feature svg {
        display: none;
    }
}

.ed-map-groups {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(19rem, 100%), 1fr));
    gap: 1.25rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ed-map-group {
    margin: 0;
    border: 1.5px solid var(--ed-ink);
    background: var(--ed-paper);
}

.ed-map-group-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0.9rem;
    border-bottom: 1.5px solid var(--ed-ink);
    font-family: var(--ed-font-display);
}

.ed-map-group-head h3 {
    margin: 0;
    font-size: 1.1rem;
}

.ed-map-group-head span {
    font-size: 0.8rem;
    color: var(--ed-graphite);
}

.ed-map-group ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ed-map-group li {
    margin: 0;
    border-bottom: 1px solid var(--ed-rule);
}

.ed-map-group li:last-child {
    border-bottom: 0;
}

.ed-map-group li a {
    display: block;
    padding: 0.6rem 0.9rem 0.65rem;
    text-decoration: none;
    font-family: var(--ed-font-display);
}

.ed-map-group li a:hover {
    background: var(--ed-cobalt-wash);
}

.ed-map-group li a strong {
    display: block;
    font-size: 1rem;
}

.ed-map-group li a span {
    display: block;
    margin-top: 0.1rem;
    color: var(--ed-graphite);
    font-size: 0.875rem;
    line-height: 1.35;
}

/* Releases strip on the intro. */
/* One column per release, however many there are (the list comes from EngineDReleases.cs). */
.ed-releases {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin: 1.5rem 0 0.5rem;
    padding: 0;
    list-style: none;
    font-family: var(--ed-font-display);
}

.ed-releases li {
    position: relative;
    margin: 0;
    padding: 1.4rem 0.4rem 0;
    border-top: 1.5px solid var(--ed-ink);
    text-align: center;
}

.ed-releases li::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 11px;
    height: 11px;
    margin-left: -5.5px;
    border: 1.5px solid var(--ed-cobalt);
    border-radius: 50%;
    background: var(--ed-vellum);
}

.ed-releases li:last-child::before {
    background: var(--ed-cobalt);
}

.ed-releases strong {
    display: block;
    font-size: 1.05rem;
}

.ed-releases span {
    font-size: 0.8rem;
    color: var(--ed-graphite);
}

@media (max-width: 520px) {
    .ed-releases strong {
        font-size: 0.9rem;
    }

    .ed-releases span {
        font-size: 0.7rem;
    }
}

/* ---- Changelog ---- */

.ed-cl-head {
    margin-bottom: 2rem;
}

.ed-cl-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ed-cl-item {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.25rem 1.25rem;
    padding: 1.1rem 0;
    border-top: 1px solid var(--ed-rule-strong);
}

.ed-cl-item:last-child {
    border-bottom: 1px solid var(--ed-rule-strong);
}

.ed-cl-date {
    font-family: var(--ed-font-display);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
    color: var(--ed-graphite);
}

.ed-cl-item h2 {
    margin: 0;
    font-size: 1.2rem;
}

.ed-cl-item h2 a {
    color: var(--ed-ink);
    text-decoration: none;
}

.ed-cl-item h2 a:hover {
    text-decoration: underline;
}

.ed-cl-item p {
    margin: 0.3rem 0 0;
}

@media (max-width: 520px) {
    .ed-cl-item {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ed-cl-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    font-family: var(--ed-font-display);
    font-size: 0.8125rem;
}

.ed-cl-meta li {
    margin: 0;
}

/* The revision stamp the layout puts above a changelog entry's title (in the entry's reading column). */
.ed-cl-stamp .ed-cl-meta {
    margin: 0 0 0.9rem;
}

.ed-cl-category {
    display: inline-block;
    padding: 0.1em 0.55em;
    border: 1.5px solid var(--ed-ink);
    font-weight: 700;
}

.ed-cl-system {
    display: inline-block;
    padding: 0.1em 0.55em;
    border: 1px solid var(--ed-cobalt);
    background: var(--ed-cobalt-wash);
    text-decoration: none;
}

.ed .blog-entry-title {
    font-size: clamp(1.8rem, 4.5vw, 2.6rem);
}

.ed .blog-entry-date {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--ed-font-display);
    color: var(--ed-graphite);
}

.ed .blog-entry-body {
    margin-top: 1.5rem;
}

.ed .blog-entry-body h2 {
    margin: 2rem 0 0.6rem;
    font-size: 1.4rem;
}

.ed .blog-section-header {
    margin-bottom: 1.5rem;
}

/* ---- Footer ---- */

.ed-footer {
    border-top: 1px solid var(--ed-ink);
}

.ed-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 2rem;
    max-width: var(--ed-wide);
    margin: 0 auto;
    padding: 1.1rem var(--ed-gutter) 2rem;
    font-family: var(--ed-font-display);
    font-size: 0.85rem;
    color: var(--ed-graphite);
}

.ed-footer .blog-credits {
    margin-top: 0;
}