/* ==========================================================================
   Base — reset, type, shared chrome and utilities.
   Structure comes from 1px hairlines in var(--line). Nothing is rounded and
   nothing on the page carries a shadow; only fixed overlays do.
   ========================================================================== */

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

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

body {
    margin: 0;
    background: var(--pg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
    max-width: 100%;
}

img {
    border-radius: 0;
}

::selection {
    background: var(--acc-tint);
}

a {
    color: var(--acc);
    text-decoration: none;
    transition: color .18s ease;
}

a:hover {
    color: var(--acc-solid);
}

[data-theme="light"] a:hover {
    color: var(--ink);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 600;
    margin: 0;
    text-wrap: pretty;
}

p {
    text-wrap: pretty;
}

hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 34px 0;
}

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

button {
    font-family: inherit;
    border-radius: 0;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 900;
    background: var(--pg2);
    border: 1px solid var(--acc);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    padding: 12px 18px;
}

.skip-link:focus {
    left: 12px;
    top: 12px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@keyframes blink {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

@keyframes slidein {
    from { transform: translateY(14px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.wrap--wide {
    max-width: var(--max-wide);
}

.wrap--tight {
    max-width: 1080px;
    padding-left: var(--gutter-tight);
    padding-right: var(--gutter-tight);
}

/* Sections are separated by a rule with the label sitting under it. */
.section {
    padding-bottom: 80px;
}

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid var(--line);
    padding-top: 20px;
    margin-bottom: 34px;
}

.section-label {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .20em;
    text-transform: uppercase;
    color: var(--dim);
    margin: 0;
}

.section-link {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .10em;
    white-space: nowrap;
}

/* ==========================================================================
   Registration marks — the blueprint frame.
   Drawn as eight hairlines in one pseudo-element so a framed object can never
   ship with its marks missing, and ::after stays free for the component.
   ========================================================================== */

.bp {
    position: relative;
    border: 1px solid var(--line);
}

.bp::before {
    content: "";
    position: absolute;
    inset: -6px;
    pointer-events: none;
    opacity: .7;
    background-image:
        linear-gradient(var(--acc), var(--acc)), linear-gradient(var(--acc), var(--acc)),
        linear-gradient(var(--acc), var(--acc)), linear-gradient(var(--acc), var(--acc)),
        linear-gradient(var(--acc), var(--acc)), linear-gradient(var(--acc), var(--acc)),
        linear-gradient(var(--acc), var(--acc)), linear-gradient(var(--acc), var(--acc));
    background-repeat: no-repeat;
    background-size: 11px 1px, 1px 11px, 11px 1px, 1px 11px,
                     11px 1px, 1px 11px, 11px 1px, 1px 11px;
    background-position:
        0 5px, 5px 0,                                   /* top-left */
        100% 5px, calc(100% - 5px) 0,                   /* top-right */
        0 calc(100% - 5px), 5px 100%,                   /* bottom-left */
        100% calc(100% - 5px), calc(100% - 5px) 100%;   /* bottom-right */
}

/* ==========================================================================
   Duotone imagery — every card and hero image is washed into the accent so
   the art reads as one palette. Hover lifts the wash to full colour.
   ========================================================================== */

.duotone {
    background: var(--duo);
    overflow: hidden;
    display: block;
}

.duotone > img {
    display: block;
    width: 100%;
    /* height:auto keeps images with width/height attributes at their intrinsic
       ratio — without it the attribute height wins and stretches the image. */
    height: auto;
    filter: grayscale(1) contrast(1.05);
    mix-blend-mode: luminosity;
    opacity: var(--duo-opacity);
    transition: filter .4s ease, opacity .4s ease;
}

.duotone--4x3 > img { aspect-ratio: 4 / 3; object-fit: cover; }

/* A photograph of a person renders at its own ratio and in full colour — the
   duotone wash is for the illustrated blog art, not for faces. */
.photo {
    display: block;
    overflow: hidden;
    background: var(--pg2);
}

.photo > img {
    display: block;
    width: 100%;
    height: auto;
}
.duotone--16x9 > img { aspect-ratio: 16 / 9; object-fit: cover; }

/* Wide banner crop through the center of a square Field Manual brand plate —
   the homepage work cards. The 32% vertical bias keeps the crest emblem in frame. */
.duotone--strip > img { aspect-ratio: 16 / 7; object-fit: cover; object-position: center 32%; }

@media (hover: hover) {
    .duotone:hover > img,
    a:hover .duotone > img,
    a:focus-visible .duotone > img {
        filter: grayscale(0) contrast(1);
        mix-blend-mode: normal;
        opacity: 1;
    }
}

/* ==========================================================================
   Mono chrome — kickers, meta lines, tags, table columns, captions
   ========================================================================== */

.kicker {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .20em;
    text-transform: uppercase;
    color: var(--acc);
}

.meta {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--acc);
}

.meta--dim {
    color: var(--dim);
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.tag {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .06em;
    padding: 5px 9px;
    border: 1px solid var(--line);
    color: var(--dim);
}

a.tag:hover {
    color: var(--acc);
    border-color: var(--acc);
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 26px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--ink);
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}

.btn:hover {
    border-color: var(--acc);
    color: var(--acc);
}

/* The one filled object on the page. */
.btn--primary {
    background: var(--acc-solid);
    border-color: var(--acc-solid);
    color: #fff;
}

.btn--primary:hover {
    background: var(--acc-deep);
    border-color: var(--acc-deep);
    color: #fff;
}

[data-theme="light"] .btn--primary:hover {
    background: var(--ink);
    border-color: var(--ink);
}

.btn--mono {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: none;
    padding: 11px 14px;
    color: var(--dim);
}

button.kbd {
    cursor: pointer;
    background: transparent;
    min-height: 0;
}

.kbd {
    display: inline-block;
    border: 1px solid var(--line);
    padding: 1px 5px;
    color: var(--acc);
    font-family: var(--font-mono);
    font-size: 10px;
}

/* ==========================================================================
   Forms
   ========================================================================== */

label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--dim);
    margin-bottom: 8px;
}

input[type="text"],
input[type="email"],
input[type="search"],
input[type="url"],
textarea,
select {
    width: 100%;
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 0;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    padding: 12px 14px;
    -webkit-appearance: none;
    appearance: none;
}

/* The platform clear button is a rounded glyph the system has no place for. */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

input::placeholder,
textarea::placeholder {
    color: var(--dim);
    opacity: .8;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--acc);
    outline: none;
}

