/* ============================================================================
   Ink: build records / feature catalogues (/ink/releases/ and /ink/releases/<slug>/)
   Ink versions of what src/css/release.css provides: masthead, stat band,
   status chips, legend, contents, pipeline strip, callout notes, feature
   catalogue, timeline, footer note, and the releases index.
   ========================================================================== */

/* ---------- Masthead ---------- */
.ink-rel-mast .ink-h1 { max-width: 14em; }
.ink-rel-thin {
    display: block;
    color: var(--red-text);
    font-weight: 400;
    font-stretch: 106%;
    letter-spacing: 0;
}
.ink-rel-colon { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ink-rel-metaline { max-width: 640px; margin-top: 18px; }

/* ---------- Stat band (auto-ruled grid, one column per stat) ---------- */
.ink-rel-stats { grid-template-columns: repeat(var(--rel-stats, 5), 1fr); }
.ink-rel-stat { padding: 26px var(--pad) 28px; }
.ink-rel-stat .ink-stat__value { display: block; }
.ink-rel-stat .ink-stat__label { display: block; }

/* ---------- Status chips: hard rectangles, never small text on red fill ---------- */
.ink-rel-chip {
    display: inline-flex;
    align-items: center;
    flex: none;
    height: 26px;
    padding: 0 10px;
    border: var(--rule) solid var(--ink);
    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--ink);
}
.ink-rel-chip.is-new {
    border-color: var(--red);
    color: var(--red-text);
}

/* ---------- Legend strip ---------- */
.ink-rel-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 40px;
    padding: 18px var(--pad);
    border-bottom: var(--rule) solid var(--ink);
    font-size: 15px;
    line-height: 22px;
    color: var(--grey-900);
}
.ink-rel-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* ---------- Section body ---------- */
.ink-rel-body { padding-bottom: 40px; }
.ink-rel-body > * + * { margin-top: 28px; }
.ink-rel-intro {
    max-width: 760px;
    font-size: 20px;
    line-height: 30px;
    color: var(--ink);
}
.ink-rel-intro--sm {
    font-size: 17px;
    line-height: 26px;
    color: var(--grey-900);
    word-spacing: 0.08em;
}
.ink-rel-intro strong { font-weight: 700; }

/* Inline code from front matter (<span class="rel-code">) */
.ink-rel .rel-code,
.ink-rel code {
    padding: 1px 6px;
    background: var(--plate);
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 0.88em;
    color: var(--ink);
    overflow-wrap: anywhere;
}

/* ---------- Pipeline strip: ruled grid of stages ---------- */
.ink-rel-pipe {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rule);
    background: var(--ink);
    border: var(--rule) solid var(--ink);
}
.ink-rel-pipe li {
    padding: 16px 18px 18px;
    background: var(--paper);
}
.ink-rel-pipe__sl {
    display: block;
    font-size: 12px;
    line-height: 18px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--red-text);
}
.ink-rel-pipe__sd {
    display: block;
    margin-top: 8px;
    font-size: 15px;
    line-height: 22px;
    color: var(--grey-900);
}

/* ---------- Callout notes ---------- */
.ink-rel-note {
    max-width: 760px;
    padding-left: 22px;
    border-left: 4px solid var(--red);
}
.ink-rel-note p:not(.ink-label) {
    margin-top: 8px;
    font-size: 17px;
    line-height: 26px;
    color: var(--grey-900);
    word-spacing: 0.08em;
}

/* ---------- Feature catalogue ---------- */
.ink-rel-group__title {
    font-size: 22px;
    line-height: 28px;
    font-weight: 700;
    font-stretch: 106%;
}
.ink-rel-group__title + * { margin-top: 10px; }
.ink-rel-feats {
    margin-top: 16px;
    border-top: var(--rule) solid var(--ink);
    border-bottom: var(--rule) solid var(--ink);
}
.ink-rel-feat { padding: 16px 0 18px; }
.ink-rel-feat + .ink-rel-feat { border-top: 1px solid var(--ink); }
.ink-rel-feat__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.ink-rel-feat h4 {
    margin: 0;
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
}
.ink-rel-feat p {
    max-width: 760px;
    margin-top: 6px;
    font-size: 16px;
    line-height: 25px;
    color: var(--grey-900);
    word-spacing: 0.06em;
}

/* ---------- Timeline: ruled rows, date in red ---------- */
.ink-rel-tl {
    border-top: var(--rule) solid var(--ink);
    border-bottom: var(--rule) solid var(--ink);
}
.ink-rel-tl li {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 16px;
    padding: 16px 0 18px;
}
.ink-rel-tl li + li { border-top: 1px solid var(--ink); }
.ink-rel-tl__date {
    font-size: 13px;
    line-height: 26px;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--red-text);
}
.ink-rel-tl__th {
    font-size: 18px;
    line-height: 26px;
    font-weight: 700;
}
.ink-rel-tl p:not(.ink-rel-tl__th) {
    max-width: 720px;
    margin-top: 4px;
    font-size: 16px;
    line-height: 25px;
    color: var(--grey-900);
    word-spacing: 0.06em;
}

/* ---------- Footer note ---------- */
.ink-rel-foot .ink-body { max-width: 760px; }
.ink-rel-foot .ink-body a {
    color: var(--red-text);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: var(--red);
}
.ink-rel-foot .ink-body a:hover { color: var(--ink); text-decoration-color: var(--ink); }
.ink-rel a.ink-rel-inline {
    color: var(--red-text);
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    text-decoration-color: var(--red);
}
.ink-rel a.ink-rel-inline:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ---------- Releases index: one row per build record ---------- */
.ink a.ink-rel-item {
    text-decoration: none;
    color: var(--ink);
}
.ink-rel-item__ver {
    font-size: 3.2vw;
    line-height: 1;
}
.ink-rel-item__date { margin-top: 14px; }
.ink-rel-item .ink-h2--sm { max-width: 16em; }
.ink-rel-item .ink-body { max-width: 720px; margin-top: 16px; }
.ink-rel-item .ink-link { margin-top: 22px; }
.ink a.ink-rel-item:hover .ink-h2--sm { color: var(--red-text); }

@media (max-width: 1100px) {
    .ink-rel-stats { grid-template-columns: repeat(3, 1fr); }
    .ink-rel-stats > :last-child:nth-child(3n + 1) { grid-column: span 3; }
    .ink-rel-stats > :last-child:nth-child(3n + 2) { grid-column: span 2; }
    .ink-rel-pipe { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
    .ink-rel-stats { grid-template-columns: repeat(2, 1fr); }
    .ink-rel-stats > :last-child:nth-child(3n + 1),
    .ink-rel-stats > :last-child:nth-child(3n + 2) { grid-column: auto; }
    .ink-rel-stats > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .ink-rel-stat { padding: 20px var(--pad) 22px; }
    .ink-rel-intro { font-size: 18px; line-height: 28px; }
    .ink-rel-pipe { grid-template-columns: 1fr; }
    .ink-rel-tl li { grid-template-columns: 1fr; gap: 2px; }
    .ink-rel-feat__head { flex-wrap: wrap; gap: 8px 16px; }
    .ink-rel-item__ver { font-size: 40px; }
}