/* Instrument Panel overlay for wedgworth.dev.
   Navy and field green, telemetry grid, readout-style cards, crop rows that turn into circuit traces.
   Loaded after base.css. Tokens first, then components in page order. */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
    color-scheme: light;
    --bg: #eef2f5;
    --fg: #0e2a47;
    --muted: #566a80;
    --line: #cfd9e3;
    --surface: #ffffff;
    --accent: #3d7a1e;          /* text-safe green: 4.6:1 on --bg, 5.2:1 on white */
    --accent-fg: #ffffff;
    --accent2: #c98a00;
    --code-bg: #0e2a47;
    --code-fg: #e2ebf3;
    --code-ln: #5f7d9b;
    --tk-keyword: #8fcf5c;
    --tk-string: #f2c14e;
    --tk-comment: #8a9fb5;
    --tk-function: #8ac4ff;
    --tk-number: #c9adff;
    --tk-operator: #b6c6d6;
    --tk-tag: #8ac4ff;
    --tk-attr: #f28c6b;
    --font-head: var(--gh-font-heading, "Barlow Condensed", "Arial Narrow", sans-serif);
    --font-body: var(--gh-font-body, "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif);
    --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
    --radius: 3px;
    --content-width: 43rem;
    --wide-width: 1040px;
    --page-width: 1140px;

    --gutter: 20px;
    --toc-width: 220px;
    --toc-gap: 56px;
    --scroll-offset: 24px;
    --ok: #2f8a3a;
    --bad: #c23b32;

    /* Instrument extras */
    --navy: #0e2a47;            /* header, subscribe band */
    --navy-2: #163a5f;          /* hero and page bands */
    --on-navy: #e9f0f6;
    --on-navy-muted: rgb(233 240 246 / 74%);
    --navy-line: rgb(233 240 246 / 20%);
    --grid-navy: rgb(255 255 255 / 5%);
    --signal: #4f8a25;          /* decorative green: brackets, traces, nodes */
    --signal-hi: #7cc04a;       /* green on navy */
    --media-bg: #163a5f;
    --flag-fg: #0e2a47;
}

[data-mode="dark"] {
    color-scheme: dark;
    --bg: #0a1a2c;
    --fg: #e2ebf3;
    --muted: #8ea3b8;
    --line: #1f3a57;
    --surface: #0f243b;
    --accent: #7cc04a;
    --accent-fg: #06121f;
    --accent2: #f2b62a;
    --code-bg: #06121f;
    --code-fg: #e2ebf3;
    --code-ln: #4a6683;
    --tk-comment: #7f95ab;
    --ok: #7cc04a;
    --bad: #ff8f80;
    /* Filled buttons (theme and Koenig) carry white text (Ghost writes it inline on Koenig cards):
       keep the deeper light-mode green, so every filled button matches in both modes. */
    --accent-solid: #3d7a1e;

    --navy: #06121f;
    --navy-2: #0f243b;
    --grid-navy: rgb(140 190 240 / 6%);
    --navy-line: rgb(233 240 246 / 16%);
    --signal: #7cc04a;
    --media-bg: #0b1d31;
}

/* ==========================================================================
   2. Base overrides
   ========================================================================== */

body { font-size: 1.0625rem; }

h1, h2, h3, h4, h5, h6 { font-weight: 600; }

.button {
    border-radius: 4px;
    font-family: var(--font-body);
    font-weight: 600;
}
/* Same green and white text as Koenig's buttons in both modes (5.2:1). */
.button:not(.button-ghost) { background: var(--accent-solid); color: var(--accent-solid-fg); }
.button .icon { width: 18px; height: 18px; }

/* Green focus ring reads on navy too. */
:focus-visible { outline-color: var(--accent); }
.site-head :focus-visible,
.band-grid :focus-visible,
.subscribe :focus-visible { outline-color: var(--signal-hi); }

/* Shared navy band with the telemetry grid (hero, post, archive, error). */
.band-grid {
    background-color: var(--navy-2);
    background-image:
        linear-gradient(var(--grid-navy) 1px, transparent 1px),
        linear-gradient(90deg, var(--grid-navy) 1px, transparent 1px);
    background-position: center top;
    background-size: 32px 32px;
    color: var(--on-navy);
}