textarea {
    min-height: 180px;
    resize: vertical;
    line-height: 1.6;
}

/* A bordered field with a glyph in front of it — the rail search, the console. */
.field {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--line);
    padding: 0 12px;
    min-height: 46px;
}

.field:focus-within {
    border-color: var(--acc);
}

.field__glyph {
    display: inline-flex;
    align-items: center;
    color: var(--acc);
    flex: none;
}

.field__glyph svg {
    width: 14px;
    height: 14px;
}

.field input {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    font-size: 15px;
}

.field input:focus {
    outline: none;
}

/* ==========================================================================
   Site nav
   ========================================================================== */

.site-nav {
    position: sticky;
    top: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 18px var(--gutter);
    background: var(--pg);
    border-bottom: 1px solid var(--line);
}

.site-nav__brand {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--ink);
    text-transform: uppercase;
    white-space: nowrap;
    flex: none;
}

.site-nav__qualifier {
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .14em;
    color: var(--dim);
    padding-top: 3px;
    white-space: nowrap;
}

.site-nav__links {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 26px;
    margin: 0 0 0 auto;
    padding: 0;
    font-family: var(--font-heading);
    font-size: 14px;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.site-nav__links a {
    color: var(--dim);
    display: inline-flex;
    align-items: center;
}

.site-nav__links a:hover {
    color: var(--ink);
}

.site-nav__links a.is-active {
    color: var(--acc);
}

.site-nav__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--dim);
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease;
}

