/* Prometheus — /prometheus/
 *
 * Built to the house design language (quiet-precision skill,
 * docs/references/2026-09-16-quiet-precision-design-language.md).
 *
 * Signature lever: content-derived tint. Every publication gets a stable hue
 * from its name; the page is neutral at rest and the tint only appears on
 * hover and on the active filter. Chrome stays grey — colour arrives as data.
 */

/* ============================================================
   Tokens. Dark mode is a swap of these values and nothing else.
   `data-theme` + localStorage['theme'] are shared with the main site,
   so a choice made on kottke.org carries over to this page.
   ============================================================ */
:root {
    --font-sans: neue-haas-unica, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

    --color-bg: #fafafa;
    --color-fg: #111111;
    --color-fg-muted: #6b6b6b;
    --color-fg-faint: #9a9a9a;
    --color-line: rgba(0, 0, 0, .09);
    --color-line-strong: rgba(0, 0, 0, .14);

    /* control layer */
    --bg-surface: #ffffff;
    --bg-elevated: #ffffff;
    --bg-pill: #ffffff;
    --backdrop: rgba(17, 17, 17, .18);
    --modal-shadow: 0 0 3.6px rgba(0,0,0,.04), 0 0 10px rgba(0,0,0,.04), 0 0 24.1px rgba(0,0,0,.05), 0 0 80px rgba(0,0,0,.08);
    --bg-well: #f0f0ee;
    --bg-hover: rgba(0, 0, 0, .04);
    --bg-active: rgba(0, 0, 0, .07);
    --ring: rgba(0, 0, 0, .14);
    --button-shadow:
        inset 0 1px 0 0 #fff,
        0 0 0 1px rgba(0, 0, 0, .06),
        0 1px 1px -1px rgba(0, 0, 0, .08),
        0 2px 2px -1px rgba(0, 0, 0, .08);

    --color-ok: #2f6f4f;

    --radius-control: 6px;
    --radius-media: 8px;
    --radius-container: 12px;

    --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
    --space-4: 1rem;    --space-6: 1.5rem;  --space-8: 2rem;
    --space-12: 3rem;   --space-16: 4rem;

    --measure: 48rem;
    --rail: 10.5rem;      /* thumbnail width; the page width stays put, so text gives up the room */
    --control-h: 2.875rem;

    --dur: 160ms;
    --ease: cubic-bezier(0.2, 0, 0, 1);

    /* publication tints — light. 0-7 are pinned to the dominant publications
       in giftlinks_tint(); 8-11 take the long tail and are deliberately quieter. */
    --tint-0: #b5442e;  --tint-1: #3a5ca8;  --tint-2: #2c7080;  --tint-3: #8a5a1f;
    --tint-4: #2f6f4f;  --tint-5: #7a4a8a;  --tint-6: #a03a62;  --tint-7: #4a6a2a;
    --tint-8: #7b5e3b;  --tint-9: #4a5a7a;  --tint-10: #6b4a5a; --tint-11: #3f6b6b;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
        --color-bg: #0c0c0c;
        --color-fg: #ededed;
        --color-fg-muted: #8f8f8f;
        --color-fg-faint: #5c5c5c;
        --color-line: rgba(255, 255, 255, .12);
        --color-line-strong: rgba(255, 255, 255, .18);

        --bg-surface: #1a1a1a;
        --bg-elevated: #1e1e1e;
        --bg-pill: #3a3a3a;
        --backdrop: rgba(0, 0, 0, .55);
        --modal-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 0 40px rgba(0,0,0,.5);
        --bg-well: #131313;
        --bg-hover: rgba(255, 255, 255, .05);
        --bg-active: rgba(255, 255, 255, .09);
        --ring: rgba(255, 255, 255, .22);
        --button-shadow:
            0 -1px 0 0 rgba(255, 255, 255, .04),
            0 0 0 1px rgba(255, 255, 255, .12),
            0 1px 2px rgba(0, 0, 0, .4);

        --color-ok: #6fc79a;

        --tint-0: #e08a72;  --tint-1: #8aa8e8;  --tint-2: #71b9c7;  --tint-3: #d3a765;
        --tint-4: #6fc79a;  --tint-5: #bc95c9;  --tint-6: #e084a8;  --tint-7: #9cbd72;
        --tint-8: #c2a077;  --tint-9: #93a3c4;  --tint-10: #c49aab; --tint-11: #7fb8b8;
    }
}