/* Breadcrumb (mono, on navy) */
.crumb {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5em;
    margin: 0;
    color: var(--on-navy-muted);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
}
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: var(--on-navy); text-decoration: underline; }
.crumb-sep { opacity: 0.7; }

/* Gauges row: dl of real data on a navy band. */
.gauges {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    margin: 0;
    border-top: 1px solid var(--navy-line);
}
.gauge { min-width: 0; padding: 14px 16px 16px 0; }
.gauge + .gauge { padding-left: 16px; border-left: 1px solid var(--navy-line); }
.gauge dt {
    color: var(--on-navy-muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.4;
}
.gauge dd {
    margin: 4px 0 0;
    color: var(--on-navy);
    font-family: var(--font-head);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.gauge dd a { color: inherit; text-decoration: none; }
.gauge dd a:hover { color: var(--signal-hi); text-decoration: underline; text-decoration-thickness: 1px; }

/* Reading-time meter: one tick per minute, up to ten. */
.meter { display: flex; gap: 3px; margin-top: 7px; }
.meter i { width: 6px; height: 8px; background: rgb(233 240 246 / 16%); }
.meter i.on { background: var(--signal-hi); }

@media (max-width: 619px) {
    .gauges { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .gauge:nth-child(odd) { padding-left: 0; border-left: 0; }
    .gauge:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--navy-line); }
    .gauge:nth-child(n+3) { border-top: 1px solid var(--navy-line); }
    .gauge:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .gauge dd { font-size: 1.125rem; }
}

/* ==========================================================================
   3. Header
   ========================================================================== */

.site-head {
    position: relative;
    z-index: 30;
    background: var(--navy);
    color: var(--on-navy);
}
.head-bar {
    display: flex;
    align-items: center;
    gap: 12px 24px;
    min-height: 66px;
    padding-block: 12px;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin-right: auto;
    color: inherit;
    font-family: var(--font-head);
    font-size: 1.3rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    text-decoration: none;
}
.brand-mark {
    display: grid;
    flex: none;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 2px solid currentColor;
    border-radius: 50%;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1;
}
.brand-logo { flex: none; width: auto; height: 36px; max-width: 160px; object-fit: contain; }
.brand-logo.is-white { filter: brightness(0) invert(1); opacity: 0.95; }
/* Never clipped or cut off: when the bar runs out of room (about 360px and below) the name wraps onto
   two lines, like a stacked wordmark. Line height leaves room for the descenders. */
.brand-name { line-height: 1.1; text-wrap: balance; }

.site-nav { display: flex; align-items: center; gap: 22px; }
.site-nav .nav { gap: 4px 22px; font-size: 0.9375rem; }
.site-nav .nav-link {
    display: inline-block;
    padding-block: 6px;
    color: var(--on-navy-muted);
    transition: color 0.15s ease;
}
.site-nav .nav-link:hover { color: var(--on-navy); }
.site-nav .nav-current > .nav-link {
    color: var(--on-navy);
    text-decoration: none;
    box-shadow: inset 0 -2px 0 var(--signal-hi);
}

.head-tools { display: flex; flex: none; align-items: center; gap: 2px; }
.site-head .mode-toggle,
.site-head .search-toggle,
.site-head .nav-toggle { color: var(--on-navy); }
.site-head .mode-toggle:hover,
.site-head .search-toggle:hover,
.site-head .nav-toggle:hover { background: rgb(255 255 255 / 10%); }

.member-cta { min-height: 38px; padding: 8px 14px; font-size: 0.9375rem; }
.head-cta { margin-left: 10px; }

@media (min-width: 760px) {
    .nav-toggle, .nav-cta { display: none; }
}
/* The menu button precedes the nav in the DOM (Tab goes from it into the open menu); draw it last. */
.nav-toggle { order: 1; margin-left: -6px; }

@media (max-width: 759px) {
    .head-bar { gap: 8px; min-height: 60px; }
    .brand { font-size: 1.2rem; }
    .brand-mark { width: 32px; height: 32px; font-size: 1rem; }
    .brand-logo { height: 32px; }
    .head-cta { display: none; }
    .site-nav {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        padding: 4px var(--gutter) 20px;
        border-top: 1px solid var(--navy-line);
        background: var(--navy);
        box-shadow: 0 16px 24px rgb(6 18 31 / 30%);
    }
    .nav-open .site-nav { display: flex; }
    .site-nav .nav { flex-direction: column; flex-wrap: nowrap; gap: 0; font-size: 1.0625rem; }
    .site-nav .nav-link { display: block; padding: 13px 0; border-bottom: 1px solid var(--navy-line); }
    .site-nav .nav-current > .nav-link { box-shadow: inset 3px 0 0 var(--signal-hi); padding-left: 12px; }
    .nav-cta { width: 100%; margin-top: 16px; }
}

/* Reading progress on posts: thin green line pinned to the top of the viewport. */
.post-template::before {
    content: "";
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 100;
    height: 3px;
    background: var(--signal-hi);
    transform: scaleX(var(--read-progress, 0));
    transform-origin: 0 50%;
    pointer-events: none;
}

/* ==========================================================================
   4. Schematic art (hero, cards, error pages)
   ========================================================================== */

.scm { display: block; width: 100%; height: auto; overflow: hidden; }
.scm-rows line {
    stroke: rgb(233 240 246 / 28%);
    stroke-width: 2;
    stroke-dasharray: 2 9;
    stroke-linecap: round;
}
.scm-tr { fill: none; stroke: var(--signal); stroke-width: 2; }
.scm-node { fill: var(--signal); }
.scm-box { fill: rgb(6 18 31 / 86%); stroke: rgb(233 240 246 / 30%); }
.scm-l { fill: rgb(233 240 246 / 70%); font-family: var(--font-mono); font-size: 11px; }
.scm-v { fill: #ffffff; font-family: var(--font-mono); font-size: 15px; font-weight: 500; }
.scm-pulse {
    fill: none;
    stroke: var(--signal);
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
    animation: scm-pulse 2.4s ease-out infinite;
}
@keyframes scm-pulse {
    from { opacity: 0.9; transform: scale(1); }
    to { opacity: 0; transform: scale(3.2); }
}
@media (prefers-reduced-motion: reduce) {
    .scm-pulse { display: none; }
}

/* Fault variant (404 / errors) */
.scm-tr-broken { stroke: var(--accent2); stroke-dasharray: 6 6; }
.scm-node-open { fill: var(--navy-2); stroke: var(--accent2); stroke-width: 2; }
.scm-pulse-warn { stroke: var(--accent2); }
.scm-tr-dim { stroke: rgb(233 240 246 / 22%); }
.scm-node-dim { fill: rgb(233 240 246 / 30%); }

/* ==========================================================================
   5. Home: hero, feed head, chips
   ========================================================================== */

.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding-block: 56px;
}
/* The default title sets as two lines, one per sentence. Its size tracks the column (cqi) so
   "Growing with technology." fits on one line: that line is about 9x the font size wide. */
.hero-copy { container-type: inline-size; }
.hero-line { display: block; }
.hero-title {
    margin: 0;
    font-size: clamp(2.6rem, 6.2vw, 4.6rem);
    font-size: clamp(1.9rem, 10.6cqi, 4.6rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.01em;
}
.hero-text {
    max-width: 44ch;
    margin-top: 18px;
    color: var(--on-navy-muted);
    font-size: 1.15rem;
    line-height: 1.55;
}
.hero-panel { margin: 0; }
.scm-hero { max-width: 560px; margin-left: auto; }
/* Phones get the readouts as a gauges row (below); the panel's text would scale under 9px there. */
.hero-gauges { display: none; }

/* Stacked below 960px: side by side, the panel would shrink and its 11px readouts with it. */
@media (max-width: 959px) {
    .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 40px 28px; }
    .scm-hero { max-width: 480px; margin: 0 auto; }
}
@media (max-width: 619px) {
    .hero-inner { padding-block: 32px 28px; }
    .hero-title { line-height: 0.98; }
    .hero-text { margin-top: 14px; font-size: 1.0625rem; line-height: 1.5; }
    .hero-panel { display: none; }
    .hero-gauges { display: grid; grid-auto-flow: column; grid-template-columns: none; margin-top: 22px; }
    .hero-gauges .gauge { padding: 12px 10px 2px 0; border-top: 0; }
    .hero-gauges .gauge + .gauge { padding-left: 12px; border-left: 1px solid var(--navy-line); }
    .hero-gauges .gauge:last-child { grid-column: auto; }
}

.feed { padding-bottom: 8px; }
.feed-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px 20px;
    padding-block: 40px 18px;
}
.feed-title { font-size: 1.875rem; font-weight: 600; line-height: 1; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
/* Phones: one row that scrolls sideways (edges fade), instead of a block of wrapped chips. */
@media (max-width: 619px) {
    .chips {
        flex: 1 1 100%;
        flex-wrap: nowrap;
        margin-inline: calc(-1 * var(--gutter));
        padding: 4px var(--gutter);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-padding-inline: var(--gutter);
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 40px), transparent);
        mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 40px), transparent);
    }
    .chips::-webkit-scrollbar { display: none; }
    .chip { flex: none; scroll-snap-align: start; }
}
.chip {
    min-height: 32px;
    padding: 5px 10px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: transparent;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.3;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.chip:hover { border-color: var(--muted); color: var(--fg); }
.chip[aria-pressed="true"] { border-color: var(--fg); background: var(--fg); color: var(--bg); }

.feed-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
    padding: 18px;
    border: 1px dashed var(--line);
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

/* ==========================================================================
   6. Cards (bezel corners, readout meta, photos with a light navy wash)
   ========================================================================== */

.post-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 899px) { .post-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 619px) { .post-feed { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid var(--line);
    background: var(--surface);
    transition: border-color 0.15s ease;
}
/* Corner bracket "bezel" */
.card::before,
.card::after {
    content: "";
    position: absolute;
    z-index: 3;
    width: 12px;
    height: 12px;
    border: 2px solid var(--signal);
    pointer-events: none;
    transition: width 0.2s ease, height 0.2s ease;
}
.card::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.card::after { right: -1px; bottom: -1px; border-top: 0; border-left: 0; }
.card:hover { border-color: color-mix(in srgb, var(--muted) 70%, var(--line)); }
.card:hover::before,
.card:hover::after { width: 20px; height: 20px; }
.card:has(.card-link:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.card .card-link:focus-visible { outline: none; }

.card-media {
    position: relative;
    flex: none;
    aspect-ratio: 16 / 8;
    overflow: hidden;
    background: var(--media-bg);
    isolation: isolate;
}
.card-media .scm { position: absolute; inset: 0; width: 100%; height: 100%; }
.crop-top .card-img { object-position: 50% 0; }
.crop-center .card-img { object-position: 50% 50%; }
.crop-bottom .card-img { object-position: 50% 100%; }

/* Photos keep their color (field photos are evidence: plot greenness, deficiency symptoms), with a
   light navy wash and a little less saturation so mixed photos and screenshots sit in one palette.
   Hover takes the wash off. */
.card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Upper third: faces and subjects sit there in most photos. Per post: #crop-top/-center/-bottom. */
    object-position: 50% 30%;
    filter: saturate(0.85) contrast(1.02);
    transition: filter 0.35s ease;
}
.has-image .card-media::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: var(--navy);
    opacity: 0.14;
    mix-blend-mode: multiply;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
/* Grid overlay on every card image, photo or schematic */
.card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background-image:
        linear-gradient(rgb(255 255 255 / 7%) 1px, transparent 1px),
        linear-gradient(90deg, rgb(255 255 255 / 7%) 1px, transparent 1px);
    background-position: -1px -1px;
    background-size: 24px 24px;
    pointer-events: none;
}
.has-image:hover .card-img { filter: none; }
.has-image:hover .card-media::before { opacity: 0; }

