/* Vendored rather than fetched: the Nix build has no network. */

@font-face {
    font-family: 'General Sans';
    src: url('/fonts/general-sans-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('/fonts/general-sans-500.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'General Sans';
    src: url('/fonts/general-sans-600.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nunito';
    src: url('/fonts/nunito-latin-wght.woff2') format('woff2');
    font-weight: 200 1000;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Space Grotesk';
    src: url('/fonts/space-grotesk-latin-wght.woff2') format('woff2');
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Hanken Grotesk';
    src: url('/fonts/hanken-grotesk-latin-wght.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('/fonts/jetbrains-mono-latin-wght.woff2') format('woff2');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Anton';
    src: url('/fonts/anton-400-latin.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
        U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
        U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Anton';
    src: url('/fonts/anton-400-latin-ext.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
        U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
    color-scheme: light dark;

    --paper: light-dark(oklch(98.5% 0 0), oklch(14.1% 0.005 285.823));
    --ink: light-dark(oklch(14.1% 0.005 285.823), oklch(98.5% 0 0));

    --soft: color-mix(in oklab, var(--ink) 78%, transparent);
    --muted: color-mix(in oklab, var(--ink) 60%, transparent);
    --faint: color-mix(in oklab, var(--ink) 26%, transparent);

    /* onedark in the dark, catppuccin latte in the light, both pulled to a
       tenth of their chroma. */
    --code-comment: light-dark(oklch(53% 0.014 285), oklch(60% 0.016 285));
    --code-punct: light-dark(oklch(61.5% 0.01 285), oklch(51.5% 0.012 285));
    --code-string: light-dark(oklch(50% 0.062 145), oklch(78% 0.048 145));
    --code-keyword: light-dark(oklch(48% 0.072 305), oklch(76% 0.052 305));
    --code-fn: light-dark(oklch(50% 0.068 250), oklch(78% 0.05 250));
    --code-number: light-dark(oklch(52% 0.07 58), oklch(80% 0.05 58));

    --rule: 1px solid var(--ink);
    --rule-faint: 1px solid var(--faint);

    --pad: 1.25rem;

    --label-size: 0.8125rem;
    --label-tracking: 0.06em;

    /* Measured label widths, fixed so the page's vertical rules continue the
       nav cells' borders. */
    --nav-writing: 7.625rem;
    --nav-projects: 8.25rem;
    --nav-talk: 10.0625rem;
    --col-hero: calc(var(--nav-projects) + var(--nav-talk));
    --col-recent: calc(
        var(--nav-writing) + var(--nav-projects) + var(--nav-talk)
    );

    --font-display: 'Anton', Impact, sans-serif;
    --font-sans: 'General Sans', system-ui, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
    --font-code: 'JetBrains Mono', var(--font-mono);

    /* 62px at 390px wide, 128px from ~900px up. The floor has to fit the name
       on one line at 320px. */
    --size-display: clamp(3.25rem, 0.75rem + 13vw, 8rem);
    /* 36px at 390px wide, 56px at 1440px. */
    --size-display-sm: clamp(2.25rem, 1.79rem + 1.9vw, 3.5rem);

    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* The English labels are wider, measured the same way: the label's own width
   rounded up to the next 16th of a rem. */
html[lang='en'] {
    --nav-writing: 8.25rem;
    --nav-projects: 9.0625rem;
    --nav-talk: 9.25rem;
}

@media (min-width: 60rem) {
    :root {
        --pad: 2.5rem;
    }
}

@media (min-width: 60rem) and (max-height: 53rem) {
    :root {
        --size-display: 7rem;
        --size-display-sm: 3rem;
    }
}

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

* {
    margin: 0;
}

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

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-sans);
    font-size: 0.9375rem;
    line-height: 1.55;
    font-feature-settings: 'ss01', 'ss02';
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

a {
    color: inherit;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:focus-visible,
:focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}

img,
svg {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Sized by the text it sits with; the stroke is Lucide's, set on the svg.
   flex: none — squeezed, a glyph collapsed to zero width once. */
.icon {
    width: 1.125em;
    height: 1.125em;
    flex: none;
}

ul {
    list-style: none;
    padding: 0;
}

time {
    font-variant-numeric: tabular-nums;
}

code,
pre,
kbd {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums slashed-zero;
}

.display {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--size-display);
    line-height: 0.86;
    letter-spacing: -0.01em;
    text-transform: uppercase;
}

.display-sm {
    font-size: var(--size-display-sm);
    line-height: 0.9;
    letter-spacing: 0;
}

.eyebrow {
    font-size: var(--label-size);
    font-weight: 600;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    color: var(--muted);
}

.skip {
    position: absolute;
    left: -100vw;
}

.skip:focus {
    left: var(--pad);
    top: 0.5rem;
    z-index: 1;
    background: var(--paper);
    padding: 0.5rem 1rem;
    border: var(--rule);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
    }
}

.bar {
    border-bottom: var(--rule);
}

.brand {
    display: none;
}

.brand:hover {
    text-decoration: none;
}

.mark {
    width: 1.75rem;
    height: 1.75rem;
}

.mark-box {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
    transition: fill 0.25s var(--ease-out);
}

.mark-glyph {
    fill: currentColor;
    transition: fill 0.25s var(--ease-out);
}

.brand:hover .mark-box {
    fill: var(--ink);
}

.brand:hover .mark-glyph {
    fill: var(--paper);
}

.nav {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.nav a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.25rem;
    font-size: var(--label-size);
    font-weight: 600;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    white-space: nowrap;
}

.nav a + a {
    border-left: var(--rule);
}

.nav a {
    transition: background-color 0.18s var(--ease-out);
}

.nav a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.25s var(--ease-out);
}

.nav a:hover {
    text-decoration: none;
}

.nav a:not(.nav-cta):hover {
    background: color-mix(in oklab, var(--ink) 5%, transparent);
}

.nav a:hover::after,
.nav a[aria-current]::after {
    transform: scaleX(1);
}

.nav a[aria-current]:not(.nav-cta) {
    background: color-mix(in oklab, var(--ink) 8%, transparent);
}

.nav-cta {
    background: var(--ink);
    color: var(--paper);
}

.nav a.nav-cta::after {
    background: var(--paper);
}

@media (min-width: 60rem) {
    .bar {
        display: flex;
        align-items: stretch;
        justify-content: space-between;
    }

    .brand {
        display: flex;
        align-items: center;
        min-height: 4.25rem;
        padding: 0 var(--pad);
    }

    .nav {
        display: flex;
        align-items: stretch;
    }

    .nav a {
        min-height: auto;
        justify-content: center;
        border-left: var(--rule);
    }

    .nav a:nth-child(1) {
        width: var(--nav-writing);
    }

    .nav a:nth-child(2) {
        width: var(--nav-projects);
    }

    .nav a:nth-child(3) {
        width: var(--nav-talk);
    }
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

main > :last-child {
    flex: 1;
}

.foot {
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr);
    border-top: var(--rule);
    font-size: var(--label-size);
    font-weight: 600;
    letter-spacing: var(--label-tracking);
    color: var(--muted);
}

.foot-home {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.5rem;
    border-right: var(--rule);
    color: var(--ink);
}

.foot-home:hover {
    text-decoration: none;
}

.foot-home:hover .mark-box {
    fill: var(--ink);
}

.foot-home:hover .mark-glyph {
    fill: var(--paper);
}

.foot-mail {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0 var(--pad);
}

.foot-mail-link {
    background: linear-gradient(currentColor, currentColor) left bottom / 0% 2px
        no-repeat;
    padding-bottom: 2px;
    transition: background-size 0.25s var(--ease-out);
}

.foot-mail-link:hover {
    background-size: 100% 2px;
    text-decoration: none;
}

.copy {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    margin: 0 -0.375rem;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font-size: var(--label-size);
    opacity: 0.75;
    cursor: pointer;
    transition:
        opacity 0.15s var(--ease-out),
        color 0.15s var(--ease-out);
}

.copy:hover {
    opacity: 1;
    color: var(--ink);
}

.copy .copy-done,
.copy.did .copy-idle {
    display: none;
}

.copy.did .copy-done {
    display: block;
}

.copy.did {
    opacity: 1;
    color: var(--ink);
}

.foot-links,
.lang {
    grid-column: 1 / -1;
    display: grid;
    border-top: var(--rule);
    text-transform: uppercase;
}

.foot-links {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.lang {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.foot-links li {
    display: flex;
}

.foot-links li + li,
.lang > * + * {
    border-left: var(--rule);
}

.foot-links a,
.lang a,
.lang [aria-current] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3.25rem;
    transition:
        background-color 0.18s var(--ease-out),
        color 0.25s var(--ease-out);
}

.foot-links a:hover,
.lang a:hover {
    background: color-mix(in oklab, var(--ink) 5%, transparent);
    color: var(--ink);
    text-decoration: none;
}

.lang [aria-current] {
    background: color-mix(in oklab, var(--ink) 8%, transparent);
    color: var(--ink);
}

.lang [aria-current]::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    background: var(--ink);
}

.foot-label {
    position: absolute;
    left: -100vw;
}

@media (min-width: 60rem) {
    .foot {
        display: flex;
        align-items: center;
        gap: 2rem;
        min-height: clamp(4.5rem, 10vh, 5.5rem);
        padding: 0 var(--pad);
    }

    .foot-home {
        display: none;
    }

    .foot-mail {
        padding: 0;
    }

    .foot-links,
    .lang {
        display: flex;
        align-items: center;
        border-top: 0;
    }

    .foot-links {
        gap: 2rem;
        margin-left: auto;
    }

    .foot-links li + li,
    .lang > * + * {
        border-left: 0;
    }

    .lang {
        padding-left: 2rem;
        border-left: var(--rule-faint);
    }

    .lang [aria-current] {
        display: none;
    }

    .foot-links a,
    .lang a {
        flex: none;
        min-height: auto;
        background: linear-gradient(currentColor, currentColor) left bottom / 0%
            2px no-repeat;
        padding-bottom: 2px;
        transition:
            background-size 0.25s var(--ease-out),
            color 0.25s var(--ease-out);
    }

    .foot-links a:hover,
    .lang a:hover {
        background: linear-gradient(currentColor, currentColor) left bottom /
            100% 2px no-repeat;
    }

    .lang a::after {
        content: '→';
        margin-left: 0.5rem;
        font-weight: 400;
        color: var(--faint);
    }

    .foot-label {
        position: static;
        left: auto;
    }
}

.hero {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    border-bottom: var(--rule);
}

.hero-name {
    padding: 2.5rem var(--pad) 2.75rem;
}

.hero .display {
    white-space: nowrap;
}

.hero .display .word span {
    display: inline-block;
    animation: char-rise 0.6s var(--ease-out) both;
    animation-delay: calc(var(--i) * 32ms);
}

.kilo,
.pj-kr {
    --kr-canvas: light-dark(oklch(96% 0 0), oklch(21.8% 0 0));
    --kr-hover: light-dark(oklch(94% 0 0), oklch(24.5% 0 0));
    --kr-ink: light-dark(oklch(20.5% 0 0), oklch(92.2% 0 0));
    --kr-muted: light-dark(oklch(43.9% 0 0), oklch(70.8% 0 0));
    --kr-accent: light-dark(
        oklch(54.6% 0.245 262.881),
        oklch(62.3% 0.214 259.815)
    );
    --kr-accent-press: light-dark(
        oklch(48.8% 0.243 264.376),
        oklch(66% 0.21 262.881)
    );
    background: var(--kr-canvas);
    color: var(--kr-ink);
    font-family: 'Nunito', ui-rounded, var(--font-sans);
}

.kilo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: background-color 0.15s var(--ease-out);
}

.kilo:hover {
    background: var(--kr-hover);
    text-decoration: none;
}

.kilo-hero {
    display: none;
}

.kilo-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 1.5625rem;
    font-weight: 900;
    letter-spacing: -0.025em;
    line-height: 1.2;
}

.kilo-brand svg {
    width: 2rem;
    height: 2rem;
    flex: none;
}

.kilo-text {
    max-width: 34ch;
    margin-top: 0.75rem;
    font-size: 0.9375rem;
    font-weight: 650;
    letter-spacing: -0.021em;
    color: var(--kr-muted);
    text-wrap: pretty;
}

.kilo-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.5rem;
    margin-top: 1.125rem;
    padding: 0 1.125rem;
    border-radius: 1rem;
    background: var(--kr-accent);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    transition: background-color 0.15s var(--ease-out);
}