[data-theme='dark'] {
    --color-bg: #0c0c0c;
    --color-fg: #ededed;
    --color-fg-muted: #8f8f8f;
    --color-fg-faint: #5c5c5c;
    --color-line: rgba(255, 255, 255, .12);
    --color-line-strong: rgba(255, 255, 255, .18);

    --bg-surface: #1a1a1a;
    --bg-elevated: #1e1e1e;
    --bg-pill: #3a3a3a;
    --backdrop: rgba(0, 0, 0, .55);
    --modal-shadow: 0 0 0 1px rgba(255,255,255,.04), 0 0 40px rgba(0,0,0,.5);
    --bg-well: #131313;
    --bg-hover: rgba(255, 255, 255, .05);
    --bg-active: rgba(255, 255, 255, .09);
    --ring: rgba(255, 255, 255, .22);
    --button-shadow:
        0 -1px 0 0 rgba(255, 255, 255, .04),
        0 0 0 1px rgba(255, 255, 255, .12),
        0 1px 2px rgba(0, 0, 0, .4);

    --color-ok: #6fc79a;

    --tint-0: #e08a72;  --tint-1: #8aa8e8;  --tint-2: #71b9c7;  --tint-3: #d3a765;
    --tint-4: #6fc79a;  --tint-5: #bc95c9;  --tint-6: #e084a8;  --tint-7: #9cbd72;
    --tint-8: #c2a077;  --tint-9: #93a3c4;  --tint-10: #c49aab; --tint-11: #7fb8b8;
}

/* publication tint bindings — set from PHP via data-tint */
[data-tint="0"] { --tint: var(--tint-0); }
[data-tint="1"] { --tint: var(--tint-1); }
[data-tint="2"] { --tint: var(--tint-2); }
[data-tint="3"] { --tint: var(--tint-3); }
[data-tint="4"] { --tint: var(--tint-4); }
[data-tint="5"] { --tint: var(--tint-5); }
[data-tint="6"] { --tint: var(--tint-6); }
[data-tint="7"] { --tint: var(--tint-7); }
[data-tint="8"] { --tint: var(--tint-8); }
[data-tint="9"] { --tint: var(--tint-9); }
[data-tint="10"] { --tint: var(--tint-10); }
[data-tint="11"] { --tint: var(--tint-11); }

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
body, h1, h2, h3, p, ul, figure { margin: 0; padding: 0; }
h1, h2, h3 { font-size: inherit; font-weight: 400; line-height: 1.2; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
img, svg { max-width: 100%; height: auto; vertical-align: top; }

html { color-scheme: light dark; scrollbar-gutter: stable; }
/* no page scroll behind an open modal */
html:has(dialog[open]) { overflow: hidden; }
[data-theme='light'] { color-scheme: light; }
[data-theme='dark']  { color-scheme: dark; }

body {
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: -0.011em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    max-width: var(--measure);
    margin-inline: auto;
    padding: 0 var(--space-4) var(--space-16);
}

::selection { background: var(--color-fg); color: var(--color-bg); }

:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--ring);
    border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; }
}

/* ============================================================
   Masthead — dot, kottke.org / Prometheus, icons right; a hairline under it
   that runs the full width of the window
   ============================================================ */
.gl-masthead {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: 1.375rem;
}
/* The page is a centred column, so the rule escapes it with a spread shadow
   clipped to 1px tall. Shadows are ink overflow: no horizontal scrollbar. */
.gl-masthead::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--color-line);
    box-shadow: 0 0 0 100vmax var(--color-line);
    clip-path: inset(0 -100vmax);
}