/* Pick one of three trace layouts by position, so neighbouring cards differ. */
.scm-sig-2, .scm-sig-3 { display: none; }
.post-feed > :nth-child(3n+2) .scm-sig-1,
.post-feed > :nth-child(3n) .scm-sig-1 { display: none; }
.post-feed > :nth-child(3n+2) .scm-sig-2 { display: inline; }
.post-feed > :nth-child(3n) .scm-sig-3 { display: inline; }
.scm-card .scm-v { font-size: 14px; }

.card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 18px;
}
.readout {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 14px;
    margin: 0;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
}
.readout-tag { color: var(--accent); font-weight: 500; }
.card-flag {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    padding: 2px 7px;
    border-radius: 3px;
    background: var(--accent2);
    color: var(--flag-fg);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    font-weight: 500;
    line-height: 1.5;
}
.card-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.08;
    letter-spacing: 0;
}
.card-link { color: var(--fg); text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 4; }
.card:hover .card-link { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.12em; }
.card-excerpt {
    display: -webkit-box;
    overflow: hidden;
    color: var(--muted);
    font-size: 0.97rem;
    line-height: 1.5;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}
.card-by { margin-top: auto; padding-top: 4px; color: var(--muted); font-size: 0.875rem; }

/* Lead card (first post on page 1) and the lone last card both depend on the feed's full order, so
   they apply only while the topic filter hides nothing (main.js sets [hidden] on filtered-out cards).
   A filtered feed is a plain grid. */
