/* ==========================================================================
   Fonts
   ========================================================================== */

@font-face {
    font-family: "iA Writer Quattro";
    font-style: normal;
    font-display: swap;
    font-weight: 400;
    src:
        url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-normal.woff2)
            format("woff2"),
        url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-normal.woff)
            format("woff");
}

@font-face {
    font-family: "iA Writer Quattro";
    font-style: normal;
    font-display: swap;
    font-weight: 700;
    src:
        url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-700-normal.woff2)
            format("woff2"),
        url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-700-normal.woff)
            format("woff");
}

@font-face {
    font-family: "iA Writer Quattro";
    font-style: italic;
    font-display: swap;
    font-weight: 400;
    src:
        url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-italic.woff2)
            format("woff2"),
        url(https://cdn.jsdelivr.net/fontsource/fonts/ia-writer-quattro@latest/latin-400-italic.woff)
            format("woff");
}

/* ==========================================================================
   CSS Variables
   ========================================================================== */

:root {
    color-scheme: light dark;
    --bg-color: #fffcf0;
    --bg2-color: #f2f0e5;
    --bg3-color: #e6e4d9;
    --text-color: #1c1b1a;
    --text2-color: #6f6e69;
    --text3-color: #dc3c22;
    --text4-color: #dc3c22;
    --ui-color: #e6e4d9;
    --chip-color: #f2f0e5;
    --footer-bg: #002fa7;
    --footer-text: #e6e4d9;

    --max-width-desktop: 900px;
    --max-width-mobile: 600px;
    --menubar-height: 2.25rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #1c1b1a;
        --bg2-color: #282726;
        --bg3-color: #32312f;
        --text-color: #e6e4d9;
        --text2-color: #878580;
        --text3-color: #ffc857;
        --text4-color: #dc3c22;
        --ui-color: #454443;
        --chip-color: #282726;
    }
}

/* ==========================================================================
   Base / Reset
   ========================================================================== */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    background: var(--bg-color);
}

body {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background: var(--bg-color);
    margin: 0;
    padding: 0;
    width: 100vw;
}

a {
    color: var(--text3-color);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}

a:hover {
    border-bottom-color: var(--text3-color);
}

hr {
    border: none;
    border-top: 1px solid var(--ui-color);
    margin: 2rem 0;
}

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

.container {
    max-width: var(--max-width-mobile);
    margin: 0 auto;
    padding: 0 1rem 3rem;
    margin-top: 4rem;
}

@media (max-width: 900px) {
    .container p:first-of-type img,
    .container figure:first-of-type img {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        border: 0;
        border-bottom: 1px solid var(--text-color);
        height: 400px;
        object-fit: cover;
        margin-top: 0;
    }
    .container:has(p:first-of-type img),
    .container:has(figure:first-of-type img) {
        margin-top: calc(400px + 2rem);
    }
    .container figure:first-of-type figcaption {
        display: none;
    }
}

@media (min-width: 900px) {
    .container:has(p:first-of-type img),
    .container:has(figure:first-of-type img) {
        margin-top: 2rem;
        border-radius: 0.5rem;
    }
}

@media (min-width: 900px) {
    .container {
        max-width: var(--max-width-desktop);
    }
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--ui-color);
}

.site-header h1 {
    font-size: 1.25rem;
    font-weight: 900;
    margin: 0;
}

.site-header h1 a {
    border-bottom: none;
}

.site-header nav {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
}

.site-header nav a {
    color: var(--text2-color);
    border-bottom: none;
}

.site-header nav a:hover {
    color: var(--text-color);
}

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

.site-footer {
    border-top: 1px solid var(--ui-color);
    padding: 2rem 0;
    margin-top: 3rem;
}

.site-footer p {
    color: var(--text2-color);
    font-size: 0.9rem;
}

.site-footer a {
    color: var(--text2-color);
    border-bottom: none;
}

.site-footer a:hover {
    color: var(--text-color);
}

/* ==========================================================================
   Menu Bar
   ========================================================================== */

/* The macOS menu bar: a translucent strip across the top of the desk, with
   the app name at the left and the status items at the right. */
.menubar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--menubar-height);
    padding: 0.25rem 0.4rem;
    background: light-dark(rgb(255 252 240 / 55%), rgb(28 27 26 / 55%));
    backdrop-filter: blur(30px) saturate(1.8);
    -webkit-backdrop-filter: blur(30px) saturate(1.8);
    border-bottom: 0.5px solid light-dark(rgb(0 0 0 / 12%), rgb(255 255 255 / 12%));
    font-size: 0.75rem;
    color: var(--text-color);
    user-select: none;
}

/* The menu titles at the left and the status items at the right. Each one
   is its own target, as the apple and the app name are on macOS. */