.icon-btn:hover {
    color: var(--acc);
    border-color: var(--acc);
}

.icon-btn svg {
    width: 17px;
    height: 17px;
}

.site-nav__toggle {
    display: none;
}

/* Reading-page path strip — the terminal register's breadcrumb, under the shared nav. */
.page-path {
    display: flex;
    align-items: baseline;
    gap: 2px;
    padding: 8px var(--gutter);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--dim);
    background: var(--pg);
    border-bottom: 1px solid var(--line);
    overflow: hidden;
}

.page-path__host {
    color: var(--acc);
    flex: none;
}

.page-path__path {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Mobile drawer */
.nav-drawer {
    display: none;
}

@media (max-width: 1099px) {
    .site-nav__qualifier {
        display: none;
    }
}

@media (max-width: 991px) {
    .site-nav {
        gap: 12px;
        flex-wrap: nowrap;
    }

    .site-nav__qualifier {
        display: none;
    }

    .site-nav__links {
        display: none;
    }

    .site-nav__brand {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .site-nav__toggle {
        display: inline-flex;
        font-family: var(--font-mono);
        font-size: 11px;
        letter-spacing: .14em;
        width: auto;
        padding: 0 14px;
        flex: none;
    }

    .site-nav__actions {
        margin-left: auto;
        flex: none;
    }

    .nav-drawer {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 80;
        background: var(--pg);
        padding: 24px var(--gutter-tight);
        transform: translateY(-100%);
        transition: transform .22s ease;
        overflow-y: auto;
    }

    .nav-drawer.is-open {
        transform: translateY(0);
    }

    .nav-drawer__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid var(--line);
        padding-bottom: 18px;
        margin-bottom: 8px;
    }

    .nav-drawer ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .site-nav .btn--mono {
        display: none;
    }

    .nav-drawer a,
    .nav-drawer button {
        display: block;
        width: 100%;
        text-align: left;
        background: transparent;
        border: 0;
        font-family: var(--font-heading);
        font-size: 26px;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--ink);
        padding: 18px 0;
        border-bottom: 1px solid var(--line);
        cursor: pointer;
    }
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
    border-top: 1px solid var(--line);
    padding: 26px var(--gutter) 60px;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .10em;
    color: var(--dim);
}

.site-footer__row {
    max-width: var(--max);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.site-footer__identity {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.site-footer__venture a {
    color: var(--ink);
}

.site-footer__venture a:hover {
    color: var(--acc);
}

.site-footer__links {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}

.site-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dim);
    text-transform: uppercase;
    letter-spacing: .10em;
}

.site-footer__links a:hover {
    color: var(--acc);
}

.site-footer__links svg {
    width: 14px;
    height: 14px;
}

.site-footer__agent-glyph {
    color: var(--acc);
    font-size: 11px;
    letter-spacing: -.12em;
}

/* Console status pill — driven by the /api/console/status ping. The dot is shared by the footer
   and the ⌘K console modal; the wrappers differ only in layout. */
.console-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dim);
    flex: none;
}

.console-status-dot.is-warming {
    background: #e0a24a;
    animation: pulse 1.1s ease-in-out infinite;
}

.console-status-dot.is-ready {
    background: #58b368;
}

.console-status-dot.is-offline {
    background: #d0605e;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.site-footer__status {
    max-width: var(--max);
    margin: 14px auto 0;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
}