.kilo:hover .kilo-cta,
.pj-kr .kilo-cta:hover {
    background: var(--kr-accent-press);
    text-decoration: none;
}

.kilo-cta .icon {
    transition: transform 0.18s var(--ease-out);
}

.kilo:hover .kilo-cta .icon,
.pj-kr .kilo-cta:hover .icon {
    transform: translateX(0.25rem);
}

@keyframes char-rise {
    from {
        opacity: 0;
        transform: translateY(0.45em);
        filter: blur(5px);
    }
}

@keyframes block-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

.lede {
    max-width: 34ch;
    font-size: 1rem;
    color: var(--soft);
    text-wrap: pretty;
}

@media (min-width: 60rem) {
    .hero-name {
        display: flex;
        align-items: center;
        padding: clamp(1.25rem, 3.5vh, 3rem) var(--pad)
            clamp(1rem, 3vh, 2.75rem);
    }

    .kilo-hero {
        display: flex;
        justify-content: center;
        width: var(--col-hero);
        padding: 1.25rem 2rem;
        border-left: var(--rule);
    }

    .lede {
        max-width: 42ch;
        font-size: 1.3125rem;
        line-height: 1.5;
    }
}

.split {
    display: grid;
}

.now,
.recent,
.kilo-band {
    padding: 2.25rem var(--pad);
}