.menubar-menus,
.menubar-status {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.menubar-item {
    display: flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border: none;
    border-bottom: none;
    border-radius: 4px;
    background: none;
    color: inherit;
    font: inherit;
    line-height: 1;
    cursor: pointer;
}

.menubar-app {
    font-weight: 700;
}

.menubar-glyph {
    width: 0.9rem;
    height: 0.9rem;
}

.menubar-feed {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* A menu title highlights when the pointer is over it. */
.menubar-item:hover {
    background: light-dark(rgb(0 0 0 / 8%), rgb(255 255 255 / 14%));
    opacity: 1;
}

.menubar-clock {
    padding: 0.2rem 0.4rem;
    font-variant-numeric: tabular-nums;
}

/* The clock and the feed take the most room; a phone drops them. */
@media (max-width: 800px) {
    .menubar-feed,
    .menubar-clock {
        display: none;
    }
}

/* ==========================================================================
   Media Grid (Index Page)
   ========================================================================== */

.media-sort-controls {
    display: flex;
    gap: 0.5rem;
}

/* macOS toolbar controls. A bezel with a highlight along the top, a hairline
   border, and a soft drop shadow; dark mode swaps in the graphite bezel. */
.media-sort-select,
.blogroll-export,
.window-search {
    --control-bg: light-dark(linear-gradient(#fff, #f7f7f7), linear-gradient(#6b6b70, #5e5e63));
    --control-border: light-dark(rgb(0 0 0 / 14%), rgb(0 0 0 / 45%));
    --control-highlight: light-dark(rgb(255 255 255 / 80%), rgb(255 255 255 / 14%));
    height: 22px;
    font-family: inherit;
    font-size: 0.78rem;
    line-height: 20px;
    color: light-dark(#1c1b1a, #fff);
    border: 1px solid var(--control-border);
    border-radius: 6px;
    cursor: default;
    white-space: nowrap;
}

.media-sort-select,
.blogroll-export {
    padding: 0 0.7rem;
    background: var(--control-bg);
    box-shadow:
        inset 0 1px 0 var(--control-highlight),
        0 0.5px 1px rgb(0 0 0 / 20%);
}

.media-sort-select:active,
.blogroll-export:active {
    background: light-dark(linear-gradient(#e8e8e8, #f0f0f0), linear-gradient(#7c7c81, #707075));
}

/* The pop-up's blue stepper badge. */
.media-sort-select {
    appearance: none;
    padding-right: 24px;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%233d8dff'/%3E%3Cstop offset='1' stop-color='%230a5fe6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='14' height='14' rx='3.5' fill='url(%23g)'/%3E%3Cpath d='M4.5 5.6L7 3.1l2.5 2.5M4.5 8.4L7 10.9l2.5-2.5' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
        var(--control-bg);
    background-repeat: no-repeat;
    background-position: right 3px center, 0 0;
    background-size: 14px 14px, auto;
}

.media-sort-select:active {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Crect width='14' height='14' rx='3.5' fill='%230a4fd0'/%3E%3Cpath d='M4.5 5.6L7 3.1l2.5 2.5M4.5 8.4L7 10.9l2.5-2.5' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"),
        light-dark(linear-gradient(#e8e8e8, #f0f0f0), linear-gradient(#7c7c81, #707075));
}

/* The search field is sunken rather than raised, with the glass at the left
   and a clear button that appears once there is text. */
.window-search {
    width: 9rem;
    padding: 0 0.4rem 0 1.45rem;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23929296' stroke-width='2.6' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cline x1='20.5' y1='20.5' x2='15.4' y2='15.4'/%3E%3C/svg%3E") 0.45rem center / 12px no-repeat,
        light-dark(#fff, rgb(255 255 255 / 7%));
    border-color: light-dark(rgb(0 0 0 / 14%), rgb(255 255 255 / 12%));
    box-shadow: inset 0 1px 1px light-dark(rgb(0 0 0 / 6%), rgb(0 0 0 / 30%));
    appearance: none;
}

.window-search::placeholder {
    color: light-dark(#8e8e93, #98989d);
}

.window-search::-webkit-search-cancel-button {
    width: 14px;
    height: 14px;
    margin-left: 0.25rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Ccircle cx='7' cy='7' r='7' fill='%23929296'/%3E%3Cpath d='M4.6 4.6l4.8 4.8M9.4 4.6L4.6 9.4' stroke='%23fff' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
    appearance: none;
    cursor: default;
}

.media-sort-select:focus-visible,
.blogroll-export:focus-visible,
.window-search:focus-visible {
    outline: 3px solid rgb(10 96 255 / 45%);
    outline-offset: 0;
}

.media-sort-select option {
    background: var(--bg-color);
    color: var(--text-color);
}

.media-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px;
}

.media-grid-item {
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border-bottom: none;
    background: var(--bg-color);
}

.media-grid-item img {
    width: 100%;
    height: 100% !important;
    border-radius: 0;
    margin-top: 0 !important;
    border: none;
    object-fit: cover;
    opacity: 0.75;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

/* A cover covers.js hasn't loaded yet; without this its alt text shows. */
.media-grid-item img:not([src]) {
    visibility: hidden;
}

.media-grid-item:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}

.media-grid-item[data-rating="9"] img,
.media-grid-item[data-rating="10"] img {
    border: 2px solid var(--text3-color) !important;
    opacity: 1 !important;
}

.media-grid-item-no-content {
    cursor: default;
}

.media-grid-item-no-content img {
    opacity: 0.5;
    border: 1px solid var(--text4-color) !important;
}

.media-grid-item-no-content:hover img {
    transform: none;
    opacity: 0.5;
}

/* ==========================================================================
   Desktop (Index Page)
   ========================================================================== */

/* The home page is a desk: a sticky note and a window per collection dressed
   as Notes, Safari, TV, and Contacts. Windows drag and resize; a click (a
   press that doesn't travel) opens one fullscreen. */
body.desktop {
    height: 100vh;
    overflow: hidden;
}

.content.desk {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    margin: 0;
    overflow: hidden;
}

/* --- Wallpapers ------------------------------------------------------------ */

/* Picked with data-wallpaper on the desk. */
.desk[data-wallpaper="dots"] {
    background-image: radial-gradient(
        color-mix(in srgb, var(--text2-color) 35%, transparent) 1px,
        transparent 1.5px
    );
    background-size: 24px 24px;
}

/* Graph paper. */
.desk[data-wallpaper="graph"] {
    background-image:
        linear-gradient(color-mix(in srgb, var(--text2-color) 16%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--text2-color) 16%, transparent) 1px, transparent 1px);
    background-size: 32px 32px;
}

/* Halftone: dots that thin out towards the top. */
.desk[data-wallpaper="halftone"] {
    background-image:
        linear-gradient(to top, transparent, var(--bg-color) 85%),
        radial-gradient(circle, color-mix(in srgb, var(--text2-color) 55%, transparent) 0 1.6px, transparent 2.2px);
    background-size: auto, 12px 12px;
}

/* Paper grain: the cream with a little tooth. */
.desk[data-wallpaper="grain"] {
    background-color: var(--bg2-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.18 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 240px 240px;
}

/* Aurora: the site's blue, red, and yellow as soft washes. */
.desk[data-wallpaper="aurora"] {
    background-color: var(--bg-color);
    background-image:
        radial-gradient(55% 60% at 12% 18%, color-mix(in srgb, #002fa7 38%, transparent), transparent 70%),
        radial-gradient(45% 50% at 88% 22%, color-mix(in srgb, #dc3c22 30%, transparent), transparent 70%),
        radial-gradient(60% 55% at 55% 95%, color-mix(in srgb, #ffc857 32%, transparent), transparent 70%);
}

/* Sonoma-ish: one deep, saturated sweep, whatever the color scheme. */
.desk[data-wallpaper="sweep"] {
    background-image: linear-gradient(155deg, #0a1a4d 0%, #2c1a5e 40%, #7a2a3f 75%, #c2552d 100%);
}

.window {
    position: absolute;
    top: var(--y);
    left: var(--x);
    z-index: var(--z, 0);
    width: var(--w, var(--window-width));
    height: var(--h, var(--window-height));
    translate: var(--dx, 0px) var(--dy, 0px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--bg-color);
    border: 1px solid var(--ui-color);
    border-radius: 11px;
    box-shadow:
        0 0 0 0.5px rgb(0 0 0 / 35%),
        0 6px 18px rgb(0 0 0 / 18%);
    transition: box-shadow 200ms ease;
}

/* Arrange Windows slides everything into place. */
.desk.is-arranging .window {
    transition:
        box-shadow 200ms ease,
        translate 400ms cubic-bezier(0.22, 1, 0.36, 1),
        width 400ms cubic-bezier(0.22, 1, 0.36, 1),
        height 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

#hello-sticky {
    --x: 3%;
    --y: 6%;
    --window-width: 21rem;
    --window-height: auto;
}

#quote-sticky {
    --x: 24%;
    --y: 58%;
    --window-width: 19rem;
    --window-height: auto;
    max-height: var(--h, 18rem);
}

#writing-window {
    --x: 24%;
    --y: 7%;
    --window-width: 30%;
    --window-height: 60%;
}

#bookmarks-window {
    --x: 3%;
    --y: 46%;
    --window-width: 27%;
    --window-height: 48%;
}

#books-window {
    --x: 33%;
    --y: 30%;
    --window-width: 29%;
    --window-height: 62%;
}

#movies-window {
    --x: 57%;
    --y: 46%;
    --window-width: 38%;
    --window-height: 48%;
}

#friends-window {
    --x: 70%;
    --y: 8%;
    --window-width: 27%;
    --window-height: 42%;
}

/* The active window casts the deep shadow; the rest sit flat. */
.window.is-front {
    box-shadow:
        0 0 0 0.5px rgb(0 0 0 / 45%),
        0 22px 60px rgb(0 0 0 / 40%);
}

.window:hover {
    border-color: var(--text2-color);
}

.window-bar {
    cursor: grab;
    user-select: none;
    touch-action: none;
}

.window.is-dragging .window-bar {
    cursor: grabbing;
}

/* On a phone the desk collapses into a plain stack; nothing to drag. */
@media (max-width: 800px) {
    body.desktop {
        height: auto;
        overflow: auto;
    }

    .content.desk {
        position: static;
        display: grid;
        gap: 1rem;
        padding: 4rem 1rem 1rem;
        overflow: visible;
    }

    .window {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        height: 22rem;
        translate: none;
    }

    .window-bar {
        cursor: auto;
        touch-action: auto;
    }

    .sticky {
        height: auto;
    }

    .window-resize {
        display: none;
    }
}

/* A fixed height, so the bar never grows. */
.window-bar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 2.4rem;
    padding: 0 0.75rem;
    background: var(--bg2-color);
    border-bottom: 1px solid var(--ui-color);
    transition: box-shadow 150ms ease;
}

/* Content has scrolled under the bar. */
.window.is-scrolled .window-bar {
    box-shadow: 0 1px 8px rgb(0 0 0 / 18%);
}

/* Traffic lights. Grey until the window is in front; the glyphs appear on
   hover. All three are real buttons: red closes, yellow puts the window in
   the dock, green zooms it. */
.window-dots {
    display: flex;
    gap: 8px;
}

.window-dots > * {
    position: relative;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 1px solid rgb(0 0 0 / 15%);
    border-radius: 50%;
    background: var(--ui-color);
    transition: background-color 150ms ease;
}

.window-dots > button {
    font: inherit;
    cursor: default;
}

.window-dots > button:focus-visible {
    outline: 2px solid var(--text3-color);
    outline-offset: 2px;
}

.window-dots > *::before {
    content: "";
    position: absolute;
    inset: 0;
    font-size: 9px;
    font-weight: 700;
    line-height: 10px;
    text-align: center;
    color: rgb(0 0 0 / 55%);
    opacity: 0;
    transition: opacity 100ms ease;
}

.window-close::before {
    content: "×";
}

.window-minimize::before {
    content: "–";
}

.window-zoom::before {
    content: "+";
}

.window-dots:hover > *::before {
    opacity: 1;
}

.window:hover .window-close,
.window.is-front .window-close,
.window.is-open .window-close {
    background: #ff5f57;
}

.window:hover .window-minimize,
.window.is-front .window-minimize,
.window.is-open .window-minimize {
    background: #febc2e;
}

.window:hover .window-zoom,
.window.is-front .window-zoom,
.window.is-open .window-zoom {
    background: #28c840;
}

.window-title {
    margin-left: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text2-color);
    white-space: nowrap;
    transition: color 150ms ease;
}

.window.is-front .window-title,
.window.is-open .window-title {
    color: var(--text-color);
}

/* Toolbar controls. A narrow window sheds them by priority rather than
   clipping them: the export button first, then the search field, then the
   Media view switch. */
.window {
    container-type: inline-size;
}

.window-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex: none;
    margin-left: auto;
}

.window-controls .window-search {
    width: 7rem;
}

@container (max-width: 30rem) {
    .blogroll-export {
        display: none;
    }
}

@container (max-width: 24rem) {
    .window-controls .window-search {
        display: none;
    }
}

@container (max-width: 22rem) {
    .media-view {
        display: none;
    }
}

.window-viewport {
    flex: 1;
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

/* The corner grip. Two hairlines, like the old Aqua one. */
.window-resize {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: 18px;
    height: 18px;
    cursor: nwse-resize;
    background:
        linear-gradient(135deg, transparent 0 55%, var(--text2-color) 55% 60%, transparent 60% 75%, var(--text2-color) 75% 80%, transparent 80%);
    opacity: 0;
    transition: opacity 150ms ease;
}

.window:hover .window-resize {
    opacity: 0.6;
}

.window.is-open .window-resize,
.post-window.is-zoomed .window-resize {
    display: none;
}

/* A window in the dock keeps its state; only its tile is on the desk. */
.window.is-stowed {
    display: none;
}

/* The dock: a strip along the bottom of the desk with a tile for each window
   that is closed or put away. The arrow keys walk it. */
.dock {
    position: absolute;
    left: 50%;
    bottom: 0.75rem;
    z-index: 150;
    display: flex;
    gap: 0.35rem;
    translate: -50% 0;
    padding: 0.35rem;
    background: color-mix(in srgb, var(--bg2-color) 80%, transparent);
    border: 1px solid var(--ui-color);
    border-radius: 12px;
    backdrop-filter: blur(12px);
    box-shadow: 0 6px 24px rgb(0 0 0 / 25%);
}

.dock[hidden] {
    display: none;
}

.dock-tile {
    padding: 0.3rem 0.7rem;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text2-color);
    background: var(--bg-color);
    border: 1px solid var(--ui-color);
    border-radius: 8px;
    cursor: default;
    transition: color 150ms ease, translate 150ms ease;
}

.dock-tile:hover {
    color: var(--text-color);
    translate: 0 -2px;
}

@media (max-width: 800px) {
    .dock {
        position: static;
        translate: none;
        margin: 0 auto;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.window.is-open {
    position: fixed;
    inset: calc(var(--menubar-height) + 0.5rem) 1rem 1rem;
    z-index: 200;
    width: auto;
    height: auto;
    translate: none;
    border-color: var(--text2-color);
    box-shadow:
        0 0 0 0.5px rgb(0 0 0 / 50%),
        0 30px 80px rgb(0 0 0 / 50%);
    transition: none;
}

/* A fixed pseudo-element rather than a shadow on the window, so the view
   transition's snapshot of the window doesn't drag the dimming along. */
.desk:has(.window.is-open)::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgb(0 0 0 / 45%);
}

html:has(.window.is-open) {
    overflow: hidden;
}

::view-transition-group(window),
::view-transition-group(.post-window) {
    animation-duration: 380ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Post window ----------------------------------------------------------- */

/* A post is a document window in front of the desk, under the row that
   holds the home link and the search icon, the way windows sit under the
   menu bar. The window scrolls; the page doesn't. Behind it are copies of
   the desk and of the post windows opened on the way here. See
   post-window.js. */
.content.desk.post-desk {
    position: fixed;
}

/* Each window opens a step down and to the right of the one before it, as
   new windows cascade. --cascade counts the windows behind. */
.post-window {
    position: fixed;
    inset: calc(3.5rem + var(--cascade, 0) * 1.5rem) 0 1.5rem;
    z-index: 1;
    width: var(--w, min(72rem, 100% - 2rem - var(--cascade, 0) * 3rem));
    height: var(--h, auto);
    margin: 0 auto;
    translate: calc(var(--cascade, 0) * 1.5rem + var(--dx, 0px)) var(--dy, 0px);
    container-type: normal;
    view-transition-class: post-window;
}

.post-window.is-zoomed {
    inset: calc(var(--menubar-height) + 0.5rem) 1rem 1rem;
    z-index: 200;
    width: auto;
    height: auto;
    translate: none;
    border-color: var(--text2-color);
    box-shadow:
        0 0 0 0.5px rgb(0 0 0 / 50%),
        0 30px 80px rgb(0 0 0 / 50%);
}

/* A post window drags and resizes like the ones on the desk. */
.post-window .window-bar {
    cursor: grab;
}

/* A document window centers its title. */
.post-window .window-title {
    position: absolute;
    left: 50%;
    translate: -50% 0;
    max-width: calc(100% - 12rem);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

/* Positioned, so the poster and the lead image scroll with the post. */
.post-window .window-viewport {
    position: relative;
}

.post-window .window-viewport:focus {
    outline: none;
}

/* On a phone the page scrolls again, and the bar sticks to the top. The
   window scrolls over the home link and the search icon. */
@media (max-width: 800px) {
    .post-window {
        position: relative;
        inset: auto;
        z-index: 101;
        width: auto;
        height: auto;
        margin: 3.5rem 0.5rem 0.5rem;
        translate: none;
        overflow: clip;
    }

    /* The phone's desk is a stack, and there's no room to cascade, so only
       the front window shows. */
    .post-desk .window {
        display: none;
    }

    .post-window .window-bar {
        position: sticky;
        top: 0;
        cursor: auto;
    }

    .post-window .window-viewport {
        overflow: visible;
    }

    .post-window.is-zoomed {
        position: fixed;
        inset: var(--menubar-height) 0 0;
        margin: 0;
        border-radius: 0;
        overflow: hidden;
    }

    .post-window.is-zoomed .window-viewport {
        overflow: auto;
    }
}

/* Following a link to a post is a cross-document view transition. From a
   link, the window grows out of it; the group handles that. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

/* The link gives way to the window early, so what grows reads as a window. */
::view-transition-old(.post-window),
::view-transition-new(.post-window) {
    animation-duration: 180ms;
}

/* With nothing to grow out of (the back button, Spotlight's Return), the
   window scales up into place as a new document window does. */
::view-transition-new(.post-window):only-child {
    animation: window-open 380ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Closing: a quick shrink and fade. A window moving back in the stack keeps
   its name, so it slides to its new place instead. */
::view-transition-old(.post-window):only-child {
    animation: window-close 200ms ease-in both;
}

@keyframes window-open {
    from {
        opacity: 0;
        scale: 0.9;
    }
}

@keyframes window-close {
    to {
        opacity: 0;
        scale: 0.95;
    }
}

/* --- Sticky note ---------------------------------------------------------- */

/* Stickies: square corners, a darker strip to drag by, and always yellow. */
.sticky {
    color: #2a2300;
    background: #fff89e;
    border: none;
    border-radius: 2px;
    box-shadow:
        0 0 0 0.5px rgb(0 0 0 / 20%),
        0 8px 22px rgb(0 0 0 / 22%);
}

.sticky.is-front {
    box-shadow:
        0 0 0 0.5px rgb(0 0 0 / 25%),
        0 16px 40px rgb(0 0 0 / 30%);
}

.sticky:hover {
    border-color: transparent;
}

.sticky-bar {
    z-index: auto;
    height: 0.85rem;
    padding: 0;
    background: #f5e77b;
    border-bottom: 1px solid rgb(0 0 0 / 6%);
}

.sticky-body {
    padding: 0.7rem 0.9rem 0.85rem;
    font-size: 0.86rem;
    line-height: 1.5;
}

.sticky-body p {
    margin: 0 0 0.6rem;
}

.sticky-body p:last-child {
    margin: 0;
}

.sticky-tip {
    margin-top: 0.75rem;
    color: #6b5d12;
}

.sticky-body a {
    color: #1b5fc7;
    border-bottom: none;
}

.sticky-search {
    display: inline-flex;
    gap: 0.15rem;
    padding: 0;
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

.sticky-search kbd {
    display: inline-grid;
    place-items: center;
    min-width: 1.2rem;
    height: 1.2rem;
    padding: 0 0.25rem;
    font: inherit;
    font-size: 0.72rem;
    background: #fffdd9;
    border: 1px solid #c9b84a;
    border-bottom-width: 2px;
    border-radius: 3px;
}

.sticky-search:hover kbd {
    background: #fff;
}

#quote-sticky .sticky-body {
    flex: 1;
    min-height: 0;
    padding-bottom: 1.6rem;
    overflow-y: auto;
}

.sticky-body .quote-text {
    margin: 0;
    padding: 0;
    color: inherit;
    border: none;
}

.sticky-body .quote-source {
    margin-top: 0.6rem;
    color: #6b5d12;
}

.quote-shuffle {
    position: absolute;
    right: 1.1rem;
    bottom: 0.35rem;
    padding: 0 0.2rem;
    font: inherit;
    font-size: 1rem;
    line-height: 1;
    color: #6b5d12;
    background: none;
    border: none;
    cursor: pointer;
}

.quote-shuffle:hover {
    color: #2a2300;
}

.sticky .window-resize {
    background:
        linear-gradient(135deg, transparent 0 55%, #b8a83a 55% 60%, transparent 60% 75%, #b8a83a 75% 80%, transparent 80%);
}

/* --- Skins ----------------------------------------------------------------- */

/* Writing: a file list. A document icon, the title with the date at the
   right, a two-line excerpt under it, and hairlines between rows. */
.blogroll-snippet,
.blogroll-date {
    display: none;
}

.window-notes:not(.is-open) .blogroll {
    display: block;
    padding: 0.25rem 0.75rem 0.25rem 0.6rem;
}

.window-notes:not(.is-open) .blogroll-item {
    display: grid;
    grid-template-columns: 16px minmax(0, 1fr) auto;
    grid-template-areas:
        "icon name date"
        "icon snippet snippet";
    column-gap: 0.6rem;
    row-gap: 0.1rem;
    align-items: baseline;
    padding: 0.6rem 0.4rem;
    background: none;
    border-radius: 6px;
}

.window-notes:not(.is-open) .blogroll-item:hover {
    background: var(--bg2-color);
}

.window-notes:not(.is-open) .blogroll-item::before {
    content: "";
    grid-area: icon;
    align-self: start;
    width: 16px;
    height: 19px;
    margin-top: 1px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 20'%3E%3Cpath d='M1.5 1h8.5l4.5 4.5V19H1.5z' fill='%23d4d4d8'/%3E%3Cpath d='M10 1v4.5h4.5' fill='%23a1a1a6'/%3E%3Cpath d='M4 9.5h8M4 12.5h8M4 15.5h5.5' stroke='%23a1a1a6' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.window-notes:not(.is-open) .blogroll-item + .blogroll-item::after {
    content: "";
    position: absolute;
    top: 0;
    left: calc(0.4rem + 16px + 0.6rem);
    right: 0.4rem;
    border-top: 1px solid var(--ui-color);
}

.window-notes:not(.is-open) .blogroll-item:hover + .blogroll-item::after,
.window-notes:not(.is-open) .blogroll-item:hover::after {
    border-color: transparent;
}

.window-notes:not(.is-open) .blogroll-name {
    grid-area: name;
    min-width: 0;
    overflow: hidden;
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.window-notes:not(.is-open) .blogroll-description {
    display: none;
}

.window-notes:not(.is-open) .blogroll-date {
    grid-area: date;
    display: block;
    font-size: 0.85rem;
    color: var(--text2-color);
    white-space: nowrap;
}

.window-notes:not(.is-open) .blogroll-snippet {
    grid-area: snippet;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--text2-color);
}

/* Safari: the bookmarks editor. Blue folders that fold up, and a row per
   bookmark; the address column only appears at full size. */
.bookmarks {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
}

.window-safari.is-open .bookmarks {
    max-width: 60rem;
    margin: 0 auto;
    padding: 0.75rem 1rem;
}

.bookmark-folder summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.5rem;
    font-weight: 500;
    list-style: none;
    border-radius: 6px;
    cursor: default;
}

.bookmark-folder summary::-webkit-details-marker {
    display: none;
}

.bookmark-folder summary:hover {
    background: var(--bg2-color);
}

.bookmark-folder summary::before {
    content: "";
    width: 0;
    height: 0;
    margin-left: 2px;
    border: 4px solid transparent;
    border-left: 5px solid var(--text2-color);
    transition: rotate 120ms ease;
}

.bookmark-folder[open] summary::before {
    rotate: 90deg;
}

.bookmark-folder-icon {
    position: relative;
    width: 16px;
    height: 12px;
    border-radius: 2px 3px 3px 3px;
    background: linear-gradient(#6fb6ff, #3b8fe8);
}

.bookmark-folder-icon::before {
    content: "";
    position: absolute;
    top: -3px;
    left: 0;
    width: 7px;
    height: 4px;
    border-radius: 2px 2px 0 0;
    background: #3b8fe8;
}

.bookmark-folder-count {
    margin-left: auto;
    font-size: 0.72rem;
    color: var(--text2-color);
}

.bookmark {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.28rem 0.5rem 0.28rem 1.75rem;
    color: var(--text-color);
    border-bottom: none;
    border-radius: 6px;
}

.bookmark:hover {
    background: var(--bg2-color);
}

/* Outranks the external-link arrow rule, which comes later. */
.content .bookmarks a.bookmark::after {
    content: none;
}

.bookmark-icon {
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 3px;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M4 12h16M12 4c3 3 3 13 0 16M12 4c-3 3-3 13 0 16'/%3E%3C/svg%3E") center / 11px no-repeat,
        var(--text2-color);
}

.bookmark-title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bookmark-url {
    display: none;
    font-size: 0.75rem;
    color: var(--text2-color);
}

.window-safari.is-open .bookmark-url {
    display: block;
}

/* TV: always dark, with a shelf of rounded posters. */
.window-tv {
    --bg-color: #1c1c1e;
    --bg2-color: #2a2a2c;
    --bg3-color: #3a3a3c;
    --ui-color: #3a3a3c;
    --text-color: #f5f5f7;
    --text2-color: #98989d;
    --text3-color: #f5f5f7;
    color-scheme: dark;
}

.window-shelf:not(.is-open) .media-grid {
    grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
    gap: 0.5rem;
    padding: 0.9rem;
}

.window-shelf .media-grid-item {
    border-radius: 6px;
}

.window-shelf:not(.is-open) .media-grid-item {
    position: relative;
    transition:
        transform 160ms ease,
        box-shadow 160ms ease,
        outline-color 160ms ease;
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.window-shelf:not(.is-open) .media-grid-item:hover {
    z-index: 1;
    transform: scale(1.08);
    box-shadow: 0 12px 28px rgb(0 0 0 / 60%);
    outline-color: color-mix(in srgb, var(--text-color) 75%, transparent);
}

.window-shelf:not(.is-open) .media-grid-item img,
.window-shelf:not(.is-open) .media-grid-item:hover img {
    transform: none;
    opacity: 1;
}

.window-shelf:not(.is-open) .media-grid-item[data-rating="9"] img,
.window-shelf:not(.is-open) .media-grid-item[data-rating="10"] img,
.window-shelf:not(.is-open) .media-grid-item-no-content img {
    border: none !important;
}

/* Contacts: a card list. Letter headers that stick, a round avatar and a
   name, nothing more. */
.blogroll-letter {
    display: none;
}

.window-contacts:not(.is-open) .blogroll {
    display: block;
    padding: 0 0.5rem 0.35rem;
}

.window-contacts:not(.is-open) .blogroll-letter {
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    padding: 0.45rem 0.65rem 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text2-color);
    background: var(--bg-color);
}

.window-contacts:not(.is-open) .blogroll-item {
    display: grid;
    grid-template-columns: 26px 1fr;
    align-items: center;
    column-gap: 0.6rem;
    padding: 0.3rem 0.65rem;
    background: none;
    border-radius: 6px;
}

.window-contacts:not(.is-open) .blogroll-item:first-of-type,
.window-contacts:not(.is-open) .blogroll-item:hover {
    background: var(--bg3-color);
}

.window-contacts:not(.is-open) .blogroll-item-head {
    display: contents;
}

.window-contacts:not(.is-open) .content .blogroll-mark,
.window-contacts:not(.is-open) .blogroll-mark {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.7rem;
}

.window-contacts:not(.is-open) .blogroll-feed,
.window-contacts:not(.is-open) .blogroll-description {
    display: none;
}

.window-contacts:not(.is-open) .blogroll-name {
    font-size: 0.85rem;
}

/* A second and smaller wall under the poster wall. Its width comes from the
   window it sits in. */
.blogroll {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1px;
}

/* 190px cells would collapse to a single column on a phone, which makes the
   three-row clamp show only three friends. */
@media (max-width: 500px) {
    .blogroll {
        grid-template-columns: repeat(2, 1fr);
    }
}

.blogroll-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.85rem;
    background: var(--bg-color);
}

.blogroll-item:hover,
.blogroll-item:focus-within {
    background: var(--bg2-color);
}

.blogroll-item-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Favicons are usually dark on transparent, so seat each one on a paper-
   colored plate. It vanishes in light mode and reads as a stamp in dark. */
.content .blogroll-mark {
    width: 28px;
    height: 28px;
    flex: none;
    margin: 0;
    padding: 2px;
    border: 1px solid var(--ui-color);
    border-radius: 4px;
    background: #fffcf0;
    object-fit: contain;
    cursor: inherit;
}

.content .blogroll-mark-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--bg3-color);
    color: var(--text2-color);
    font-size: 0.85rem;
    font-weight: 700;
}

.blogroll-name {
    font-size: 0.9rem;
    color: var(--text-color);
    border-bottom: none;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Stretch the name over the whole tile so the cell is one click target.
   The specificity matches .content a[href*="https://"]::after, which would
   otherwise put its arrow glyph inside the stretched box. */
.content .blogroll a.blogroll-name::after {
    content: "";
    position: absolute;
    inset: 0;
}

.content .blogroll a.blogroll-feed::after {
    content: none;
}

.blogroll-description {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text2-color);
}

.blogroll-feed {
    position: relative;
    font-size: 0.72rem;
    color: var(--text2-color);
    border-bottom: none;
}

.blogroll-item:hover .blogroll-feed {
    color: var(--text4-color);
}

.rating {
    color: var(--text2-color);
    font-weight: normal;
    font-size: 0.875rem;
}

/* ==========================================================================
   Post Detail
   ========================================================================== */

.post-metadata img {
    max-width: 200px;
    height: auto;
    border-radius: 0.5rem;
    border: 1px solid var(--text-color);
}

.post-metadata {
    float: right;
    max-width: 100%;
    margin: 0 0 1rem 1.5rem;
    text-align: center;
    z-index: 100;
    position: relative;
}

.container:has(p:first-of-type img) .post-metadata,
.container:has(figure:first-of-type img) .post-metadata {
    margin-top: -100px;
}

@media (min-width: 900px) {
    .post-metadata {
        margin-left: -100px !important;
        position: absolute;
        margin-left: 0;
        margin-top: 0 !important;
    }
}

.post-title {
    font-family:
        ui-serif,
        Charter,
        "Iowan Old Style",
        "Palatino Linotype",
        Palatino,
        Georgia,
        serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.post-date {
    color: var(--text2-color);
    font-size: 0.75rem;
    margin-bottom: 1rem;
    display: block;
}

.post-metadata .post-date {
    margin-bottom: 0;
}

.media-meta {
    display: block;
    color: var(--text2-color);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}

.meta-item {
    background: var(--bg2-color);
    color: var(--text2-color);
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
}

.star-rating {
    font-size: 1rem;
    color: var(--text3-color);
    margin-top: 2rem;
    letter-spacing: 0.1em;
}

/* ==========================================================================
   Content
   ========================================================================== */

.content {
    max-width: 600px;
    margin: 0 auto;
}

.content > p > a {
    color: var(--text3-color);
    border-bottom: 1px solid transparent;
}

.content a:hover {
    border-bottom-color: var(--text3-color);
}

.content a[href*="https://"] {
    text-wrap: pretty;
}

.content a[href*="https://"]::after {
    content: " ↗";
    white-space: nowrap;
}

.content p {
    margin-bottom: 1rem;
}

.content h2 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.content h3 {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.content ul,
.content ol {
    margin-bottom: 1rem;
    padding-left: 1.75rem;
}

.content li {
    margin-bottom: 0.5rem;
}

.content li::marker {
    color: var(--text2-color);
}

.content blockquote {
    border-left: 4px solid var(--ui-color);
    padding-left: 1rem;
    margin: 1.5rem 0;
    color: var(--text2-color);
}

.content hr {
    border: none;
    border-top: 1px solid var(--ui-color);
    margin: 2rem 0;
}

.content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 0 auto;
    margin-top: 1rem;
    border: 1px solid var(--text2-color);
    cursor: zoom-in;
}

.content figure {
    margin: 1.5rem 0;
    padding: 0;
}

.content figure img {
    display: block;
    margin: 0 auto;
}

.content figcaption {
    text-align: center;
    font-size: 0.85rem;
    color: var(--text2-color);
    margin-top: 0.5rem;
    font-style: italic;
}

.content img ~ br ~ em {
    font-style: italic;
    text-align: center;
    display: block;
    font-size: 0.875rem;
}

/* Image zoom overlay */
.zoom-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.zoom-overlay.active {
    opacity: 1;
}

.zoom-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 4px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.zoom-overlay.active img {
    transform: scale(1);
}

.content strong {
    font-weight: 600;
}

/* ==========================================================================
   Code / Syntax Highlighting
   ========================================================================== */

.content pre {
    background: var(--bg2-color);
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    margin-bottom: 1rem;
    width: max-content;
    min-width: min(900px, 100%);
    max-width: 100vw;
    box-sizing: border-box;
    /* Center wide code blocks relative to viewport */
    margin-left: 50%;
    transform: translateX(-50%);
    border: 1px solid var(--ui-color);
}

@media (min-width: 900px) {
    .content pre ~ pre {
        border-left: none;
    }
}

@media (max-width: 768px) {
    .content pre {
        margin-left: 0;
        transform: none;
    }
}

/* Decision-log examples: cap the width and let long prose lines wrap rather
   than force a wide, viewport-spanning block. */
.content pre.decision {
    min-width: 0;
    max-width: min(var(--max-width-desktop), 100vw);
}

.content pre.decision code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Fade the frontmatter so the decision prose reads as the focus. */
.content pre.decision .decision-meta {
    color: var(--text2-color);
    opacity: 0.6;
}

/* Raw-file examples (```md): cap the width and soft-wrap long prose lines so
   the block reads as a narrow column rather than spanning the viewport. */
.content pre:has(> code.language-md) {
    min-width: 0;
    max-width: 100%;
    margin-left: 0;
    transform: none;
}

.content pre:has(> code.language-md) code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.content code {
    background: var(--bg2-color);
    padding: 0.2rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9rem;
    font-family:
        ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

.content pre code {
    background: none;
    padding: 0;
    color: var(--text-color);
}

.content pre code.hljs {
    background: transparent !important;
    padding: 0 !important;
}

.content pre code.hljs,
.content code.hljs,
.hljs {
    display: block;
    overflow-x: auto;
    padding: 0;
    background: transparent;
    color: var(--text-color);
}

.content pre code.hljs span,
.content code.hljs span {
    color: inherit;
}

.content .hljs-comment,
.content .hljs-quote,
.hljs-comment,
.hljs-quote {
    color: var(--text2-color) !important;
    font-style: italic;
}

.content .hljs-keyword,
.content .hljs-selector-tag,
.content .hljs-subst,
.hljs-keyword,
.hljs-selector-tag,
.hljs-subst {
    color: var(--text3-color) !important;
    font-weight: 600;
}

.content .hljs-number,
.content .hljs-literal,
.content .hljs-variable,
.content .hljs-template-variable,
.content .hljs-tag .hljs-attr,
.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
    color: var(--text3-color) !important;
}

.content .hljs-string,
.content .hljs-doctag,
.hljs-string,
.hljs-doctag {
    color: var(--text-color) !important;
}

.content .hljs-title,
.content .hljs-section,
.content .hljs-selector-id,
.hljs-title,
.hljs-section,
.hljs-selector-id {
    color: var(--text-color);
    font-weight: 600;
}

.content .hljs-type,
.content .hljs-class .hljs-title,
.hljs-type,
.hljs-class .hljs-title {
    color: var(--text-color);
}

.content .hljs-tag,
.content .hljs-name,
.content .hljs-attribute,
.hljs-tag,
.hljs-name,
.hljs-attribute {
    color: var(--text3-color);
    font-weight: normal;
}

.content .hljs-regexp,
.content .hljs-link,
.hljs-regexp,
.hljs-link {
    color: var(--text3-color);
}

.content .hljs-symbol,
.content .hljs-bullet,
.hljs-symbol,
.hljs-bullet {
    color: var(--text-color);
}

.content .hljs-built_in,
.content .hljs-builtin-name,
.hljs-built_in,
.hljs-builtin-name {
    color: var(--text-color);
}

.content .hljs-meta,
.hljs-meta {
    color: var(--text2-color);
}

.content .hljs-deletion,
.hljs-deletion {
    background: rgba(239, 68, 68, 0.15);
    color: rgba(185, 28, 28, 0.9);
}

.content .hljs-addition,
.hljs-addition {
    background: rgba(34, 197, 94, 0.15);
    color: rgba(20, 83, 45, 0.9);
}

.content .hljs-function,
.content .hljs-title.function_,
.hljs-function,
.hljs-title.function_ {
    color: var(--text-color);
    font-weight: 600;
}

.content .hljs-params,
.hljs-params {
    color: var(--text-color);
}

.content .hljs-attr,
.hljs-attr {
    color: var(--text-color);
}

.content .hljs-property,
.hljs-property {
    color: var(--text-color);
}

.content .hljs-operator,
.hljs-operator {
    color: var(--text-color);
}

.content .hljs-punctuation,
.hljs-punctuation {
    color: var(--text-color);
}

/* ==========================================================================
   Code Comparison (Side-by-side)
   ========================================================================== */

.content {
    overflow-x: visible;
}

.content .code-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    margin: 2rem auto;
    border-right: 1px solid var(--ui-color);
    border-top: 1px solid var(--ui-color);
    border-left: 1px solid var(--ui-color);
    border-bottom: 1px solid var(--ui-color);
    align-items: stretch;
    width: 1200px;
    margin-left: calc(50% - 600px);
    max-width: 100vw;
    box-sizing: border-box;
}

.content .code-comparison-item {
    display: flex;
    flex-direction: column;
    max-width: 50vw;
    justify-content: stretch;
    border-right: 1px solid var(--ui-color);
    align-items: stretch;
}

.code-comparison-item:last-child {
    border-right: none;
}

.content .code-comparison-item strong {
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text-color);
}

.content .code-comparison-item pre {
    width: 100%;
    min-width: 0;
    margin: 0;
    display: block;
    line-height: 1.5;
    font-size: 0.9rem;
    border-top: 1px solid var(--ui-color);
    border-radius: 0;
    border-bottom: 1px solid var(--ui-color);
    flex: 1;
}

.content .code-comparison-item code {
    line-height: 1.5;
    font-size: 0.9rem;
    white-space: pre;
}

.content .code-comparison-item code .line-added {
    background: rgba(34, 197, 94, 0.15);
    color: rgba(20, 83, 45, 0.9);
    display: block;
    padding: 0 0.25rem;
    margin: 0 -0.25rem;
}

.content .code-comparison-item code .line-removed {
    background: rgba(239, 68, 68, 0.15);
    color: rgba(185, 28, 28, 0.9);
    display: block;
    padding: 0 0.25rem;
    margin: 0 -0.25rem;
}

@media (prefers-color-scheme: dark) {
    .content .code-comparison-item code .line-added {
        background: rgba(34, 197, 94, 0.25);
        color: rgba(187, 247, 208, 0.95);
    }

    .content .code-comparison-item code .line-removed {
        background: rgba(239, 68, 68, 0.25);
        color: rgba(254, 202, 202, 0.95);
    }
}

/* Difftastic-style code diff */
.content .code-diff {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 2rem 0;
    width: max-content;
    min-width: min(900px, 100%);
    max-width: 100vw;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .content .code-diff {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        width: 100% !important;
    }
    .content .code-comparison-item {
        max-width: 100% !important;
    }
}

.content .code-diff pre {
    margin: 0;
    padding: 1rem;
    line-height: 1.5;
    font-size: 0.9rem;
    overflow-x: auto;
    background: var(--bg2-color);
    border-radius: 0;
    width: auto;
}

.content .code-diff pre.diff-before {
    border-right: 1px solid var(--ui-color);
}

.content .code-diff code {
    line-height: 1.5;
    font-size: 0.9rem;
    white-space: pre;
}

/* Dim unchanged code, highlight changes */
.content .code-diff .diff-old,
.content .code-diff .diff-new {
    display: block;
    border-radius: 3px;
    padding: 0.125rem 0.25rem;
    margin: 0 -0.25rem;
}

.content .code-diff .diff-old {
    background: rgba(239, 68, 68, 0.12);
}

.content .code-diff .diff-new {
    background: rgba(34, 197, 94, 0.12);
}

@media (prefers-color-scheme: dark) {
    .content .code-diff .diff-old {
        background: rgba(239, 68, 68, 0.2);
    }
    .content .code-diff .diff-new {
        background: rgba(34, 197, 94, 0.2);
    }
}

@media (max-width: 768px) {
    .content .code-diff {
        grid-template-columns: 1fr;
        width: 100%;
        min-width: 0;
    }
    .content .code-diff pre.diff-before {
        border-bottom: 1px solid var(--ui-color);
    }
}

@media (prefers-color-scheme: dark) {
    .content .hljs-string,
    .content .hljs-doctag,
    .hljs-string,
    .hljs-doctag {
        color: #ffc857;
    }

    .content .hljs-keyword,
    .content .hljs-selector-tag,
    .content .hljs-subst,
    .hljs-keyword,
    .hljs-selector-tag,
    .hljs-subst {
        color: #ffc857;
    }

    .content .hljs-number,
    .content .hljs-literal,
    .content .hljs-variable,
    .content .hljs-template-variable,
    .content .hljs-tag .hljs-attr,
    .hljs-number,
    .hljs-literal,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-tag .hljs-attr {
        color: #ffc857;
    }

    .content .hljs-deletion,
    .hljs-deletion {
        background: rgba(239, 68, 68, 0.25);
        color: rgba(254, 202, 202, 0.95);
    }

    .content .hljs-addition,
    .hljs-addition {
        background: rgba(34, 197, 94, 0.25);
        color: rgba(187, 247, 208, 0.95);
    }
}

/* ==========================================================================
   Sidenotes
   ========================================================================== */

.sidenote-toggle {
    font-size: 0.75rem;
    vertical-align: super;
    color: var(--text3-color);
    cursor: pointer;
    padding: 0 0.1em;
}

.sidenote-toggle-checkbox {
    display: none;
}

.sidenote {
    font-size: 0.8rem;
    color: var(--text2-color);
    line-height: 1.4;
}

@media (min-width: 900px) {
    .sidenote {
        float: right;
        clear: right;
        width: 220px;
        margin-right: -250px;
        margin-bottom: 1rem;
        padding-left: 1rem;
        border-left: 1px solid var(--ui-color);
    }
}

@media (max-width: 899px) {
    .sidenote {
        display: none;
        background: var(--bg2-color);
        padding: 0.75rem 1rem;
        margin: 0.5rem 0;
        border-radius: 4px;
    }

    .sidenote-toggle-checkbox:checked + .sidenote {
        display: block;
    }
}

/* ==========================================================================
   Backlinks
   ========================================================================== */

.backlinks {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}

.section-title {
    font-size: 0.9rem !important;
    font-weight: 600;
    color: var(--text2-color);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.75rem;
}

.content h2.section-title {
    margin-top: 0 !important;
}

.backlinks ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.backlinks a {
    color: var(--text3-color);
    border-bottom: 1px solid transparent;
}

.backlinks a:hover {
    border-bottom-color: var(--text3-color);
}

.backlink-media {
    margin-bottom: 0;
}

.backlink-media a {
    display: block;
    border-bottom: none;
}

.backlink-media img {
    width: 120px;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--text-color);
    margin-top: 0 !important;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.backlink-media a:hover img {
    transform: scale(1.05);
    opacity: 0.9;
}

.backlink-media span {
    display: none;
}

/* ==========================================================================
   Utilities
   ========================================================================== */

.font-bold {
    font-weight: 700;
    margin-bottom: 0.5rem;
    margin-top: 2rem;
}

/* ==========================================================================
   Search Modal
   ========================================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

.search-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16vh 1rem 0;
}

/* The backdrop only fades. fadeIn also slides, and a transform here would make
   .search-modal the containing block for the fixed backdrop, dragging it up and
   baring an undimmed strip along the bottom of the viewport. */
@keyframes backdropFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.search-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 45%);
    border: 0;
    padding: 0;
    cursor: default;
    animation: backdropFadeIn 0.2s ease-out;
}

/* Spotlight: a frosted panel, a big light field, and a blue selection. */
.search-container {
    position: relative;
    animation: fadeIn 0.2s ease-out;
    width: 100%;
    max-width: 40rem;
    background: color-mix(in srgb, var(--bg-color) 88%, transparent);
    backdrop-filter: blur(40px) saturate(1.6);
    -webkit-backdrop-filter: blur(40px) saturate(1.6);
    border-radius: 12px;
    box-shadow:
        0 0 0 0.5px rgb(0 0 0 / 40%),
        inset 0 0 0 0.5px rgb(255 255 255 / 12%),
        0 30px 70px rgb(0 0 0 / 35%);
    overflow: hidden;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.7rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--ui-color) 80%, transparent);
}

.search-input-wrapper svg {
    flex: none;
    width: 1.3rem;
    height: 1.3rem;
    color: var(--text2-color);
}

#search-input {
    flex: 1;
    background: transparent;
    color: var(--text-color);
    outline: none;
    border: none;
    font-size: 1.35rem;
    font-weight: 300;
    font-family: inherit;
}

#search-input::placeholder {
    color: var(--text2-color);
}

.search-results {
    max-height: 50vh;
    overflow-y: auto;
    padding: 0.4rem;
}

.search-empty {
    padding: 1.5rem;
    text-align: center;
    color: var(--text2-color);
}

.search-empty p {
    font-size: 0.85rem;
}

.search-results-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.search-result-item {
    border-radius: 8px;
    cursor: default;
}

.search-result-item:hover,
.search-result-item.selected {
    color: #fff;
    background: #0a60ff;
}

.search-result-link {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.45rem 0.75rem;
    color: inherit;
    border-bottom: none;
    font-size: 0.9rem;
}

.search-result-title-row {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
}

.search-result-title {
    flex: 1;
    color: inherit;
}

.search-result-date,
.search-result-snippet {
    font-size: 0.78rem;
    color: var(--text2-color);
}

.search-result-item:hover .search-result-date,
.search-result-item:hover .search-result-snippet,
.search-result-item.selected .search-result-date,
.search-result-item.selected .search-result-snippet {
    color: rgb(255 255 255 / 75%);
}

.search-result-snippet {
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-result-snippet mark {
    color: inherit;
    font-weight: 600;
    background: none;
}

/* An action, as Spotlight lists a shortcut: a glyph and a kind. */
.search-result-action .search-result-title::before {
    content: "⌘";
    display: inline-grid;
    place-items: center;
    width: 1.3rem;
    height: 1.3rem;
    margin-right: 0.5rem;
    font-size: 0.75rem;
    color: #fff;
    background: linear-gradient(#8e8e93, #636366);
    border-radius: 5px;
    vertical-align: -0.3rem;
}

table {
    width: 100%;
    border-collapse: collapse;
    outline: 1px solid var(--text2-color);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}

table th,
table td {
    padding: 0.5rem;
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    border: 1px solid var(--ui-color);
    background: var(--bg2-color);
    border-bottom: 1px solid var(--ui-color);
    font-size: 0.9rem;
    text-align: left;
}

table td:first-child,
table th:first-child {
    white-space: nowrap;
}

table td:first-child a {
    white-space: nowrap;
}

table td:last-child:nth-child(2),
table th:last-child:nth-child(2) {
    text-align: right;
}

table th {
    border-bottom: 1px solid var(--text2-color);
}

table th {
    background: var(--bg2-color);
}

/* Charts (build-time inline SVG from ```chart-bar / ```chart-line blocks) */
figure.chart {
    margin: 1.5rem 0;
    padding: 0.75rem;
    background: var(--bg2-color);
    border: 1px solid var(--ui-color);
    border-radius: 0.5rem;
}

figure.chart svg {
    display: block;
    width: 100%;
    height: auto;
}

.chart-grid {
    stroke: var(--ui-color);
    stroke-width: 1;
}

.chart-axis-label {
    fill: var(--text2-color);
    font-family: inherit;
    font-size: 13px;
}

.chart-bar {
    fill: var(--text3-color);
}

.chart-line {
    fill: none;
    stroke: var(--text3-color);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.chart-dot {
    fill: var(--bg2-color);
    stroke: var(--text3-color);
    stroke-width: 2.5;
}

.chart-bar {
    transition: opacity 0.1s ease;
}

.chart-bar:hover {
    opacity: 0.78;
    cursor: default;
}

.chart-dot.active {
    fill: var(--text3-color);
}

.chart-guide {
    stroke: var(--text2-color);
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

figure.chart--line svg {
    cursor: crosshair;
}

/* Cursor-following tooltip shared by all charts (see charts.js) */
.chart-tip {
    position: fixed;
    z-index: 50;
    display: none;
    align-items: center;
    gap: 0.4rem;
    pointer-events: none;
    background: var(--bg2-color);
    border: 1px solid var(--ui-color);
    border-radius: 6px;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    color: var(--text-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.chart-tip-swatch {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 2px;
    background: var(--text3-color);
}

.chart-tip-label {
    color: var(--text2-color);
}

.chart-tip-value {
    font-weight: 600;
}

/* ==========================================================================
   Media Calendar View
   ========================================================================== */

/* A month of posters. Cells are poster-shaped, so one poster fills its day. */
.calendar-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    background: color-mix(in srgb, var(--bg-color) 88%, transparent);
    backdrop-filter: blur(12px);
}

.calendar-month-label {
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-color);
}

.calendar-year {
    font-weight: 400;
    color: var(--text2-color);
}

.calendar-nav {
    display: grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0 0 0.1rem;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--text2-color);
    background: none;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.calendar-nav:hover {
    color: var(--text-color);
    background: var(--bg2-color);
}

.calendar-weekdays,
.calendar-body {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.calendar-weekdays {
    padding-bottom: 0.3rem;
    border-bottom: 1px solid var(--ui-color);
}

.calendar-weekdays span {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
    text-transform: uppercase;
    color: var(--text2-color);
}

.calendar-body {
    gap: 1px;
    background: var(--ui-color);
}

.calendar-cell {
    position: relative;
    display: flex;
    aspect-ratio: 2 / 3;
    background: var(--bg-color);
}

.calendar-cell-other-month {
    background: var(--bg2-color);
}

.calendar-day-number {
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 1;
    min-width: 1.3rem;
    padding: 0 0.25rem;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.3rem;
    text-align: center;
    color: var(--text2-color);
    border-radius: 999px;
    pointer-events: none;
}

.calendar-cell:has(.calendar-media-item) .calendar-day-number {
    color: #fff;
    background: rgb(0 0 0 / 55%);
    backdrop-filter: blur(4px);
}

.calendar-cell-other-month .calendar-day-number {
    opacity: 0.5;
}

.calendar-cell.calendar-cell-today .calendar-day-number {
    font-weight: 700;
    color: var(--bg-color);
    background: var(--text3-color);
}

.calendar-day-content {
    display: grid;
    flex: 1;
    grid-template-columns: repeat(auto-fit, minmax(40%, 1fr));
    grid-auto-rows: 1fr;
    gap: 1px;
    min-width: 0;
    overflow: hidden;
}

.calendar-media-item {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-bottom: none;
}

.calendar-cell-other-month .calendar-media-item {
    opacity: 0.4;
}

.calendar-media-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    transition: transform 160ms ease;
}

.calendar-media-item:hover img {
    transform: scale(1.06);
}

.calendar-item-text {
    display: -webkit-box;
    margin: 1.7rem 0.3rem 0;
    overflow: hidden;
    font-size: 0.65rem;
    line-height: 1.25;
    color: var(--text-color);
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

/* A zoomed window has room to show whole posters in shorter rows. */
@container (min-width: 44rem) {
    .calendar-cell {
        aspect-ratio: auto;
        height: 10rem;
    }

    .calendar-day-content {
        display: flex;
        justify-content: center;
        gap: 0.35rem;
        padding: 1.8rem 0.5rem 0.5rem;
    }

    .calendar-media-item {
        flex: 0 1 auto;
        aspect-ratio: 2 / 3;
        border-radius: 3px;
        box-shadow: 0 2px 8px rgb(0 0 0 / 35%);
    }

    .calendar-cell:has(.calendar-media-item) .calendar-day-number {
        color: var(--text2-color);
        background: none;
        backdrop-filter: none;
    }

    .calendar-day-number {
        top: 5px;
        left: 5px;
    }
}

/* ==========================================================================
   Subscribe Modal
   ========================================================================== */

/* A small macOS window over a dimmed desk: traffic lights, a centered title,
   a text field with the blue default button, and the feeds as a grouped list. */
.subscribe-modal {
    position: fixed;
    inset: 0;
    z-index: 400;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 18vh 1rem 0;
}

.subscribe-backdrop {
    position: fixed;
    inset: 0;
    background: rgb(0 0 0 / 45%);
    border: 0;
    padding: 0;
    cursor: default;
}

.subscribe-container {
    position: relative;
    width: 100%;
    max-width: 26rem;
    color: var(--text-color);
    background: var(--bg-color);
    border: 1px solid var(--ui-color);
    border-radius: 11px;
    box-shadow:
        0 0 0 0.5px rgb(0 0 0 / 50%),
        0 30px 80px rgb(0 0 0 / 50%);
    overflow: hidden;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
}

.subscribe-bar {
    position: relative;
    display: flex;
    align-items: center;
    height: 2.4rem;
    padding: 0 0.75rem;
    background: var(--bg2-color);
    border-bottom: 1px solid var(--ui-color);
}

.subscribe-dots {
    display: flex;
    gap: 8px;
}

.subscribe-dots > * {
    position: relative;
    width: 12px;
    height: 12px;
    padding: 0;
    border: 1px solid rgb(0 0 0 / 15%);
    border-radius: 50%;
    background: var(--ui-color);
}

.subscribe-close-btn {
    background: #ff5f57;
    font: inherit;
    cursor: default;
}

.subscribe-dots i:nth-child(2) {
    background: #febc2e;
}

.subscribe-dots i:nth-child(3) {
    background: #28c840;
}

.subscribe-close-btn::before {
    content: "×";
    position: absolute;
    inset: 0;
    font-size: 9px;
    font-weight: 700;
    line-height: 10px;
    text-align: center;
    color: rgb(0 0 0 / 55%);
    opacity: 0;
    transition: opacity 100ms ease;
}

.subscribe-dots:hover .subscribe-close-btn::before {
    opacity: 1;
}

.subscribe-close-btn:focus-visible {
    outline: 2px solid var(--text3-color);
    outline-offset: 2px;
}

.subscribe-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-color);
    white-space: nowrap;
    pointer-events: none;
}

.subscribe-content {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.25rem 1.5rem 1.5rem;
}

.subscribe-section {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.subscribe-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-color);
}

.subscribe-form-inline {
    display: flex;
    gap: 0.5rem;
}

/* macOS text field. */
.subscribe-input {
    flex: 1;
    min-width: 0;
    height: 26px;
    padding: 0 0.6rem;
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--text-color);
    background: var(--bg-color);
    border: 1px solid color-mix(in srgb, var(--ui-color) 80%, #000 20%);
    border-radius: 6px;
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 6%);
    outline: none;
}

.subscribe-input:focus-visible {
    outline: 3px solid rgb(10 96 255 / 45%);
    outline-offset: 0;
}

.subscribe-input::placeholder {
    color: var(--text2-color);
}

/* The default push button. */
.subscribe-submit-btn {
    height: 26px;
    padding: 0 0.9rem;
    font-size: 0.85rem;
    font-family: inherit;
    font-weight: 500;
    color: #fff;
    background: linear-gradient(#3d86ff, #0a60ff);
    border: 1px solid #0a4fd0;
    border-radius: 6px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 15%);
    cursor: default;
    white-space: nowrap;
}

.subscribe-submit-btn:hover {
    background: linear-gradient(#5094ff, #1f6eff);
}

.subscribe-submit-btn:active {
    background: linear-gradient(#0a60ff, #084bc8);
}

.subscribe-submit-btn:focus-visible {
    outline: 3px solid rgb(10 96 255 / 45%);
    outline-offset: 1px;
}

/* The feeds, as a grouped list. */
.subscribe-rss-list {
    border: 1px solid var(--ui-color);
    border-radius: 8px;
    background: var(--bg2-color);
    overflow: hidden;
}

.subscribe-rss-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.4rem 0.35rem 0.6rem;
}

.subscribe-rss-row + .subscribe-rss-row {
    border-top: 1px solid var(--ui-color);
}

.subscribe-rss-link {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    font-size: 0.85rem;
    color: var(--text-color);
    text-decoration: none;
    border-bottom: none;
}

.subscribe-rss-link:hover span {
    text-decoration: underline;
}

.subscribe-rss-link svg {
    flex-shrink: 0;
    width: 14px;
    height: 14px;
    color: #f5a623;
}

/* A small push button. */
.subscribe-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 22px;
    padding: 0;
    color: var(--text-color);
    background: var(--bg-color);
    border: 1px solid color-mix(in srgb, var(--ui-color) 80%, #000 20%);
    border-radius: 6px;
    box-shadow: 0 1px 1px rgb(0 0 0 / 8%);
    cursor: default;
}

.subscribe-copy-btn svg {
    width: 13px;
    height: 13px;
}

.subscribe-copy-btn:hover {
    border-color: color-mix(in srgb, var(--ui-color) 60%, #000 40%);
}

.subscribe-copy-btn:focus-visible {
    outline: 3px solid rgb(10 96 255 / 45%);
    outline-offset: 0;
}

.subscribe-copy-btn.copied {
    color: #fff;
    background: linear-gradient(#3d86ff, #0a60ff);
    border-color: #0a4fd0;
}

.subscribe-trigger {
    cursor: pointer;
}

@media (max-width: 480px) {
    .subscribe-modal {
        padding-top: 10vh;
    }

    .subscribe-form-inline {
        flex-direction: column;
    }

    .subscribe-submit-btn {
        width: 100%;
    }
}

/* ==========================================================================
   Mermaid Diagrams
   ========================================================================== */

.content pre.mermaid {
    background: transparent;
    border: none;
    padding: 1.5rem 0;
    margin: 1.5rem 0;
    width: 100%;
    min-width: 0;
    transform: none;
    margin-left: 0;
    display: flex;
    justify-content: center;
}

.content pre.mermaid.mermaid-wide {
    width: 1200px;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
}

.mermaid {
    font-family:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Light mode mermaid overrides */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon {
    fill: var(--bg2-color) !important;
    stroke: var(--text-color) !important;
    stroke-width: 1px !important;
}

.mermaid .node .label,
.mermaid .nodeLabel {
    color: var(--text-color) !important;
    fill: var(--text-color) !important;
}

.mermaid .edgePath path.path {
    stroke: var(--text2-color) !important;
    stroke-width: 1.5px !important;
}

.mermaid .edgePath marker path {
    fill: var(--text2-color) !important;
    stroke: var(--text2-color) !important;
}

.mermaid .edgeLabel {
    background-color: var(--bg-color) !important;
    color: var(--text2-color) !important;
}

.mermaid .edgeLabel rect {
    fill: var(--bg-color) !important;
}

.mermaid .cluster rect {
    fill: var(--bg2-color) !important;
    stroke: var(--ui-color) !important;
    stroke-width: 1px !important;
}

.mermaid .cluster-label .nodeLabel {
    color: var(--text2-color) !important;
    fill: var(--text2-color) !important;
}

/* Decision diamond styling */
.mermaid .node.decision rect,
.mermaid .node polygon[style*="diamond"] {
    fill: var(--bg2-color) !important;
}

/* Accent color for highlighted nodes */
.mermaid .node rect[style*="d4edda"],
.mermaid .node rect[style*="fill:#d4edda"] {
    fill: color-mix(
        in srgb,
        var(--text3-color) 15%,
        var(--bg-color)
    ) !important;
    stroke: var(--text3-color) !important;
}

/* Dashed lines for skipped/cached steps */
.mermaid .edgePath path.path[style*="stroke-dasharray"] {
    stroke: var(--text2-color) !important;
    opacity: 0.6;
}

.mermaid .flowchart-link {
    stroke: var(--text2-color) !important;
}

.mermaid marker path {
    fill: var(--text2-color) !important;
}

/* Spoiler blur */
.spoiler {
    position: relative;
    filter: blur(6px);
    user-select: none;
    transition: filter 0.3s ease;
    cursor: pointer;
}

.spoiler.revealed {
    filter: none;
    user-select: auto;
    cursor: auto;
}

.spoiler-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    background: var(--bg-color);
    border: 1px solid var(--ui-color);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--text2-color);
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.spoiler.revealed + .spoiler-label,
.spoiler.revealed ~ .spoiler-label {
    opacity: 0;
    pointer-events: none;
}

.spoiler-wrapper {
    position: relative;
    cursor: pointer;
}

.spoiler-wrapper:not(.revealed):hover .spoiler {
    filter: blur(3px);
}

.spoiler-wrapper:not(.revealed):hover .spoiler-label {
    background: var(--text2-color);
    color: var(--bg-color);
}

.spoiler-wrapper .spoiler-label {
    position: absolute;
    top: 2rem;
    transition: background 0.3s ease, color 0.3s ease;
}

.spoiler-wrapper.revealed .spoiler-label {
    opacity: 0;
    pointer-events: none;
}

.spoiler-wrapper.revealed .spoiler {
    filter: none;
    user-select: auto;
    cursor: auto;
}

/* Dark mode mermaid overrides */
@media (prefers-color-scheme: dark) {
    .mermaid .node rect[style*="d4edda"],
    .mermaid .node rect[style*="fill:#d4edda"] {
        fill: color-mix(
            in srgb,
            var(--text3-color) 15%,
            var(--bg-color)
        ) !important;
        stroke: var(--text3-color) !important;
    }

    .mermaid .node rect[style*="d4edda"] + .label,
    .mermaid .node rect[style*="fill:#d4edda"] + .label {
        color: var(--text-color) !important;
        fill: var(--text-color) !important;
    }
}

/* ==========================================================================
   Accessibility
   ========================================================================== */

/* Skip link: hidden until focused via keyboard */
.skip-link {
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-150%);
    z-index: 1000;
    margin: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--text-color);
    color: var(--bg-color);
    border-radius: 4px;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* Visible focus indicator for keyboard navigation */
:focus-visible {
    outline: 2px solid var(--text3-color);
    outline-offset: 2px;
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================================
   Component polish (site-wide): structural traits — uppercase table headers,
   dense chart labels, rounded panels — adapted from Buttondown's
   internal-tools/artifact-kit. Colors come from the :root palette.
   ============================================================================ */

/* Inline code chips. */
.content code {
    background: var(--chip-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Code blocks: rounder panel. */
.content pre {
    border-radius: 10px;
}

/* Tables: uppercase muted header, row hover, rounded panel. */
.content table {
    outline: none;
    border: 1px solid var(--ui-color);
    border-radius: 10px;
    overflow: hidden;
}

.content table th,
.content table td {
    border: none;
    border-bottom: 1px solid var(--ui-color);
    padding: 9px 14px;
    font-size: 0.85rem;
}

.content table th {
    background: var(--bg3-color);
    color: var(--text2-color);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.content table tr:last-child td {
    border-bottom: none;
}

.content table tbody tr:hover td {
    background: var(--bg3-color);
}

/* Section headers get a hairline rule. */
.content h2,
.content h3 {
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ui-color);
}

/* Home page section titles: smaller and bolder, with no rule. */
.content.home .section-title {
    font-size: 0.75rem !important;
    font-weight: 700;
    padding-bottom: 0;
    margin-bottom: 0.5rem;
    border-bottom: none;
}

/* Charts: dense monospace axis labels and an uppercase caption. */
.content .chart-axis-label {
    fill: var(--text2-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
}

.content figure.chart figcaption {
    font-style: normal;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---- ERD (side-by-side entity tables; connectors drawn by erd.js) -------- */
figure.erd {
    position: relative;
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: var(--bg-color);
    border: 1px solid var(--ui-color);
    border-radius: 10px;
    /* Break out of the narrow content column so the entities fit on one row. */
    width: max-content;
    max-width: 96vw;
    margin-left: 50%;
    transform: translateX(-50%);
    overflow-x: auto;
}

.erd-grid {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: center;
    gap: 64px;
}

/* width:auto overrides the global table width:100% so cards size to content. */
.content table.erd-entity {
    width: auto;
    margin: 0;
    background: var(--bg2-color);
    border: 1px solid var(--ui-color);
    border-radius: 8px;
}

.content table.erd-entity th {
    text-align: center;
    font-size: 0.7rem;
}

.content table.erd-entity td {
    padding: 5px 12px;
    font-size: 0.85rem;
    white-space: nowrap;
}

.content table.erd-entity tbody tr:hover td {
    background: var(--bg3-color);
}

.erd-keycell {
    width: 1px;
    text-align: center;
}

.erd-name {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.erd-type {
    color: var(--text2-color);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
}

.erd-badge {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--text2-color);
    border: 1px solid var(--ui-color);
    border-radius: 3px;
    padding: 0 3px;
}

/* PK = accent, FK = muted: distinct in both light and dark palettes. */
.erd-pk .erd-badge {
    color: var(--text3-color);
    border-color: color-mix(in srgb, var(--text3-color) 50%, var(--ui-color));
}

.erd-fk .erd-badge {
    color: var(--text2-color);
    border-color: var(--ui-color);
}

.erd-lines {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

.erd-line {
    fill: none;
    stroke: var(--text3-color);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
    opacity: 0.85;
}

.erd-line-dot {
    fill: var(--text3-color);
}

/* ---- Tabbed card (.tabs; switching handled by tabs.js) ------------------- */
.tabs {
    margin: 1.5rem 0;
    background: var(--bg2-color);
    border: 1px solid var(--ui-color);
    border-radius: 10px;
    overflow: hidden;
}

.tabs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-bottom: 1px solid var(--ui-color);
    background: var(--bg3-color);
}

.tabs-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 8px 16px;
    font-family: inherit;
    font-size: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text2-color);
    cursor: pointer;
}

.tabs-tab:hover {
    color: var(--text-color);
}

.tabs-tab[aria-selected="true"] {
    color: var(--text-color);
    border-bottom-color: var(--text3-color);
}

.tabs-panel[hidden] {
    display: none;
}

/* Tables sit flush inside the card; the card supplies the frame. Wide tables
   (e.g. a denormalized view) scroll horizontally rather than wrapping. */
.content .tabs-panel {
    overflow-x: auto;
}

.content .tabs-panel table {
    margin: 0;
    width: 100%;
    border: none;
    border-radius: 0;
}

.content .tabs-panel table th,
.content .tabs-panel table td {
    white-space: nowrap;
}

.content .tabs-panel table tr:last-child td {
    border-bottom: none;
}

.teleplay {
    font-family: "Courier New", Courier, monospace;
    font-size: 0.9em;
    line-height: 1.5;
    margin: 2rem auto;
    max-width: 36ch;
}

.teleplay .character {
    text-align: center;
    text-transform: uppercase;
    margin-top: 1em;
    margin-bottom: 0;
}

.teleplay .dialogue {
    margin-top: 0;
    margin-bottom: 0;
    text-indent: 0;
}