.gl-crumb {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-width: 0;
    font-size: 1.125rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    white-space: nowrap;
}
.gl-dot {
    display: block;
    flex: none;
    width: 1.625rem;
    height: 1.625rem;
    margin-right: .125rem;
    border-radius: 50%;
    overflow: hidden;
    transition: opacity var(--dur) var(--ease);
}
.gl-dot:hover { opacity: .85; }
.gl-dot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gl-crumb-site,
.gl-crumb-page {
    color: var(--color-fg);
    transition: opacity var(--dur) var(--ease);
}
.gl-crumb-site:hover,
.gl-crumb-page:hover { opacity: .7; }
.gl-crumb-sep { color: var(--color-fg-faint); font-weight: 400; }

.gl-masthead-tools {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    /* optical: pull the last icon's padding back so its glyph meets the edge */
    margin-right: -.375rem;
}
/* bare icon buttons — no chrome, colour change on hover, ring on focus */
.gl-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    background: none;
    border-radius: var(--radius-control);
    color: var(--color-fg-muted);
    font-size: 1.0625rem;
    cursor: pointer;
    transition: color var(--dur) var(--ease);
}
.gl-icon:hover { color: var(--color-fg); }
.gl-icon:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.gl-icon i { line-height: 1; }
.gl-icon svg { width: 1.0625rem; height: 1.0625rem; display: block; }

/* ============================================================
   Controls — search bar + filter button
   ============================================================ */
.gl-controls {
    display: flex;
    gap: var(--space-2);
    align-items: center;
    margin-top: var(--space-8);
    padding-bottom: var(--space-4);
}

/* Non-members: a short pitch where the search bar would be */
.gl-pitch {
    margin-top: var(--space-8);
    padding-bottom: var(--space-4);
    color: var(--color-fg-muted);
}
.gl-pitch p { margin: 0 0 var(--space-3); }
.gl-pitch a:not(.gl-btn) {
    color: var(--color-fg);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-decoration-thickness: from-font;
    text-underline-offset: .15em;
    transition: text-decoration-color var(--dur) var(--ease);
}
.gl-pitch a:not(.gl-btn):hover { text-decoration-color: color-mix(in srgb, currentColor 75%, transparent); }
.gl-pitch .gl-pitch-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin: var(--space-4) 0 0;
    font-size: .875rem;
}
.gl-pitch-actions .gl-btn { text-decoration: none; }

.gl-search { flex: 1 1 auto; min-width: 0; }
.gl-searchbox { position: relative; }

.gl-search input[type=search] {
    width: 100%;
    height: var(--control-h);
    font: inherit;
    font-size: 1.125rem;
    color: var(--color-fg);
    background: var(--bg-surface);
    border: 1px solid var(--color-line-strong);
    border-radius: var(--radius-control);
    padding: 0 5rem 0 .875rem;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.gl-search input[type=search]::placeholder { color: var(--color-fg-faint); }
/* the right padding only reserves room for the ⌘K hint; once it fades, the clear button sits at the edge */
.gl-search input[type=search]:focus,
.gl-search input[type=search]:not(:placeholder-shown) { padding-right: .25rem; }
/* The native clear button is a small blue glyph with a hit area to match.
   Draw our own: the same ×, in the muted ink, on a larger square target.
   flex-shrink: 0 because a long query (a pasted URL) otherwise squeezes it to nothing. */
.gl-search input[type=search]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    margin-left: .5rem;
    cursor: pointer;
    background-color: var(--color-fg-muted);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center / .75rem no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23000' stroke-width='1.75' stroke-linecap='round'/%3E%3C/svg%3E") center / .75rem no-repeat;
    transition: background-color var(--dur) var(--ease);
}
.gl-search input[type=search]::-webkit-search-cancel-button:hover { background-color: var(--color-fg); }
.gl-search input[type=search]:focus-visible {
    outline: none;
    border-color: color-mix(in srgb, var(--color-fg) 35%, var(--color-line-strong));
    box-shadow: 0 0 0 3px var(--ring);
}

.gl-kbd {
    font-family: var(--font-sans);
    font-size: .9375rem;
    line-height: 1;
    letter-spacing: .02em;
    color: var(--color-fg-faint);
    background: var(--bg-well);
    border: 1px solid var(--color-line);
    border-radius: 5px;
    padding: .375rem .5rem;
    white-space: nowrap;
}
.gl-searchbox .gl-kbd {
    position: absolute;
    right: .5rem;
    top: 50%;
    translate: 0 -50%;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
}
/* the hint gets out of the way once you're typing */
.gl-searchbox:focus-within .gl-kbd,
.gl-searchbox input:not(:placeholder-shown) ~ .gl-kbd { opacity: 0; }