.type-switch {
    max-width: var(--max);
    margin: 26px auto 0;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.type-switch__label {
    letter-spacing: .18em;
    text-transform: uppercase;
}

.type-switch button {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .10em;
    text-transform: uppercase;
    padding: 8px 12px;
    cursor: pointer;
}

.type-switch button[aria-pressed="true"] {
    color: var(--acc);
    border-color: var(--acc);
}

/* ==========================================================================
   The console — command palette, inline rail answer, pinned post ask bar
   ========================================================================== */

.console-overlay {
    position: fixed;
    inset: 0;
    z-index: 500;
    background: rgba(6, 11, 15, .66);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh 16px 16px;
}

.console-overlay[hidden] {
    display: none;
}

/* Maximized pane — the panel fills the browser window like a zoomed terminal
   split. margin-top:auto drops the prompt row to the bottom edge even before
   a transcript exists to absorb the space above it. */
.console-overlay.is-max {
    padding: 0;
}

.console-overlay.is-max .console-panel {
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    animation: none;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.console-overlay.is-max .console-panel__prompt {
    margin-top: auto;
}

/* A flex column so the transcript can scroll on its own while the prompt row
   stays pinned beneath it, terminal-style. overflow:hidden keeps children from
   spilling past the border on short viewports — the scrollable regions are the
   transcript and the suggest hits, each with min-height:0 so flex lets them
   actually shrink. */
.console-panel {
    width: min(700px, 92vw);
    max-height: 76vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--pg2);
    border: 1px solid var(--acc);
    box-shadow: var(--shadow-panel);
    animation: slidein .18s ease-out;
}

/* The scrollback: the conversation so far, newest at the bottom. */
.console-transcript {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 20px 6px;
}

.console-transcript[hidden] {
    display: none;
}

/* ksh's empty state; hides once the first exchange lands in the transcript. */
.console-banner {
    margin: 0;
    padding: 14px 20px 0;
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .06em;
    color: var(--dim);
}

.console-line--q {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--acc);
    margin: 16px 0 0;
    overflow-wrap: break-word;
}

.console-line--q:first-child {
    margin-top: 0;
}

.console-line--a {
    position: relative;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--dim);
    margin: 6px 0 0;
    padding-left: 36px;
    min-height: 34px;
}

/* The King portrait (static/assets/img/king-logo-bw.svg) as a mask, so it fills
   with whatever colour the context gives it and follows the theme. */
.console-face,
.console-line--a::before {
    -webkit-mask: url("/assets/img/king-logo-bw.svg") center / contain no-repeat;
    mask: url("/assets/img/king-logo-bw.svg") center / contain no-repeat;
}

/* Empty state: banner and answer slot in the left column, the portrait on the
   right spanning both rows. It goes when console.js reveals the transcript
   (which it does as it hides the banner). */
.console-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
}

.console-intro > .console-banner,
.console-intro > .console-answer {
    grid-column: 1;
}

.console-face--banner {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    width: 46px;
    height: 66px;
    margin: 14px 20px 8px 4px;
    background: var(--ink);
}

.console-transcript:not([hidden]) ~ .console-intro .console-face--banner {
    display: none;
}

/* Each ksh reply carries a small portrait in the accent, marking whose voice
   is answering. */
.console-line--a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 24px;
    height: 34px;
    background: var(--acc);
}

/* Indented so the hit text (after the link's own 10px) lines up with the
   answer text beside its 36px portrait gutter. Scoped to the transcript so it
   outranks the generic .console-hits padding declared further down. */
.console-transcript .console-hits--transcript {
    padding: 4px 0 0 26px;
}

.console-panel__prompt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--line);
}

.console-panel__prompt span:first-child {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--acc);
}

.console-panel__prompt input {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 15px;
    padding: 2px 0;
}

.console-panel__prompt input:focus {
    outline: none;
}

.console-answer {
    padding: 14px 20px 8px;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--dim);
    margin: 0;
}

/* Working state on any answer surface while a deliberate ask is in flight —
   the single rail slot and the transcript lines in the palette and ask bar. */
[data-console-answer].is-working,
.console-transcript .is-working,
.ask-bar__log .is-working {
    color: var(--acc);
    animation: pulse 1.2s ease-in-out infinite;
}

/* The rail's in-flight ask disables its input; the transcript surfaces keep the
   prompt live for typing and block re-submits in console.js instead. */
.console-panel__prompt input:disabled,
.ask-bar input:disabled,
.rail__search input:disabled {
    opacity: .5;
    cursor: progress;
}

.console-hits {
    padding: 6px 12px 14px;
}

/* The suggest results are a direct child of the flex panel; on a short
   viewport they scroll rather than push the prompt row out of the panel. */