@media (min-width: 620px) {
    .feed-has-lead:not(:has(> [hidden])) > .card-lead { grid-column: span 2; }
    .feed-has-lead:not(:has(> [hidden])) > .card-lead .card-media { aspect-ratio: 16 / 7; }
    .feed-has-lead:not(:has(> [hidden])) > .card-lead .card-body { padding: 18px 22px 22px; }
    .feed-has-lead:not(:has(> [hidden])) > .card-lead .card-title { font-size: 2rem; max-width: 32ch; }
    .feed-has-lead:not(:has(> [hidden])) > .card-lead .card-excerpt { font-size: 1.03rem; max-width: 62ch; }
}
@media (max-width: 619px) {
    .card-title { font-size: 1.4rem; }
    .feed-has-lead:not(:has(> [hidden])) > .card-lead .card-title { font-size: 1.625rem; }
}

/* A card left alone in the last row spans it and turns horizontal.
   With a lead card (2 columns), the last card sits alone when its index is a multiple of 3 (2 at tablet). */
@media (min-width: 900px) {
    .post-feed:not(.feed-has-lead, :has(> [hidden])) > .card:last-child:nth-child(3n+1),
    .feed-has-lead:not(:has(> [hidden])) > .card:last-child:nth-child(3n) { grid-column: 1 / -1; flex-direction: row; }
    .post-feed:not(.feed-has-lead, :has(> [hidden])) > .card:last-child:nth-child(3n+1) .card-media,
    .feed-has-lead:not(:has(> [hidden])) > .card:last-child:nth-child(3n) .card-media { flex: 0 0 52%; aspect-ratio: auto; min-height: 240px; }
    .post-feed:not(.feed-has-lead, :has(> [hidden])) > .card:last-child:nth-child(3n+1) .card-body,
    .feed-has-lead:not(:has(> [hidden])) > .card:last-child:nth-child(3n) .card-body { justify-content: center; padding: 24px 28px; }
    .post-feed:not(.feed-has-lead, :has(> [hidden])) > .card:last-child:nth-child(3n+1) .card-title,
    .feed-has-lead:not(:has(> [hidden])) > .card:last-child:nth-child(3n) .card-title { font-size: 1.75rem; }
}
@media (min-width: 620px) and (max-width: 899px) {
    .post-feed:not(.feed-has-lead, :has(> [hidden])) > .card:last-child:nth-child(2n+1),
    .feed-has-lead:not(:has(> [hidden])) > .card:last-child:nth-child(2n) { grid-column: 1 / -1; flex-direction: row; }
    .post-feed:not(.feed-has-lead, :has(> [hidden])) > .card:last-child:nth-child(2n+1) .card-media,
    .feed-has-lead:not(:has(> [hidden])) > .card:last-child:nth-child(2n) .card-media { flex: 0 0 50%; aspect-ratio: auto; min-height: 220px; }
}