/* level 3 — a control that reads as pressable */
.gl-btn {
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    color: var(--color-fg);
    background: var(--bg-surface);
    border: 0;
    border-radius: var(--radius-control);
    padding: .3rem .7rem;
    cursor: pointer;
    box-shadow: var(--button-shadow);
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.gl-btn:hover { background: var(--bg-hover); }
.gl-btn:active { background: var(--bg-active); }
.gl-btn:focus-visible { outline: none; box-shadow: var(--button-shadow), 0 0 0 3px var(--ring); }

.gl-btn-primary {
    background: var(--color-fg);
    color: var(--color-bg);
    box-shadow: none;
    padding: .45rem .9rem;
}
.gl-btn-primary:hover { background: color-mix(in srgb, var(--color-fg) 85%, var(--color-bg)); }
.gl-btn-primary:focus-visible { box-shadow: 0 0 0 3px var(--ring); }

.gl-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0;
    width: 1.85rem;
    height: 1.85rem;
    color: var(--color-fg-muted);
    position: relative;
}
.gl-iconbtn:hover { color: var(--color-fg); }
.gl-iconbtn i { font-size: .9375rem; line-height: 1; }

.gl-filterbtn { width: var(--control-h); height: var(--control-h); }
.gl-filterbtn i { font-size: 1.0625rem; }
/* a filter other than the default view is on */
.gl-filterbtn.is-active { color: var(--color-fg); }
.gl-filterbtn.is-active::after {
    content: '';
    position: absolute;
    top: .4rem;
    right: .4rem;
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background: var(--tint, var(--color-fg));
}

.gl-theme .gl-icon-moon { display: none; }
[data-theme='dark'] .gl-theme .gl-icon-moon { display: block; }
[data-theme='dark'] .gl-theme .gl-icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) .gl-theme .gl-icon-moon { display: block; }
    :root:not([data-theme='light']) .gl-theme .gl-icon-sun { display: none; }
}

/* ============================================================
   Modals — native <dialog>, popover recipe: ambient glow, no y offset
   ============================================================ */
.gl-modal {
    width: min(26rem, calc(100vw - 2rem));
    max-height: min(40rem, calc(100dvh - 2rem));
    padding: 0;
    margin: auto;
    color: var(--color-fg);
    background: var(--bg-elevated);
    border: 1px solid var(--color-line);
    border-radius: var(--radius-container);
    box-shadow: var(--modal-shadow);
    overflow: hidden;
}
.gl-modal-info { width: min(30rem, calc(100vw - 2rem)); }
.gl-modal::backdrop { background: var(--backdrop); }
.gl-modal[open] { animation: gl-fade var(--dur) var(--ease); }
.gl-modal[open]::backdrop { animation: gl-fade var(--dur) var(--ease); }
@keyframes gl-fade { from { opacity: 0; } }

.gl-modal-inner {
    display: flex;
    flex-direction: column;
    max-height: inherit;
    min-height: 0;
}

.gl-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-3) var(--space-3) var(--space-2) var(--space-4);
}
.gl-modal-head h2 { font-size: .9375rem; font-weight: 600; }

.gl-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: var(--radius-control);
    background: none;
    color: var(--color-fg-faint);
    font-size: 1rem;
    cursor: pointer;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.gl-close:hover { color: var(--color-fg); background: var(--bg-hover); }