.console-panel > .console-hits {
    min-height: 0;
    overflow-y: auto;
}

.console-hit {
    display: grid;
    grid-template-columns: 92px 1fr 58px;
    gap: 14px;
    align-items: center;
    padding: 12px 10px;
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    border-bottom: 1px solid var(--line);
}

.console-hit:hover {
    background: var(--acc-tint);
    color: var(--ink);
}

.console-hit__date { color: var(--acc); }
.console-hit__title { font-family: var(--font-body); font-size: 15px; }
.console-hit__read { color: var(--dim); text-align: right; }

.console-chips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--line);
}

.console-panel__status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px 14px;
    border-top: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .10em;
    text-transform: uppercase;
    color: var(--dim);
}

.chip {
    border: 1px solid var(--line);
    background: transparent;
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    padding: 7px 11px;
    cursor: pointer;
    text-align: left;
}

.chip:hover {
    color: var(--acc);
    border-color: var(--acc);
}

/* The blinking block sits right after the > with the suggestion to its right.
   While the prompt is empty it stands in for the native caret; typing hides it
   and hands back to the browser's own. */
.console-caret {
    width: 7px;
    height: 16px;
    background: var(--acc);
    animation: blink 1.1s step-end infinite;
    flex: none;
}

.console-panel__prompt input:placeholder-shown,
.ask-bar input:placeholder-shown {
    caret-color: transparent;
}

.console-panel__prompt:has(input:not(:placeholder-shown)) .console-caret,
.ask-bar form:has(input:not(:placeholder-shown)) .console-caret {
    display: none;
}

/* ==========================================================================
   Prose — rendered Markdown
   ========================================================================== */

.prose {
    font-size: 18px;
    line-height: 1.75;
    color: var(--ink);
    overflow-wrap: break-word;
}

/* A 37-character column rags heavily. Hyphenation closes most of that gap;
   justification would close all of it but opens rivers at this measure. */
@media (max-width: 767px) {
    .prose,
    .post__lede {
        hyphens: auto;
        -webkit-hyphens: auto;
    }
}

/* A long URL or identifier wraps rather than widening the column. */
.prose a,
.prose code,
.prose li,
.prose p {
    overflow-wrap: break-word;
}

.prose > p {
    margin: 0 0 20px;
}

.prose h2 {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--acc);
    margin: 44px 0 16px;
    padding-bottom: 9px;
    border-bottom: 1px solid var(--line);
    scroll-margin-top: calc(var(--nav-h, 56px) + var(--askbar-h, 0px) + 24px);
}

.prose h3 {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    margin: 32px 0 12px;
    scroll-margin-top: calc(var(--nav-h, 56px) + var(--askbar-h, 0px) + 24px);
}

.prose h4 {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dim);
    margin: 26px 0 10px;
}

.prose ul,
.prose ol {
    margin: 0 0 22px;
    padding-left: 22px;
}

.prose li {
    margin-bottom: 9px;
}

.prose li::marker {
    color: var(--acc);
}

.prose strong,
.prose b {
    font-weight: 600;
    color: var(--ink);
}

.prose blockquote {
    margin: 30px 0;
    padding: 16px 20px;
    border-left: 2px solid var(--acc);
    background: var(--acc-tint);
    font-size: 15px;
    line-height: 1.7;
    color: var(--ink);
}

.prose blockquote p:last-child {
    margin-bottom: 0;
}

.prose a {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--line);
}

.prose a:hover {
    text-decoration-color: var(--acc);
}

/* Code — first-class, with a mono title bar */
.prose pre {
    margin: 26px 0;
    border: 1px solid var(--line);
    background: var(--pg2);
    padding: 16px 14px;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 13px;
    line-height: 1.85;
    color: var(--ink);
}

.prose pre code {
    font-family: inherit;
    font-size: inherit;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
}

.code-block {
    margin: 26px 0;
    border: 1px solid var(--line);
    background: var(--pg2);
}

.code-block__bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 13px;
    border-bottom: 1px solid var(--line);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dim);
}