/* Author archives: the byline repeats the page's author on every card; keep it for co-authored posts. */
.author-template .card:not(.has-coauthors) .card-by { display: none; }

/* ==========================================================================
   7. Pagination
   ========================================================================== */

.pagination { margin-top: 32px; border-top-color: var(--line); }
.pagination-link {
    padding: 0 14px;
    border: 1px solid var(--line);
    background: var(--surface);
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}
a.pagination-link:hover { border-color: var(--accent); color: var(--fg); }
a.pagination-link:hover .icon { color: var(--accent); }
.pagination-info { color: var(--muted); font-size: 0.8125rem; }
@media (max-width: 480px) {
    .pagination-link span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .pagination-link { width: 2.75rem; justify-content: center; padding: 0; }
}

/* ==========================================================================
   8. Post and page header band
   ========================================================================== */

.post-head-inner { padding-top: 44px; }

/* Two layouts, each with one left edge for text:
   - with a TOC at 960px+, header, prose and footer start at the page's left edge; the TOC takes the right column;
   - otherwise (no TOC, or narrower than 960px) header text, prose and footer share the reading measure,
     centered, and the feature image, wide cards, subscribe band and related posts break out to the page width.
   Prose and footer follow base.css; this sets the header (and comments) to match. */
.post-head-inner,
.post-comments { max-width: calc(var(--content-width) + 2 * var(--gutter)); }
@media (min-width: 960px) {
    .post.has-toc .post-head-inner,
    .post.has-toc .post-comments { max-width: var(--page-width); }
}
.post-title {
    max-width: 24ch;
    margin: 14px 0 28px;
    font-size: clamp(2.25rem, 5vw, 3.6rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.005em;
}
.post-dek {
    max-width: 58ch;
    margin: -12px 0 28px;
    color: var(--on-navy-muted);
    font-size: 1.15rem;
    line-height: 1.5;
}
.page-head .post-head-inner { padding-bottom: 36px; }
.page-head .post-title { margin-bottom: 0; }
.page-head .post-dek { margin: 14px 0 0; }

/* The feature image overlaps the band's lower edge. */
.post-head.has-figure { padding-bottom: clamp(72px, 11vw, 150px); }
.post-figure { position: relative; margin: calc(-1 * clamp(56px, 9vw, 120px)) auto 0; }
.post-figure-frame {
    position: relative;
    border: 1px solid var(--line);
    background: var(--media-bg);
}
.post-figure-frame::before,
.post-figure-frame::after {
    content: "";
    position: absolute;
    z-index: 1;
    width: 16px;
    height: 16px;
    border: 2px solid var(--signal);
    pointer-events: none;
}
.post-figure-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.post-figure-frame::after { right: -1px; bottom: -1px; border-top: 0; border-left: 0; }
/* Ghost gives templates no image dimensions, so reserve a fixed frame: the page doesn't jump when a
   slow (external) feature image arrives. */
.post-figure-img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    max-height: min(70vh, 600px);
    object-fit: cover;
}
.post-figure figcaption {
    margin-top: 10px;
    color: var(--muted);
    font-size: 0.875rem;
    line-height: 1.5;
}
.post-figure figcaption a { color: inherit; }