.gl-fieldset {
    border: 0;
    margin: 0;
    padding: var(--space-2) var(--space-4) var(--space-3);
    min-width: 0;
}
.gl-fieldset legend,
.gl-legend {
    padding: 0 0 var(--space-2);
    font-size: .75rem;
    font-weight: 500;
    color: var(--color-fg-faint);
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* segmented control — a well of pills, the selected one raised */
.gl-windows {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2px;
    padding: 2px;
    background: var(--bg-well);
    border-radius: 8px;
}
.gl-windows label { position: relative; }
.gl-windows input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}
.gl-windows span {
    display: block;
    text-align: center;
    padding: .3rem .5rem;
    border-radius: var(--radius-control);
    font-size: .8125rem;
    color: var(--color-fg-muted);
    white-space: nowrap;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.gl-windows label:hover span { color: var(--color-fg); }
.gl-windows input:checked + span {
    background: var(--bg-pill);
    color: var(--color-fg);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px rgba(0, 0, 0, .04);
}
.gl-windows input:focus-visible + span { box-shadow: 0 0 0 3px var(--ring); }

/* publication list scrolls on its own; head and foot stay put */
.gl-pubs {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    padding-bottom: 0;
}
.gl-publist {
    list-style: none;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-inline: calc(var(--space-2) * -1);
    padding-bottom: var(--space-2);
}
.gl-pubopt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: .4rem var(--space-2);
    border-radius: var(--radius-control);
    font-size: .9375rem;
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.gl-pubopt:hover { background: var(--bg-hover); }
.gl-pubopt:has(input:checked) { background: var(--bg-active); font-weight: 500; }
.gl-pubopt:has(input:focus-visible) { box-shadow: 0 0 0 3px var(--ring); }
.gl-pubopt input { position: absolute; opacity: 0; pointer-events: none; }
.gl-pubopt .gl-tintdot { transform: none; }
.gl-pubname { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gl-pubcount {
    flex: none;
    font-size: .8125rem;
    color: var(--color-fg-faint);
    font-variant-numeric: tabular-nums;
}
.gl-pubopt.is-empty { color: var(--color-fg-faint); }
.gl-pubopt.is-empty .gl-tintdot { opacity: .4; }
/* "All publications" has no dot; line its name up with the others */
.gl-publist li:first-child .gl-pubname { padding-left: calc(.5rem + var(--space-2)); }

.gl-modal-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--color-line);
}
.gl-textbtn {
    font: inherit;
    font-size: .875rem;
    color: var(--color-fg-muted);
    background: none;
    border: 0;
    padding: .3rem .25rem;
    border-radius: var(--radius-control);
    cursor: pointer;
    transition: color var(--dur) var(--ease);
}
.gl-textbtn:hover { color: var(--color-fg); }

.gl-prose {
    padding: 0 var(--space-4) var(--space-4);
    font-size: .9375rem;
    color: var(--color-fg-muted);
    overflow-y: auto;
}
.gl-prose a {
    color: var(--color-fg);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-decoration-thickness: from-font;
    text-decoration-skip-ink: auto;
    text-underline-offset: .15em;
    transition: text-decoration-color var(--dur) var(--ease);
}
.gl-prose a:hover { text-decoration-color: color-mix(in srgb, currentColor 75%, transparent); }
.gl-prose p + p { margin-top: var(--space-3); }
.gl-prose p:first-child { color: var(--color-fg); }
.gl-shortcut .gl-kbd { margin-right: .25rem; font-size: .75rem; padding: .2rem .35rem; border-radius: 4px; }

/* filter note */
.gl-filter-note {
    margin-top: var(--space-4);
    font-size: .875rem;
    color: var(--color-fg-muted);
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2);
}
.gl-filter-note .gl-count { font-variant-numeric: tabular-nums; }
.gl-filter-note a {
    color: var(--color-fg-faint);
    transition: color var(--dur) var(--ease);
}
.gl-filter-note a:hover { color: var(--color-fg); }
/* the one place the active publication's tint shows outside a row */
.gl-tintdot {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--tint, var(--color-fg-faint));
    flex: none;
    transform: translateY(-.05rem);
}

/* ============================================================
   The list — metadata rail left, content right
   ============================================================ */
.gl-list { margin-top: var(--space-2); }

.gl-item {
    display: grid;
    grid-template-columns: var(--rail) 1fr;
    column-gap: var(--space-6);
    padding-block: var(--space-4);
    border-top: 1px solid var(--color-line);
}
.gl-item:last-child { border-bottom: 1px solid var(--color-line); }