.code-block__lang {
    color: var(--acc);
}

.code-block__copy {
    margin-left: auto;
    border: 0;
    background: transparent;
    color: var(--dim);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    cursor: pointer;
    padding: 4px 2px;
    min-height: 32px;
}

.code-block__copy:hover {
    color: var(--acc);
}

.code-block pre {
    margin: 0;
    border: 0;
    max-width: 100%;
}

.prose code {
    font-family: var(--font-mono);
    font-size: .88em;
    background: var(--acc-tint);
    border: 1px solid var(--line);
    padding: 1px 5px;
    color: var(--acc);
}

/* Figures, images and diagrams */
.prose img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line);
    padding: 12px;
    background: var(--pg2);
    margin: 30px 0;
    cursor: zoom-in;
}

.prose figure {
    margin: 30px 0;
}

.prose figure img {
    margin: 0;
}

.prose figcaption,
.figure-caption {
    font-family: var(--font-mono);
    font-size: 10.5px;
    line-height: 1.7;
    color: var(--dim);
    margin-top: 10px;
}

.prose .mermaid {
    border: 1px solid var(--line);
    background: var(--pg2);
    padding: 20px 12px;
    margin: 30px 0;
    text-align: center;
    overflow-x: auto;
}

.prose .mermaid svg {
    max-width: 100%;
    height: auto;
}

/* Tables */
.prose table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--line);
    margin: 30px 0;
    font-size: 15px;
    display: block;
    overflow-x: auto;
}

.prose th {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--dim);
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.prose td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.prose tr:last-child td {
    border-bottom: 0;
}

.prose .poetry {
    font-style: italic;
    color: var(--dim);
    text-align: center;
    margin: 30px 0;
}

/* Gist embeds inherit the ground rather than GitHub's white. */
.prose .gist,
.prose .gist .gist-file,
.prose .gist .highlight,
.prose .gist .gist-data,
.prose .gist .gist-meta {
    background: var(--pg2) !important;
    border-color: var(--line) !important;
    color: var(--ink) !important;
    border-radius: 0 !important;
}

/* ==========================================================================
   Reading progress, toast, lightbox
   ========================================================================== */

.reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: transparent;
    z-index: 200;
}

.reading-progress__bar {
    width: 0;
    height: 100%;
    background: var(--acc);
}

.toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translate(-50%, 20px);
    z-index: 600;
    background: var(--pg2);
    border: 1px solid var(--acc);
    color: var(--ink);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .06em;
    padding: 13px 20px;
    box-shadow: var(--shadow-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

.toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 700;
    background: rgba(6, 11, 15, .92);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px;
    cursor: zoom-out;
}

.lightbox.is-open {
    display: flex;
}

.lightbox img {
    max-width: 100%;
    max-height: 84vh;
    border: 1px solid var(--line);
    background: var(--pg2);
    padding: 12px;
}

.lightbox__caption {
    position: absolute;
    bottom: 22px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .1em;
    color: var(--dim);
}

/* ==========================================================================
   Responsive baseline
   ========================================================================== */

@media (max-width: 991px) {
    :root {
        --gutter: 28px;
    }
}

@media (max-width: 575px) {
    :root {
        --gutter: 20px;
        --gutter-tight: 20px;
    }

    body {
        font-size: 17px;
    }

    .site-footer__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}

/* Touch and small screens: every target clears 44px. Fine pointers keep the
   designed density, which is what the comps show. */
@media (max-width: 991px), (pointer: coarse) {
    .site-nav__links a,
    .chip,
    .tag,
    .rail__row,
    .rail__answer-hits a,
    .pager > *,
    .next-writing a,
    .ask-bar__hits a,
    .console-hit,
    .post__series-part,
    .post__toc a,
    .site-footer__links a,
    .type-switch button,
    .code-block__copy,
    .icon-btn,
    .share-strip button {
        min-height: 44px;
    }

    .icon-btn,
    .share-strip button {
        width: 44px;
        height: 44px;
    }

    .tag,
    .chip {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}