.now,
.kilo-band {
    border-bottom: var(--rule);
}

.now,
.pj-ap {
    --ap-canvas: light-dark(#eef0f4, #171b26);
    --ap-ink: light-dark(#121724, #eaedf4);
    --ap-ink-2: light-dark(#4b5567, #a6afc2);
    --ap-ink-3: light-dark(#646d82, #8891a3);
    --ap-amber: light-dark(oklch(0.66 0.155 62), oklch(0.79 0.15 72));
    --ap-amber-press: light-dark(oklch(0.6 0.155 60), oklch(0.72 0.15 70));
    --ap-on-amber: light-dark(#2a1c02, #1a1303);
    --ap-amber-ink: light-dark(oklch(0.52 0.16 58), oklch(0.82 0.13 72));
    --ap-amber-soft: light-dark(
        oklch(0.72 0.15 66 / 0.16),
        oklch(0.79 0.15 72 / 0.13)
    );
    --ap-amber-stem: light-dark(#c5821e, #e2a23b);
    --ap-panel: light-dark(#fff, #232a3a);
    --ap-panel-2: light-dark(#f4f6f9, #2b3344);
    --ap-line: light-dark(#e2e6ec, #353f58);
    --ap-line-soft: light-dark(#eceff3, #2a3346);
    --ap-shadow-1: light-dark(rgb(18 23 36 / 0.06), rgb(0 0 0 / 0.5));
    --ap-shadow-2: light-dark(rgb(18 23 36 / 0.24), rgb(0 0 0 / 0.66));
    --ap-grid: light-dark(
        color-mix(in srgb, #d0d6e0 55%, transparent),
        color-mix(in srgb, #455271 26%, transparent)
    );
    background-color: var(--ap-canvas);
    color: var(--ap-ink);
}

.now {
    --ap-head: 'Space Grotesk', var(--font-sans);
    --ap-body: 'Hanken Grotesk', system-ui, sans-serif;
    --ap-num: 'JetBrains Mono', var(--font-mono);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: hidden;
    background-image:
        linear-gradient(var(--ap-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--ap-grid) 1px, transparent 1px);
    background-size:
        40px 40px,
        40px 40px;
}

.now-intro {
    display: contents;
}

.now .ap-list {
    order: 1;
}

.now .ap-cta {
    order: 2;
}

.ap-logo svg {
    height: clamp(2.5rem, 2.2rem + 1.2vw, 3.375rem);
}

.now-text {
    max-width: 46ch;
    margin-top: 1rem;
    color: var(--ap-ink-2);
    text-wrap: pretty;
}

.ap-list {
    width: 100%;
    max-width: 26rem;
    margin-top: 1.125rem;
    border: 1px solid var(--ap-line);
    border-radius: 6px;
    overflow: hidden;
    background: var(--ap-panel);
    box-shadow:
        0 1px 2px var(--ap-shadow-1),
        0 18px 38px -18px var(--ap-shadow-2);
    font-family: var(--ap-body);
    font-size: 0.75rem;
    line-height: 1.4;
}

.apl-bar {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.75rem;
    background: var(--ap-panel-2);
    border-bottom: 1px solid var(--ap-line-soft);
}

.apl-bar i {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--ap-line);
}

.apl-url {
    margin-left: 0.375rem;
    font-size: 0.6875rem;
    color: var(--ap-ink-3);
}

.apl-url,
.apl-sum,
.apw-num,
.apm-num {
    font-family: var(--ap-num);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.apl-group {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 0.5rem 0.75rem 0.25rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    color: var(--ap-ink-3);
}

.apl-group span + span {
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.apl-group-next {
    border-top: 1px solid var(--ap-line-soft);
}

.apl-row {
    display: grid;
    grid-template-columns: 4.75rem 1fr 5.5rem;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 0.75rem;
}

.apl-row-line {
    border-top: 1px solid var(--ap-line-soft);
}

.apl-ref {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    font-family: var(--ap-num);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--ap-ink-3);
}

.apl-ref em {
    display: grid;
    place-items: center;
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    border-radius: 3px;
    background: var(--ap-amber-soft);
    color: var(--ap-amber-ink);
    font-family: var(--ap-head);
    font-style: normal;
    font-weight: 700;
    font-size: 0.625rem;
    letter-spacing: 0;
}

.apl-sum {
    text-align: right;
}

.apl-total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--ap-line);
    background: var(--ap-panel-2);
}

.apl-total span:first-child {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    color: var(--ap-ink-3);
}

.apl-total .apl-sum {
    font-weight: 600;
}

.ap-duo {
    display: none;
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.0625rem 0.4375rem;
    border-radius: 3px;
    border: 1px solid;
    font-size: 0.6875rem;
    font-weight: 500;
}

.chip::before {
    content: '';
    width: 0.3125rem;
    height: 0.3125rem;
    border-radius: 50%;
    background: currentColor;
}

.chip-sent {
    background: light-dark(
        oklch(0.58 0.14 244 / 0.11),
        oklch(0.72 0.12 244 / 0.14)
    );
    border-color: light-dark(
        oklch(0.55 0.15 244 / 0.28),
        oklch(0.72 0.12 244 / 0.3)
    );
    color: light-dark(oklch(0.5 0.15 244), oklch(0.82 0.1 244));
}

.chip-paid {
    background: light-dark(
        oklch(0.62 0.13 158 / 0.13),
        oklch(0.74 0.13 158 / 0.14)
    );
    border-color: light-dark(
        oklch(0.6 0.14 158 / 0.3),
        oklch(0.74 0.13 158 / 0.3)
    );
    color: light-dark(oklch(0.5 0.13 158), oklch(0.84 0.11 158));
}

@media (min-width: 64rem) {
    .now .ap-list {
        display: none;
    }

    .now-intro {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        width: 100%;
    }

    .now-intro .ap-logo svg {
        height: 2.5rem;
    }

    .now-intro .now-text {
        flex: 1;
        margin-top: 0;
    }

    .now-intro .ap-cta {
        flex: none;
        margin: 0 0 0 auto;
    }

    .ap-duo {
        display: block;
        position: relative;
        order: 1;
        width: 100%;
        min-height: 27rem;
        margin-top: 1rem;
    }

    .apw {
        width: auto;
        margin: 0.5rem 0 0 5.3125rem;
        border: 1px solid var(--ap-line);
        border-radius: 6px;
        overflow: hidden;
        background: var(--ap-panel);
        box-shadow:
            0 1px 2px var(--ap-shadow-1),
            0 18px 38px -18px var(--ap-shadow-2);
        font-family: var(--ap-body);
        font-size: 0.75rem;
        line-height: 1.4;
    }

    .apw .apl-bar {
        padding: 0.5rem 1rem;
    }

    .apw-toolbar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0.75rem 1rem 0;
    }

    .apw-title {
        font-family: var(--ap-head);
        font-size: 1rem;
        font-weight: 600;
    }

    .apw-new {
        display: inline-flex;
        align-items: center;
        height: 1.75rem;
        padding: 0 0.75rem;
        border: 1px solid var(--ap-amber-press);
        border-radius: 4px;
        background: var(--ap-amber);
        color: var(--ap-on-amber);
        font-size: 0.6875rem;
        font-weight: 600;
    }

    .apw-agg {
        padding: 0.375rem 1rem 0.75rem;
        font-size: 0.71875rem;
        color: var(--ap-ink-2);
    }

    .apw-row {
        display: grid;
        grid-template-columns: 6.75rem 1fr 6.25rem 5.75rem;
        align-items: center;
        gap: 0.875rem;
        padding: 0.6875rem 1rem;
        border-top: 1px solid var(--ap-line-soft);
    }

    .apw-head {
        padding: 0.4375rem 1rem;
        font-size: 0.65625rem;
        font-weight: 600;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--ap-ink-3);
    }

    .apw .apl-ref {
        font-size: 0.6875rem;
    }

    .apw-client {
        font-weight: 500;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .apw-sum {
        text-align: right;
    }

    .apm {
        position: absolute;
        left: 0;
        top: 1.75rem;
        width: 11.625rem;
        border: 6px solid #17181c;
        border-radius: 30px;
        outline: 1px solid light-dark(transparent, #3a4358);
        background: var(--ap-panel);
        box-shadow: 0 24px 48px -20px
            light-dark(rgb(18 23 36 / 0.5), rgb(0 0 0 / 0.8));
        overflow: hidden;
    }

    .apm-screen {
        position: relative;
        width: 10.875rem;
        height: 24.375rem;
        border-radius: 24px;
        overflow: hidden;
        background: light-dark(#fff, #171b26);
        color: var(--ap-ink);
        font-family: var(--ap-body);
        font-size: 0.625rem;
        line-height: 1.4;
    }

    .apm-island {
        position: absolute;
        left: 50%;
        top: 7px;
        width: 54px;
        height: 16px;
        margin-left: -27px;
        border-radius: 8px;
        background: #000;
        border: 1px solid light-dark(transparent, #2e3850);
    }

    .apm-docbar {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 26px 10px 6px;
        border-bottom: 1px solid var(--ap-line-soft);
    }

    .apm-docbar svg {
        width: 11px;
        height: 11px;
        fill: none;
        stroke: var(--ap-ink-2);
        stroke-width: 2.6;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    .apm-docbar em {
        display: grid;
        place-items: center;
        width: 16px;
        height: 16px;
        border-radius: 3px;
        background: var(--ap-amber-soft);
        color: var(--ap-amber-ink);
        font-family: var(--ap-head);
        font-style: normal;
        font-weight: 700;
        font-size: 9px;
    }

    .apm-docbar .apm-num {
        font-size: 9px;
        color: var(--ap-ink-3);
    }

    .apm-docbar b {
        margin-left: auto;
        color: var(--ap-ink-3);
        font-weight: 700;
        letter-spacing: 1px;
    }

    .apm-body {
        padding: 8px 10px 0;
    }

    .apm-label {
        margin-top: 6px;
        font-size: 6.5px;
        font-weight: 700;
        letter-spacing: var(--label-tracking);
        text-transform: uppercase;
        color: var(--ap-ink-3);
    }

    .apm-label:first-child {
        margin-top: 0;
    }

    .apm-objet {
        margin-top: 2px;
        font-weight: 600;
    }

    .apm-req {
        color: var(--ap-amber-ink);
    }

    .apm-field {
        margin-top: 3px;
        padding: 5px 7px;
        border: 1px solid var(--ap-line);
        border-radius: 4px;
        background: light-dark(#fff, #1d2230);
        font-weight: 500;
    }

    .apm-addr {
        margin-top: 2px;
        font-size: 8px;
        color: var(--ap-ink-2);
    }

    .apm-line {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 6px;
        padding: 4px 0;
        border-bottom: 1px solid var(--ap-line-soft);
    }

    .apm-line-name {
        display: block;
        font-weight: 600;
    }

    .apm-line-sub {
        display: block;
        font-size: 8px;
        color: var(--ap-ink-3);
    }

    .apm-add {
        display: inline-flex;
        align-items: center;
        height: 18px;
        margin-top: 6px;
        padding: 0 9px;
        border-radius: 4px;
        background: var(--ap-amber);
        color: var(--ap-on-amber);
        font-size: 9px;
        font-weight: 600;
    }

    .apm-tot {
        display: flex;
        justify-content: space-between;
        margin-top: 2px;
        font-size: 9px;
        color: var(--ap-ink-3);
    }

    .apm-tot .apm-num {
        color: var(--ap-ink);
    }

    .apm-tot-first {
        margin-top: 7px;
        padding-top: 5px;
        border-top: 1px solid var(--ap-line-soft);
    }

    .apm-sticky {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 7px 10px 12px;
        border-top: 1px solid var(--ap-line);
        background: var(--ap-panel);
    }

    .apm-sticky-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .apm-ttc-label {
        display: block;
        font-size: 7px;
        color: var(--ap-ink-3);
    }

    .apm-ttc {
        display: block;
        font-size: 11.5px;
        font-weight: 600;
        color: var(--ap-amber-ink);
    }

    .apm-go {
        display: inline-flex;
        align-items: center;
        height: 26px;
        padding: 0 12px;
        border-radius: 4px;
        background: var(--ap-amber);
        color: var(--ap-on-amber);
        font-size: 10px;
        font-weight: 600;
    }

    .apm-home {
        width: 46px;
        height: 4px;
        margin: 8px auto 0;
        border-radius: 2px;
        background: var(--ap-ink);
        opacity: 0.55;
    }
}

@media (min-width: 90rem) {
    .now {
        flex-direction: row;
        align-items: stretch;
        gap: 2.5rem;
    }

    .now-intro {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 16.25rem;
        flex: none;
    }

    .now-intro .ap-logo svg {
        height: clamp(2.5rem, 2.2rem + 1.2vw, 3.375rem);
    }

    .now-intro .now-text {
        flex: none;
        margin-top: 1rem;
    }

    .now-intro .ap-cta {
        margin: 1.25rem 0 0;
    }

    .ap-duo {
        order: 0;
        width: auto;
        flex: 1;
        margin-top: 0;
    }

    .apw {
        max-width: 46rem;
    }
}

.ap-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    min-height: 2.75rem;
    margin-top: 1.25rem;
    padding: 0 1.25rem;
    border: 1px solid var(--ap-amber-press);
    border-radius: 4px;
    background: var(--ap-amber);
    color: var(--ap-on-amber);
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: background-color 0.15s var(--ease-out);
}

.ap-cta:hover {
    background: var(--ap-amber-press);
    text-decoration: none;
}

.ap-cta .icon {
    transition: transform 0.18s var(--ease-out);
}

.ap-cta:hover .icon {
    transform: translateX(0.25rem);
}

.compact {
    margin: 0.75rem -0.75rem 0;
    border-top: var(--rule-faint);
}

.compact-link {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 0.9375rem 0.75rem;
    border-bottom: var(--rule-faint);
    transition: background-color 0.15s var(--ease-out);
}

.compact li:last-child .compact-link {
    border-bottom: 0;
}

.compact-link:hover {
    background: color-mix(in oklab, var(--ink) 6%, transparent);
    text-decoration: none;
}

.compact-date {
    flex: none;
    font-size: var(--label-size);
    color: var(--muted);
}

.compact-title {
    font-size: 1.0625rem;
    font-weight: 500;
    line-height: 1.35;
    text-wrap: pretty;
}

.recent {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.more,
.pj-ghost {
    font-size: var(--label-size);
    font-weight: 600;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    background: linear-gradient(currentColor, currentColor) left bottom / 100%
        1px no-repeat;
    padding-bottom: 2px;
    transition: background-size 0.2s var(--ease-out);
}

.more {
    display: inline-block;
    align-self: flex-end;
    margin-top: 1rem;
}

.more:hover,
.pj-ghost:hover,
.pj-go:hover .pj-ghost {
    background-size: 100% 3px;
    text-decoration: none;
}

.pj-ghost .icon:last-child {
    transition: transform 0.18s var(--ease-out);
}

.pj-ghost:hover .icon:last-child,
.pj-go:hover .pj-ghost .icon:last-child {
    transform: translate(0.125rem, -0.125rem);
}

@media (min-width: 60rem) {
    .split {
        grid-template-columns: minmax(0, 1fr) var(--col-recent);
    }

    .kilo-band {
        display: none;
    }

    .now {
        border-bottom: 0;
    }

    .recent {
        border-left: var(--rule);
    }

    .now,
    .recent {
        padding: clamp(1.125rem, 2vh, 2.25rem) var(--pad);
    }

    .compact-link {
        padding: 0.75rem 0.75rem;
    }

    .compact-title {
        font-size: 1.125rem;
    }
}

@media (min-width: 60rem) and (max-height: 53rem) {
    .kilo-brand svg {
        width: 1.75rem;
        height: 1.75rem;
    }

    .kilo-text {
        margin-top: 0.5rem;
    }

    .kilo-cta {
        min-height: 2.25rem;
        margin-top: 0.875rem;
    }

    .now-intro .ap-logo svg {
        height: 2.25rem;
    }

    .ap-cta {
        min-height: 2.5rem;
    }
}

/* zoom does not compose: every rung states its own absolute value, narrowest
   and shortest last. */
@media (min-width: 64rem) and (max-width: 89.99rem) {
    .ap-duo {
        zoom: 0.85;
    }
}

@media (min-width: 64rem) and (max-width: 72.49rem) {
    .ap-duo {
        zoom: 0.78;
    }
}

@media (min-width: 64rem) and (max-width: 89.99rem) and (max-height: 53rem) {
    .ap-duo {
        zoom: 0.72;
    }
}

@media (min-width: 64rem) and (max-width: 72.49rem) and (max-height: 53rem) {
    .ap-duo {
        zoom: 0.68;
    }
}

@media (min-width: 90rem) and (max-height: 53rem) {
    .ap-duo {
        zoom: 0.85;
    }
}

.page-head {
    padding: 2.5rem var(--pad) 2.25rem;
    border-bottom: var(--rule);
}

.page-head > * {
    animation: block-rise 0.5s var(--ease-out) both;
}

.page-head .lede {
    margin-top: 1.25rem;
    animation-delay: 90ms;
}

.page-head-split {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem 1.5rem;
}

.feed-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    animation-delay: 90ms;
    background: linear-gradient(currentColor, currentColor) left bottom / 0% 2px
        no-repeat;
    padding-bottom: 2px;
    transition:
        background-size 0.25s var(--ease-out),
        color 0.25s var(--ease-out);
}

.feed-link:hover {
    background-size: 100% 2px;
    color: var(--ink);
    text-decoration: none;
}

.entry + .entry {
    border-top: var(--rule-faint);
}

.entry-go {
    display: block;
    padding: 1.375rem var(--pad);
    transition: background-color 0.15s var(--ease-out);
}

a.entry-go:hover,
.pj-row:hover {
    background: color-mix(in oklab, var(--ink) 5%, transparent);
    text-decoration: none;
}

.entry-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    max-width: 55rem;
}

.entry-title {
    font-size: 1.1875rem;
    font-weight: 500;
    line-height: 1.3;
    text-wrap: pretty;
}

.entry-meta {
    display: flex;
    flex: none;
    align-items: baseline;
    gap: 0.625rem;
}

.entry-fr {
    padding: 0.0625rem 0.375rem;
    border: var(--rule-faint);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: var(--label-tracking);
    color: var(--muted);
}

.entry-date {
    flex: none;
    font-size: var(--label-size);
    font-variant-numeric: tabular-nums;
    color: var(--muted);
}

.entry-summary {
    display: block;
    max-width: 62ch;
    margin-top: 0.5rem;
    color: var(--soft);
    text-wrap: pretty;
}

@media (min-width: 60rem) {
    .page-head {
        padding: 4rem var(--pad) 3rem;
    }

    .entry-go {
        padding: 1.625rem var(--pad);
    }

    .entry-head {
        gap: 1.5rem;
    }

    .entry-title {
        font-size: 1.5rem;
        line-height: 1.25;
    }
}

.say {
    padding: 0.5rem var(--pad) 2.25rem;
    border-bottom: var(--rule);
}

.field {
    display: block;
    max-width: 42rem;
    padding: 1.25rem 0 0.75rem;
    border-bottom: var(--rule-faint);
    transition: border-color 0.15s var(--ease-out);
}

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

.field-label {
    display: block;
    font-size: var(--label-size);
    font-weight: 600;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    color: var(--muted);
}

.field-input {
    display: block;
    width: 100%;
    margin-top: 0.375rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 1.1875rem;
    line-height: 1.4;
    resize: vertical;
}

/* The rule under the field turns to ink instead. */
.field-input:focus-visible {
    outline: none;
}

.trap {
    position: absolute;
    left: -100vw;
}

.send {
    display: inline-block;
    margin-top: 1.75rem;
    padding: 0.875rem 1.75rem;
    border: 0;
    background: var(--ink);
    color: var(--paper);
    font: inherit;
    font-size: var(--label-size);
    font-weight: 600;
    letter-spacing: var(--label-tracking);
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s var(--ease-out);
}

.send:hover {
    background: var(--soft);
}

@media (min-width: 60rem) {
    .say {
        padding-bottom: 3rem;
    }

    .field {
        padding-top: 1.5rem;
    }

    .field-input {
        font-size: 1.5rem;
        line-height: 1.3;
    }
}

.pj-band {
    padding: 2.5rem var(--pad) 2.75rem;
    border-bottom: var(--rule);
}

.pj-copy {
    max-width: 46ch;
}

.pj-text {
    max-width: 52ch;
    margin-top: 1rem;
    color: var(--soft);
    text-wrap: pretty;
}

.pj-stack {
    margin-top: 0.75rem;
    font-size: var(--label-size);
    letter-spacing: 0.04em;
    color: var(--muted);
}

.pj-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
    margin-top: 1.5rem;
}

.pj-go {
    display: block;
    color: inherit;
}

.pj-go:hover {
    text-decoration: none;
}

/* The link's hit area is the card, drawn by a pseudo-element over it; the
   shots stack above so they keep their own click. */
.pj-go::after {
    content: '';
    position: absolute;
    inset: 0;
}

.pj-go:focus-visible {
    outline: 0;
}

.pj-card:has(.pj-go:focus-visible) {
    outline: 2px solid var(--ink);
    outline-offset: -2px;
}

.pj-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
}

.pj-ap {
    background-image:
        linear-gradient(var(--ap-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--ap-grid) 1px, transparent 1px);
    background-size: 40px 40px;
}

.pj-kr {
    --kr-dot: light-dark(oklch(0% 0 0 / 0.13), oklch(100% 0 0 / 0.13));
    background-image: radial-gradient(var(--kr-dot) 1px, transparent 1.5px);
    background-size: 22px 22px;
}

.pj-ap .pj-text,
.pj-ap .pj-stack {
    color: var(--ap-ink-2);
}

.pj-kr .kilo-text {
    margin-top: 1rem;
    font-size: 1rem;
}

.pj-kr .pj-stack {
    color: var(--kr-muted);
    font-weight: 650;
}

@media (max-width: 59.99rem) {
    .now,
    .kilo-band,
    .pj-copy {
        display: grid;
        grid-template-columns: max-content minmax(0, 1fr);
        /* 0.75rem, not the 1rem elsewhere: Kilorep's mark and pill want 276px
           of the 280px band at 320. */
        column-gap: 0.75rem;
        align-items: center;
        /* The page is a 100dvh grid: left alone, grid shares a tall window's
           surplus between the rows and pulls the block apart. */
        align-content: start;
    }

    .pj-copy {
        max-width: none;
    }

    .ap-logo,
    .kilo-brand {
        grid-area: 1 / 1;
    }

    .ap-cta,
    .kilo-cta {
        grid-area: 1 / 2;
        justify-self: end;
        margin-top: 0;
    }

    .pj-links {
        display: contents;
    }

    .pj-band .shots {
        margin-top: 2rem;
    }

    .now-text,
    .ap-list,
    .kilo-band .kilo-text,
    .pj-copy .pj-text,
    .pj-copy .kilo-text,
    .pj-copy .pj-stack,
    .pj-kr .pj-ghost {
        grid-column: 1 / -1;
    }

    .pj-kr .pj-ghost {
        justify-self: start;
        margin-top: 1.5rem;
    }
}

.shots {
    position: relative;
}

.shots-frame {
    overflow: hidden;
    border: 1px solid color-mix(in oklab, currentColor 22%, transparent);
    background: #fff;
    box-shadow: 0 18px 38px -18px rgb(0 0 0 / 0.45);
}

.shots-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.shots-track::-webkit-scrollbar {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .shots-track {
        scroll-behavior: auto;
    }
}

.shots-slide {
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.shots-open {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    cursor: zoom-in;
}

.shots-open img {
    display: block;
    width: 100%;
}

.shots-btn {
    position: absolute;
    top: calc(50% - 0.625rem);
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid color-mix(in oklab, currentColor 30%, transparent);
    border-radius: 50%;
    background: color-mix(in oklab, var(--paper) 80%, transparent);
    backdrop-filter: blur(4px);
    color: inherit;
    font-size: 1rem;
    cursor: pointer;
    transform: translateY(-50%);
    transition: background-color 0.15s var(--ease-out);
}

.shots-btn:hover {
    background: var(--paper);
}

.shots-prev {
    left: 0.75rem;
}

.shots-next {
    right: 0.75rem;
}

.shots-dots {
    display: flex;
    justify-content: center;
    gap: 0.4375rem;
    margin-top: 0.875rem;
}

.shots-dots i {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.25;
    transition: opacity 0.2s var(--ease-out);
}

.shots-dots i.on {
    opacity: 1;
}

.lightbox {
    width: 100vw;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
}

.lightbox[open] {
    display: grid;
    place-items: center;
}

.lightbox::backdrop {
    background: rgb(0 0 0 / 0.82);
}

body:has(.lightbox[open]) {
    overflow: hidden;
}

.lightbox-stage {
    display: contents;
}

.lightbox img {
    display: block;
    width: auto;
    height: auto;
    max-width: 92vw;
    max-height: 92dvh;
    box-shadow: 0 30px 80px -20px rgb(0 0 0 / 0.8);
}

.lightbox .shots-btn {
    top: 50%;
}

.lightbox .shots-btn[hidden] {
    display: none;
}

.lightbox-prev {
    left: 1rem;
}

.lightbox-next {
    right: 1rem;
}

.lightbox .lightbox-close {
    top: 1rem;
    right: 1rem;
    transform: none;
}

.kr-shots {
    aspect-ratio: 16 / 11;
}

.kr-desktop,
.kr-phone {
    position: absolute;
}

.kr-desktop {
    top: 0;
    left: 0;
    width: 85%;
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--kr-ink) 18%, transparent);
    border-radius: 0.5rem;
    background: var(--kr-canvas);
    box-shadow: 0 18px 38px -18px rgb(0 0 0 / 0.45);
}

/* iPhone 15 Pro proportions in container units: a 393 pt screen, 55 pt
   corners, a 126 x 37 pt island 11 pt down, all behind a 3 % bezel. The
   bezel and the island are pseudo-elements: a container's own box cannot
   be sized in its own units. */
.kr-phone {
    right: 0;
    bottom: 0;
    width: 27%;
    container-type: inline-size;
}

.kr-phone::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16.2cqw;
    background: #0b0b0c;
    box-shadow:
        inset 0 0 0 1px rgb(255 255 255 / 0.14),
        0 24px 44px -16px rgb(0 0 0 / 0.55);
}

.kr-phone .shots-open {
    position: relative;
    width: auto;
    margin: 3cqw;
    overflow: hidden;
    border-radius: 13.2cqw;
    background: var(--kr-canvas);
}

.kr-phone::after {
    content: '';
    position: absolute;
    top: 5.6cqw;
    left: 50%;
    width: 30.1cqw;
    aspect-ratio: 126 / 37;
    border-radius: 100vmax;
    background: #000;
    transform: translateX(-50%);
}

.pj-duo {
    border-bottom: var(--rule);
}

.pj-card {
    position: relative;
    padding: 2rem var(--pad);
    transition: background-color 0.15s var(--ease-out);
}

.pj-card:has(.pj-go:hover) {
    background: color-mix(in oklab, var(--ink) 5%, transparent);
}

.pj-card + .pj-card {
    border-top: var(--rule-faint);
}

.pj-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.625rem 1.5rem;
}

.pj-name {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.25;
}

.pj-card .shots {
    z-index: 1;
    margin-top: 1.5rem;
}

.pj-name-mark {
    display: inline-flex;
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
}

.pj-name-mark svg,
.pj-row-mark svg {
    width: 100%;
    height: 100%;
}

.pj-block {
    padding-bottom: 1.5rem;
}

.pj-block-head {
    padding: 2.5rem var(--pad) 0.875rem;
}

.pj-row-mark {
    display: inline-flex;
    flex: none;
    width: 1.125rem;
    height: 1.125rem;
    /* Centred on the name's line box (1.0625rem at 1.4). */
    margin-top: 0.1875rem;
}

.pj-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0.9375rem var(--pad);
    border-top: var(--rule-faint);
    transition: background-color 0.15s var(--ease-out);
}

/* 11rem is the floor the description needs to read; below it the link drops
   under the row. That happens at 320 and nowhere else. */
.pj-row-body {
    flex: 1 1 11rem;
    min-width: 0;
}

.pj-row-name {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    font-size: 1.0625rem;
    font-weight: 500;
}

.pj-row-desc {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.9375rem;
    color: var(--soft);
    text-wrap: pretty;
}

.pj-row-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    flex: none;
    margin-left: auto;
    padding-top: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.pj-fork {
    padding: 0.0625rem 0.375rem;
    border: var(--rule-faint);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}

@media (min-width: 60rem) {
    .pj-band {
        display: grid;
        grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
        gap: 3.5rem;
        align-items: center;
        padding: 3.5rem var(--pad);
    }

    .shots {
        display: block;
    }

    .pj-duo {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .pj-card {
        padding: 2.25rem var(--pad);
    }

    .pj-card + .pj-card {
        border-top: 0;
        border-left: var(--rule-faint);
    }

    .pj-row {
        display: grid;
        grid-template-columns: 1.125rem 13rem minmax(0, 1fr) auto;
        gap: 1.25rem;
        align-items: center;
    }

    .pj-row-mark {
        margin-top: 0;
    }

    .pj-row-body {
        display: contents;
    }

    .pj-row-desc {
        margin-top: 0;
    }

    .pj-row-link {
        padding-top: 0;
    }
}

.prose {
    width: 100%;
    max-width: calc(40rem + 2 * var(--pad));
    margin-inline: auto;
    padding: 2.5rem var(--pad) 3.5rem;
}

.prose-head {
    padding-bottom: 1.75rem;
    margin-bottom: 1.75rem;
    border-bottom: var(--rule-faint);
    text-align: center;
}

.prose-head h1 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.25rem, 1.75rem + 2vw, 3rem);
    line-height: 0.9;
    text-transform: uppercase;
    text-wrap: balance;
}

.prose-head time {
    display: block;
    margin-top: 0.875rem;
    font-size: var(--label-size);
    color: var(--muted);
}

.prose-tldr {
    padding: 1.375rem 1.5rem 1.5rem;
    margin-bottom: 2.25rem;
    background: color-mix(in oklab, var(--ink) 5%, transparent);
}

.prose-tldr .eyebrow {
    margin: 0;
}

.prose-tldr p:last-child {
    margin-top: 0.5rem;
    font-size: 1rem;
    line-height: 1.6;
    font-style: italic;
    color: var(--soft);
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose pre,
.prose figure {
    margin-top: 1.125rem;
    color: var(--soft);
    text-wrap: pretty;
}

.prose h2 {
    margin-top: 2.5rem;
    font-size: 1.375rem;
    font-weight: 600;
    line-height: 1.25;
    text-wrap: balance;
}

.prose h3 {
    margin-top: 2rem;
    font-size: 1.125rem;
    font-weight: 600;
}

.prose a,
.lede a {
    background: linear-gradient(currentColor, currentColor) left bottom / 100%
        1px no-repeat;
    padding-bottom: 1px;
    transition: background-size 0.2s var(--ease-out);
}

.prose a:hover,
.lede a:hover {
    background-size: 100% 3px;
    text-decoration: none;
}

.prose ul,
.prose ol {
    padding-left: 1.25rem;
    list-style: disc;
}

.prose ol {
    list-style: decimal;
}

.prose li + li {
    margin-top: 0.375rem;
}

.prose blockquote {
    padding-left: 1.25rem;
    border-left: var(--rule);
    font-style: italic;
}

.prose pre {
    padding: 1.125rem 1.25rem;
    overflow-x: auto;
    background: color-mix(in oklab, var(--ink) 5%, transparent);
    font-family: var(--font-code);
    font-size: 0.8125rem;
    line-height: 1.7;
}

.prose .tok-comment {
    color: var(--code-comment);
}

.prose .tok-punct {
    color: var(--code-punct);
}

.prose .tok-string {
    color: var(--code-string);
}

.prose .tok-keyword {
    color: var(--code-keyword);
}

.prose .tok-fn {
    color: var(--code-fn);
}

.prose .tok-number {
    color: var(--code-number);
}

.prose :not(pre) > code {
    padding: 0.1em 0.35em;
    background: color-mix(in oklab, var(--ink) 5%, transparent);
    font-family: var(--font-code);
    font-size: 0.875em;
}

.prose p:has(> img) {
    margin-top: 2rem;
}

.prose img {
    margin-inline: auto;
    border: var(--rule-faint);
}

/* This capture draws its own rounded corners and 8px margin; a rule would sit
   off the artwork. */
.prose img[src*='/ghostty-'] {
    border: 0;
}

.prose img[src*='/meme-'] {
    width: 20rem;
}

.prose img[src*='/meme-compute'] {
    width: 16rem;
}

.prose img[src*='/meme-pigeon'] {
    width: 25rem;
}

.prose p:has(> img) + p:has(> em:only-child) {
    margin-top: 0.875rem;
    text-align: center;
    font-size: 0.9375rem;
    color: var(--muted);
}

.prose hr {
    margin-top: 2.5rem;
    border: 0;
    border-top: var(--rule-faint);
}

@media (min-width: 60rem) {
    .prose {
        padding: 4.5rem var(--pad) 6rem;
    }

    .prose-head {
        padding-bottom: 2.25rem;
        margin-bottom: 2.25rem;
    }

    .prose p,
    .prose ul,
    .prose ol {
        font-size: 1.125rem;
        line-height: 1.65;
    }

    .prose h2 {
        margin-top: 3.5rem;
        font-size: 1.875rem;
    }
}

/* Rests at 100% so a page that never animates (reduced motion, no @property)
   still shows every rule. */
@property --draw {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 100%;
}

:root {
    --rule-ink: var(--ink);
    --draw-time: 0.7s;
}

@keyframes draw {
    from {
        --draw: 0%;
    }
}

.bar,
.nav a,
.hero,
.kilo-hero,
.now,
.recent,
.kilo-band,
.page-head,
.say,
.pj-band,
.pj-duo,
.foot,
.foot-home,
.foot-links,
.foot-links li + li,
.lang,
.lang > * + *,
.compact,
.compact-link,
.entry + .entry,
.entry-fr,
.pj-card + .pj-card,
.pj-row,
.pj-fork,
.prose-head,
.prose blockquote,
.prose img,
.prose hr {
    border-image: linear-gradient(
            to right,
            var(--rule-ink) var(--draw),
            transparent 0
        )
        1;
    animation: draw var(--draw-time) var(--ease-out) both;
    animation-delay: var(--draw-at, 0s);
}

.nav a,
.foot-home,
.foot-links li + li,
.lang > * + *,
.kilo-hero,
.recent,
.prose blockquote {
    border-image: linear-gradient(
            to bottom,
            var(--rule-ink) var(--draw),
            transparent 0
        )
        1;
}

.entry-fr,
.pj-fork,
.prose img {
    border-image: linear-gradient(
            to bottom right,
            var(--rule-ink) var(--draw),
            transparent 0
        )
        1;
}

.compact,
.compact-link,
.entry + .entry,
.entry-fr,
.pj-card + .pj-card,
.pj-row,
.pj-fork,
.prose-head,
.prose img,
.prose hr {
    --rule-ink: var(--faint);
}

.hero,
.kilo-hero,
.page-head,
.pj-band {
    --draw-at: 0.12s;
}

.now,
.recent,
.kilo-band,
.pj-duo,
.compact,
.entry + .entry,
.pj-card + .pj-card,
.prose-head {
    --draw-at: 0.24s;
}

.compact-link,
.pj-row,
.prose blockquote,
.prose img,
.prose hr {
    --draw-at: 0.3s;
}

.entry:nth-child(3),
.compact li:nth-child(2) .compact-link {
    --draw-at: 0.36s;
}

.entry:nth-child(4),
.compact li:nth-child(3) .compact-link {
    --draw-at: 0.42s;
}

.entry:nth-child(5),
.compact li:nth-child(4) .compact-link {
    --draw-at: 0.48s;
}

.entry:nth-child(6) {
    --draw-at: 0.54s;
}

.entry:nth-child(n + 7) {
    --draw-at: 0.6s;
}

.foot,
.foot-home {
    --draw-at: 0.4s;
}

.foot-links,
.foot-links li + li {
    --draw-at: 0.46s;
}

.lang,
.lang > * + * {
    --draw-at: 0.52s;
}

@media (min-width: 60rem) {
    .lang {
        --rule-ink: var(--faint);
        --draw-at: 0.46s;
        border-image: linear-gradient(
                to bottom,
                var(--rule-ink) var(--draw),
                transparent 0
            )
            1;
    }
}

.mark-box {
    /* The 27-unit square's perimeter. */
    stroke-dasharray: 108;
    animation: mark-draw var(--draw-time) var(--ease-out) both;
}

@keyframes mark-draw {
    from {
        stroke-dashoffset: 108;
    }
}