.gl-rail { min-width: 0; }
.gl-thumb {
    display: block;
    /* top edge lines up with the cap height of the time · publication line */
    margin-top: .3rem;
    border-radius: var(--radius-media);
    overflow: hidden;
    background: var(--bg-well);
    transition: opacity var(--dur) var(--ease);
}
.gl-thumb:hover { opacity: .8; }
.gl-thumb img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}

.gl-body { min-width: 0; }

.gl-meta {
    font-size: .8125rem;
    color: var(--color-fg-faint);
}
.gl-meta time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.gl-pub { transition: color var(--dur) var(--ease); }
/* neutral at rest; the publication's own hue arrives on hover */
.gl-item:hover .gl-pub { color: var(--tint, var(--color-fg-muted)); }

.gl-item h2 {
    margin-top: var(--space-1);
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.3;
    /* even line lengths; a one-liner stays a one-liner */
    text-wrap: balance;
    /* Glue the copy button to the last word. Whether a line may break between
       two pieces of text is decided by their nearest common ancestor: between
       words that's the link (normal, wraps); between the last word and the
       button it's the h2 (nowrap). So the button never sits on a line alone. */
    white-space: nowrap;
}
.gl-item h2 a {
    white-space: normal;
    /* last resort for a bare-URL title; kept off the h2 so it can't break
       the glue between the last word and the copy button */
    overflow-wrap: anywhere;
    text-decoration: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: from-font;
    text-decoration-skip-ink: auto;
    text-underline-offset: .15em;
    transition: text-decoration-color var(--dur) var(--ease);
}
.gl-item h2 a:hover {
    text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}

.gl-desc {
    margin-top: var(--space-1);
    font-size: .9375rem;
    color: var(--color-fg-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* copy button — level 2, no chrome at rest */
.gl-copy {
    border: 0;
    background: none;
    padding: .15rem;
    margin-left: .35rem;
    border-radius: var(--radius-control);
    color: var(--color-fg-faint);
    cursor: pointer;
    line-height: 0;
    vertical-align: -.18em;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.gl-copy svg { width: .875rem; height: .875rem; display: block; }
.gl-copy:hover { background: var(--bg-hover); color: var(--color-fg); }
.gl-copy:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.gl-copy.gl-copied { color: var(--color-ok); }
.gl-copy .gl-icon-check { display: none; }
.gl-copy.gl-copied .gl-icon-check { display: block; }
.gl-copy.gl-copied .gl-icon-copy { display: none; }

/* more-links disclosure */
.gl-links { margin-top: var(--space-2); font-size: .8125rem; }
.gl-more summary {
    display: inline;
    cursor: pointer;
    color: var(--color-fg-faint);
    list-style: none;
    user-select: none;
    transition: color var(--dur) var(--ease);
}
.gl-more summary::-webkit-details-marker { display: none; }
.gl-more summary:hover { color: var(--color-fg); }
.gl-more-label::before { content: '+ '; font-family: var(--font-mono); }
.gl-more[open] .gl-more-label { display: none; }
.gl-more .gl-more-list { display: none; color: var(--color-fg-faint); }
.gl-more[open] .gl-more-list { display: inline; }
.gl-more-list::before { content: '− '; font-family: var(--font-mono); }
.gl-more-list a {
    color: var(--color-fg-muted);
    transition: color var(--dur) var(--ease);
}
.gl-more-list a:hover { color: var(--color-fg); }

/* empty state — one line of faint text, one control */
.gl-empty {
    margin-block: var(--space-16);
    color: var(--color-fg-muted);
    text-align: center;
}
.gl-empty a {
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: .15em;
}

/* ============================================================
   Narrow
   ============================================================ */
@media (max-width: 40rem) {
    body { padding-inline: var(--space-4); padding-block: 0 var(--space-12); }

    /* Narrow: the thumbnail sits beside the content at a smaller size. */
    .gl-item {
        grid-template-columns: 6.25rem 1fr;
        column-gap: var(--space-3);
    }
    /* No image: let the text use the full width rather than sit in a gutter. */
    .gl-item:not(:has(.gl-thumb)) { grid-template-columns: 1fr; }
    .gl-item:not(:has(.gl-thumb)) .gl-rail { display: none; }
    .gl-controls { margin-top: var(--space-6); }
}