/* ==========================================================================
   9. Post body, prose and TOC
   ========================================================================== */

.post-layout { margin-top: clamp(32px, 5vw, 48px); }

/* Regular-width images narrower than the column sit on the text's left edge, with their caption,
   instead of floating in the middle. */
.gh-content .kg-image-card:not(.kg-width-wide, .kg-width-full) img { margin-inline: 0; }

.gh-content { font-size: 1.125rem; line-height: 1.7; }
.gh-content h2 { font-size: 1.75em; font-weight: 600; letter-spacing: 0.005em; line-height: 1.15; }
.gh-content h3 { font-size: 1.36em; font-weight: 600; line-height: 1.2; }
.gh-content h4 { font-size: 1.14em; font-weight: 600; }
.gh-content h5 { font-size: 1em; font-weight: 600; }
.gh-content h6 { font-family: var(--font-mono); font-size: 0.8em; font-weight: 500; letter-spacing: 0.02em; text-transform: none; color: var(--muted); }
.gh-content strong, .gh-content b { font-weight: 600; }
.gh-content blockquote:not([class]) { border-left-color: var(--signal); }
.gh-content .kg-blockquote-alt { font-style: normal; font-weight: 500; font-size: 1.45em; line-height: 1.35; }
.gh-content figcaption { font-size: 0.85em; }
.gh-content :is(th, td) { padding: 0.6em 0.8em; }
.gh-content tbody :is(th, td) { vertical-align: baseline; } /* mono numbers and text cells share a baseline */
.gh-content thead th { border-bottom-color: var(--fg); }
.gh-content caption { font-size: 0.95em; font-weight: 600; }
.gh-content .kg-callout-card { border-radius: var(--radius); }

/* Code: navy panel with a status dot before the language name. */
.code-block { border: 1px solid color-mix(in srgb, var(--code-fg) 10%, transparent); }
[data-mode="light"] .code-block { border-color: transparent; }
.code-head { font-size: 0.75rem; }
.code-lang { display: inline-flex; align-items: center; gap: 8px; }
.code-lang:empty::after { content: "text"; }
.code-lang::before {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--signal-hi);
    box-shadow: 0 0 0 3px rgb(124 192 74 / 18%);
}
.gh-content pre { font-size: 0.82em; }

/* TOC: rail on the right, green node marks the active section. */
.toc-label {
    margin-bottom: 10px;
    padding-left: 16px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0;
    text-transform: lowercase;
}
.toc-list { border-left: 2px solid var(--line); }
.toc-link {
    position: relative;
    margin-left: -2px;
    padding: 5px 0 5px 16px;
    border-left: 0;
    color: var(--muted);
    font-family: var(--font-head);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.3;
}
.toc-sublist .toc-link { padding-left: 30px; font-size: 0.95rem; }
.toc-link:hover { color: var(--fg); }
.toc-link.is-active,
.toc-h2:has(.toc-sublist .is-active) > .toc-link { color: var(--fg); }
/* Dense outlines (a section with 3+ subsections): subsections show only under the section being read. */
.toc-list:has(.toc-sublist > :nth-child(3)) .toc-h2:not(:has(.is-active)) > .toc-sublist { display: none; }
.toc-link.is-active::before {
    content: "";
    position: absolute;
    top: calc(5px + 0.65em - 4px);
    left: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--signal);
    box-shadow: 0 0 0 3px var(--bg);
}

/* ==========================================================================
   10. Post footer: tags, author box, subscribe band, related
   ========================================================================== */

.post-footer { gap: 2.25rem; margin-top: 3.5rem; }
.tag-link {
    min-height: 32px;
    border-radius: 4px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}
.tag-link::before { content: "#"; margin-right: 2px; color: var(--signal); }
.tag-link:hover { border-color: var(--fg); color: var(--fg); }

.author-box-avatar { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--signal); }
.author-box-name { font-size: 1.25rem; font-weight: 600; }
/* No photo: first letter of the name in a round mark (rest of the name is zero-size). */
.author-box-mark {
    display: block;
    overflow: hidden;
    background: var(--navy-2);
    color: var(--on-navy);
    font-family: var(--font-head);
    font-size: 0;
    font-weight: 700;
    line-height: 64px;
    text-align: center;
    white-space: nowrap;
}
.author-box-mark::first-letter { font-size: 1.75rem; }
.author-box-links { font-family: var(--font-mono); font-size: 0.8125rem; }

.subscribe {
    position: relative;
    gap: 16px 32px;
    padding: clamp(22px, 4vw, 32px);
    border: 0;
    border-radius: 0;
    background: var(--navy);
    color: var(--on-navy);
}
[data-mode="dark"] .subscribe { box-shadow: inset 0 0 0 1px var(--line); }
.subscribe::before,
.subscribe::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--signal-hi);
    pointer-events: none;
}
.subscribe::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.subscribe::after { right: 0; bottom: 0; border-top: 0; border-left: 0; }
.subscribe-title { font-size: 1.875rem; font-weight: 600; line-height: 1.05; }
.subscribe-desc { color: var(--on-navy-muted); font-size: 0.97rem; }
.subscribe-input {
    border-color: rgb(255 255 255 / 25%);
    border-radius: 4px;
    background: rgb(255 255 255 / 8%);
    color: #ffffff;
}
.subscribe-input::placeholder { color: rgb(233 240 246 / 62%); }
.subscribe-input:focus-visible { border-color: var(--signal-hi); }
.subscribe-form.success .subscribe-success { color: var(--signal-hi); }
.subscribe-form.error .subscribe-error { color: #ffb2a6; }
.subscribe-form.error .subscribe-input { border-color: #ffb2a6; }

.foot-subscribe { margin-block: 56px; }

.related-posts { padding-top: 8px; }
.related-title { margin-bottom: 18px; font-size: 1.875rem; font-weight: 600; line-height: 1; }
.post-footer > .related-posts,
.post-footer > .subscribe { max-width: none; }
/* With a TOC the footer uses the post's columns (base.css); the band still spans both. */
@media (min-width: 960px) {
    .post.has-toc .post-footer > .subscribe { grid-column: content-start / -1; }
}
/* Related posts use the feed's columns (3 / 2 / 1), so one or two cards keep normal card size. */
.related-feed .card-title { font-size: 1.35rem; }

/* ==========================================================================
   11. Archive bands (tag, author, page 2+)
   ========================================================================== */

.archive-header { padding: 0; }
.archive-inner { padding-top: 40px; }
.archive-title {
    margin: 12px 0 0;
    font-size: clamp(2.5rem, 6vw, 4rem);
    font-weight: 700;
    line-height: 0.98;
    letter-spacing: -0.005em;
}
.archive-desc {
    max-width: 60ch;
    margin-top: 12px;
    color: var(--on-navy-muted);
    font-size: 1.1rem;
    line-height: 1.5;
}
.archive-header .gauges { margin-top: 32px; }
.archive-header .gauges .gauge:last-child { padding-right: 0; }

.archive-id { display: flex; align-items: center; gap: 22px; margin-top: 16px; }
.archive-id .archive-title { margin-top: 0; }
.archive-avatar {
    flex: none;
    width: 88px;
    height: 88px;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 3px var(--navy-2), 0 0 0 5px var(--signal-hi);
}
/* No photo: show the first letter of the name in a round mark. */
.archive-avatar-mark {
    display: block;
    overflow: hidden;
    border: 2px solid var(--on-navy);
    box-shadow: none;
    color: var(--on-navy);
    font-family: var(--font-head);
    font-size: 0;
    font-weight: 700;
    line-height: 84px;
    text-align: center;
    white-space: nowrap;
}
.archive-avatar-mark::first-letter { font-size: 2.6rem; }
@media (max-width: 619px) {
    .archive-id { align-items: flex-start; gap: 16px; }
    .archive-avatar { width: 64px; height: 64px; }
    .archive-avatar-mark { line-height: 60px; }
    .archive-avatar-mark::first-letter { font-size: 2rem; }
}

.archive-posts { padding-top: 40px; padding-bottom: 0; }
.archive-posts > .post-feed:first-child { margin-top: 0; }

/* ==========================================================================
   12. Error pages
   ========================================================================== */

.error-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
    align-items: center;
    padding-block: 56px;
}
.error-page { padding: 0; }
.error-code {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--on-navy-muted);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    letter-spacing: 0;
}
.led { width: 9px; height: 9px; border-radius: 50%; background: var(--signal-hi); }
.led-warn { background: var(--accent2); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent2) 25%, transparent); }
.error-title {
    margin-top: 12px;
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    font-weight: 700;
    line-height: 0.95;
    letter-spacing: -0.005em;
}
.error-text { margin-top: 16px; color: var(--on-navy-muted); }
.error-actions { margin-top: 28px; }
.error-band .button-ghost { border-color: var(--navy-line); color: var(--on-navy); }
.error-band .button-ghost:hover { border-color: var(--on-navy); }
.error-details { color: var(--on-navy-muted); }
.error-art .scm { max-width: 520px; margin-left: auto; }
.error-recent { padding-top: 40px; padding-bottom: 24px; }
@media (max-width: 819px) {
    .error-inner { grid-template-columns: minmax(0, 1fr); gap: 8px; padding-block: 40px 24px; }
    .error-art .scm { margin: 0 auto; }
}

/* ==========================================================================
   13. Footer
   ========================================================================== */

.site-foot { border-top: 1px solid var(--line); color: var(--muted); font-size: 0.875rem; }
.foot-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding-block: 22px;
}
.foot-note { display: flex; align-items: baseline; gap: 10px; }
.foot-mark { flex: none; transform: translateY(-1px); }
.foot-mark { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); }
.foot-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.foot-nav .nav { gap: 6px 20px; }
.foot-nav a { color: var(--muted); text-decoration: none; }
.foot-nav a:hover { color: var(--fg); text-decoration: underline; }
.foot-rss { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.8125rem; }
.foot-rss .icon { width: 15px; height: 15px; }

/* ==========================================================================
   14. Ghost's embedded UIs and trial data sheet
   ========================================================================== */

/* Portal, Search and Comments render in iframes. With the page's dark color-scheme the browser gives
   their light-scheme documents an opaque white canvas (a white page behind the signup modal, a grey
   search backdrop, unreadable comments). Matching the iframe's scheme keeps the canvas transparent. */
#ghost-portal-root iframe,
#sodo-search-root iframe,
.post-comments iframe { color-scheme: light; }

/* Trial data sheet: 3 columns in the reading measure (6 items = 3 x 2, no empty cells), 2 on phones. */
.trial-summary { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }
@media (max-width: 619px) {
    .trial-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}