/* ===========================================================================
   Prasun — design system.

   The concept is a technical dossier: a draughtsman's sheet, not a web app.
   Light mode is paper and ink; dark mode is an actual blueprint — deep process
   blue with cyan linework. Everything is set on a 32px drafting grid.

   What this deliberately refuses, because it is what every generated portfolio
   converges on: a centred column, rounded cards with drop shadows, pill-shaped
   tags, and a sans-serif-everything type stack. Instead:

     - Asymmetric. A fixed rail on the left, content offset from it, and a
       margin column on the right carrying dates, tags and index numbers the
       way annotations sit in the margin of a drawing.
     - Ruled, not boxed. Hairlines and corner ticks separate things. There is
       not one border-radius in this file.
     - Three typefaces doing three jobs: a high-contrast serif for display, a
       reading serif for prose, and a mono for every label, number and control.
       Body copy is set in a serif because a blog is for reading, and because
       it is the fastest way to not look like a dashboard.
   =========================================================================== */

:root {
    /* --- paper ------------------------------------------------------------ */
    --bg:        #efebe1;
    --surface:   #f7f4ec;
    --ink:       #16150f;
    --muted:     #6b6659;
    --faint:     #948d7c;
    --rule:      #cbc3b0;
    --rule-soft: #ddd6c6;
    --accent:    #1f3e93;
    --accent-bg: #dfe3f2;
    --grid:      rgba(22, 21, 15, .05);
    --bloom:     rgba(31, 62, 147, .07);
    --bubble-line: rgba(31, 62, 147, .34);
    --halo:      transparent;

    --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
    --font-body:    "Newsreader", Georgia, "Times New Roman", serif;
    --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

    --rail: 4.5rem;
    --unit: 32px;             /* the drafting grid everything aligns to */
    --measure: 60ch;
    --margin-col: 14rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        /* --- blueprint ---------------------------------------------------- */
        --bg:        #0a1526;
        --surface:   #0e1b30;
        --ink:       #dbe6f4;
        --muted:     #8098b6;
        --faint:     #5f7796;
        --rule:      rgba(150, 190, 230, .26);
        --rule-soft: rgba(150, 190, 230, .13);
        --accent:    #7fd4f5;
        --accent-bg: rgba(127, 212, 245, .12);
        --grid:      rgba(150, 190, 230, .07);
        --bloom:     rgba(127, 212, 245, .09);
        --bubble-line: rgba(127, 212, 245, .46);
        /* Only the blueprint gets a halo. The same glow on paper turns into a
           smudge — light-on-dark blooms, dark-on-light just muddies. */
        --halo:      color-mix(in srgb, var(--accent) 40%, transparent);
    }
}

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

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

body {
    margin: 0;
    padding-left: var(--rail);
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.62;
    font-optical-sizing: auto;
    -webkit-font-smoothing: antialiased;
}

/* The sheet. A faint drafting grid under everything. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, var(--grid) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
    background-size: var(--unit) var(--unit);
}

a {
    color: var(--accent);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    padding-bottom: 1px;
}

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

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

.skip-link {
    position: absolute;
    left: -9999px;
    background: var(--accent);
    color: var(--bg);
    padding: .6rem 1rem;
    font-family: var(--font-mono);
    font-size: .8rem;
}
.skip-link:focus { left: 1rem; top: 1rem; z-index: 40; }

/* ---------------------------------------------------------------------------
   Type
   --------------------------------------------------------------------------- */

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.015em;
    margin: 0;
}

h1 { font-size: clamp(2.75rem, 7vw, 5rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.6rem); }
h3 { font-size: 1.35rem; }

/* Every label, number, control and piece of metadata. */
.mono,
.label,
.meta,
.index-no,
.tag,
.stamp,
.nav-links a,
.rail-mark,
button,
input,
select,
textarea,
.button,
.table th,
.pager,
code, kbd, pre {
    font-family: var(--font-mono);
}

.label {
    font-size: .68rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--faint);
    display: block;
}

.meta {
    font-size: .74rem;
    letter-spacing: .06em;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

/* § 01 — the running index down the side of the page. */
.index-no {
    font-size: .72rem;
    letter-spacing: .1em;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    text-shadow: 0 0 14px var(--halo);
}

.stamp { text-shadow: 0 0 14px var(--halo); }
.status::before { text-shadow: 0 0 12px var(--halo); }

/* ---------------------------------------------------------------------------
   The rail — a fixed spine holding the wordmark, turned on its side.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Bubbles rising up the rail.

   Per-bubble variation lives in `:nth-child` rules rather than inline styles,
   because the Content-Security-Policy has no `unsafe-inline` for style — one
   `style="..."` attribute would force the policy to be loosened site-wide. Each
   bubble sets four custom properties and they all share one keyframe.

   Tuned to be calm rather than fizzy: long durations (11-24s), no two the same,
   and prime-ish numbers so the column never falls into a visible pulse. Real
   bubbles also wander sideways as they rise, which is why the keyframes move on
   X as well — a column of perfectly vertical dots reads as a progress bar.
   --------------------------------------------------------------------------- */

.rail-bubbles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.rail-bubble {
    position: absolute;
    bottom: -14px;
    left: var(--x);
    width: var(--size);
    height: var(--size);
    border-radius: 50%;
    border: 1px solid var(--bubble-line);
    opacity: 0;
    animation: rail-rise var(--dur) linear var(--delay) infinite;
    will-change: transform, opacity;
}

/* Every third one is a solid speck instead of a ring, so the column has some
   density variation rather than reading as one repeated object. */
.rail-bubble:nth-child(3n) {
    border: 0;
    background: var(--bubble-line);
}

.rail-bubble:nth-child(1)  { --x: 22%; --size: 6px;  --dur: 17s; --delay: -1s; }
.rail-bubble:nth-child(2)  { --x: 58%; --size: 4px;  --dur: 23s; --delay: -9s; }
.rail-bubble:nth-child(3)  { --x: 38%; --size: 3px;  --dur: 13s; --delay: -4s; }
.rail-bubble:nth-child(4)  { --x: 71%; --size: 7px;  --dur: 19s; --delay: -14s; }
.rail-bubble:nth-child(5)  { --x: 14%; --size: 5px;  --dur: 11s; --delay: -6s; }
.rail-bubble:nth-child(6)  { --x: 47%; --size: 3px;  --dur: 21s; --delay: -18s; }
.rail-bubble:nth-child(7)  { --x: 64%; --size: 5px;  --dur: 15s; --delay: -11s; }
.rail-bubble:nth-child(8)  { --x: 30%; --size: 8px;  --dur: 24s; --delay: -3s; }
.rail-bubble:nth-child(9)  { --x: 52%; --size: 4px;  --dur: 12s; --delay: -20s; }
.rail-bubble:nth-child(10) { --x: 78%; --size: 3px;  --dur: 18s; --delay: -7s; }
.rail-bubble:nth-child(11) { --x: 26%; --size: 5px;  --dur: 14s; --delay: -16s; }
.rail-bubble:nth-child(12) { --x: 44%; --size: 6px;  --dur: 22s; --delay: -12s; }

@keyframes rail-rise {
    0%   { transform: translate3d(0, 0, 0) scale(.55); opacity: 0; }
    10%  { opacity: .8; }
    35%  { transform: translate3d(5px, -32vh, 0) scale(1); }
    65%  { transform: translate3d(-4px, -64vh, 0) scale(1); }
    88%  { opacity: .5; }
    100% { transform: translate3d(3px, -104vh, 0) scale(1.08); opacity: 0; }
}

.rail {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--rail);
    z-index: 20;
    border-right: 1px solid var(--rule);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(6px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 1.35rem 0;
    overflow: hidden;
}

.rail-mark,
.rail-tick,
.rail-year {
    position: relative;
    z-index: 1;
}

.rail-mark {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: .72rem;
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--ink);
    border: 0;
    padding: 0;
}

.rail-mark:hover { color: var(--accent); }


.rail-tick {
    width: 11px;
    height: 1px;
    background: var(--rule);
}

.rail-year {
    writing-mode: vertical-rl;
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .2em;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Header
   --------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 15;
    border-bottom: 1px solid var(--rule);
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    backdrop-filter: blur(8px);
}

.nav {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 2rem;
    padding: 1rem 2.5rem 1rem 3rem;
}

.nav-title {
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--faint);
}

.nav-links {
    display: flex;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links a {
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
    border: 0;
}

.nav-links a:hover { color: var(--accent); }
.nav-admin { color: var(--accent) !important; }

/* ---------------------------------------------------------------------------
   The sheet — content left, annotations right.
   --------------------------------------------------------------------------- */

main {
    position: relative;
    z-index: 1;
    padding: 0 2.5rem 7rem 3rem;
}

.sheet {
    max-width: 78rem;
}

/* One row of the document: body on the left, margin notes on the right. */
.row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--margin-col);
    gap: 3.5rem;
    align-items: start;
}

.row-note {
    padding-top: .5rem;
    border-left: 1px solid var(--rule-soft);
    padding-left: 1.1rem;
}

/* Section heading: a ruled band with a running number. */
.band {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    border-top: 1px solid var(--ink);
    padding-top: .7rem;
    margin: 5rem 0 2rem;
}

.band:first-of-type { margin-top: 3.5rem; }
.band h2 { flex: 1; }
.band .index-no { flex: none; }
.band .more { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; border: 0; }

/* ---------------------------------------------------------------------------
   Hero
   --------------------------------------------------------------------------- */

.hero {
    padding: 5.5rem 0 4rem;
    max-width: 68rem;
}

.hero h1 {
    font-size: clamp(2.5rem, 8.5vw, 8rem);
    line-height: .9;
    letter-spacing: -.03em;
    margin: 1.25rem 0 0;
}

.hero-rule {
    border: 0;
    border-top: 1px solid var(--ink);
    margin: 2.25rem 0 1.5rem;
}

.hero-cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 3.5rem;
}

.headline {
    font-family: var(--font-mono);
    font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--muted);
    margin: 0;
}

.intro {
    font-size: 1.2rem;
    line-height: 1.5;
    margin: 0;
    text-wrap: pretty;
}

.stamp {
    display: inline-block;
    font-size: .66rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: .3rem .65rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-top: 2rem;
}

/* ---------------------------------------------------------------------------
   Entries — the thing that replaces cards. Ruled rows with corner ticks.
   --------------------------------------------------------------------------- */

.entry {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--margin-col);
    gap: 3.5rem;
    align-items: start;
    border-top: 1px solid var(--rule);
    padding: 1.9rem 0;
    position: relative;
}

.entry:last-child { border-bottom: 1px solid var(--rule); }

/* Draughting corner ticks, drawn only on the left edge so rows stay quiet. */
.entry::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    width: 9px;
    height: 9px;
    border-left: 1px solid var(--accent);
    border-top: 1px solid var(--accent);
    opacity: 0;
    transition: opacity .25s ease;
}

.entry:hover::before { opacity: 1; }

/* A soft bloom behind the row on hover. A radial gradient rather than a
   box-shadow: a shadow has an edge, and an edge on a ruled document reads as a
   card creeping back in. This has no boundary — the row just warms slightly. */
.entry::after {
    content: "";
    position: absolute;
    inset: -1px -2.5rem;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    background: radial-gradient(58% 130% at 22% 50%, var(--bloom), transparent 72%);
    transition: opacity .5s ease;
}

.entry:hover::after { opacity: 1; }

.entry-title {
    font-family: var(--font-display);
    font-size: 2rem;
    line-height: 1.05;
    margin: .2rem 0 .5rem;
}

.entry-title a { color: var(--ink); border: 0; }
.entry:hover .entry-title a { color: var(--accent); }

.entry-summary {
    margin: 0;
    color: var(--muted);
    max-width: var(--measure);
    text-wrap: pretty;
}

.entry-note {
    border-left: 1px solid var(--rule-soft);
    padding-left: 1.1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.entry-links {
    display: flex;
    gap: 1.25rem;
    margin-top: .9rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
}

/* Tags: mono, comma-thin, no pills. */
.tags {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .85rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tag {
    font-size: .7rem;
    letter-spacing: .08em;
    color: var(--muted);
    border: 0;
}

a.tag:hover { color: var(--accent); }
.tag-active { color: var(--accent); }
.tag::before { content: "/ "; color: var(--faint); }

/* Status reads as a stamped classification. */
.status {
    font-family: var(--font-mono);
    font-size: .66rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muted);
}
.status::before { content: "▚ "; color: var(--accent); }
.status-shipped::before  { content: "■ "; }
.status-in_progress::before { content: "▨ "; }
.status-idea::before     { content: "□ "; }
.status-archived::before { content: "▢ "; color: var(--faint); }

/* ---------------------------------------------------------------------------
   Long-form reading
   --------------------------------------------------------------------------- */

.page-head { padding: 4rem 0 1rem; }
.page-head h1 { max-width: 20ch; }
.page-head .intro { margin-top: 1.25rem; max-width: 52ch; }

.article-head {
    padding: 4rem 0 2.5rem;
    border-bottom: 1px solid var(--ink);
    margin-bottom: 3rem;
}

.article-head h1 { max-width: 22ch; margin: 1rem 0 0; }
.lede { font-size: 1.25rem; color: var(--muted); margin: 1.25rem 0 0; max-width: 46ch; text-wrap: pretty; }

.prose {
    max-width: var(--measure);
    font-size: 1.12rem;
    line-height: 1.72;
}

.prose > * + * { margin-top: 1.15em; }
.prose h2 { font-size: 1.9rem; margin-top: 2.75rem; }
.prose h3 { font-size: 1.3rem; margin-top: 2.25rem; font-family: var(--font-display); }
.prose ul, .prose ol { padding-left: 1.15rem; }
.prose li + li { margin-top: .35rem; }
.prose strong { font-weight: 600; }

.prose blockquote {
    margin-left: 0;
    padding-left: 1.4rem;
    border-left: 2px solid var(--accent);
    color: var(--muted);
    font-style: italic;
}

.prose code {
    font-size: .82em;
    background: var(--accent-bg);
    padding: .1em .35em;
}

.prose pre {
    background: var(--surface);
    border: 1px solid var(--rule);
    border-left: 2px solid var(--accent);
    padding: 1.1rem 1.3rem;
    overflow-x: auto;
    font-size: .82rem;
    line-height: 1.6;
}

.prose pre code { background: none; padding: 0; }

.prose table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-mono);
    font-size: .8rem;
    display: block;
    overflow-x: auto;
}
.prose th, .prose td { text-align: left; padding: .5rem .8rem; border-bottom: 1px solid var(--rule-soft); }
.prose th { text-transform: uppercase; letter-spacing: .1em; font-size: .68rem; color: var(--faint); }

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

.back-link {
    margin-top: 4rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Controls
   --------------------------------------------------------------------------- */

.button {
    display: inline-block;
    font-size: .74rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink);
    background: none;
    border: 0;
    border-bottom: 1px solid var(--ink);
    padding: .3rem 0;
    cursor: pointer;
}

.button:hover { color: var(--accent); border-bottom-color: var(--accent); }

.button-ghost { color: var(--muted); border-bottom-color: var(--rule); }
.link-button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.inline { display: inline; }

.search {
    display: flex;
    gap: 1rem;
    align-items: baseline;
    border-bottom: 1px solid var(--rule);
    padding-bottom: .5rem;
    max-width: 28rem;
    margin: 2rem 0 1.5rem;
}
.search input { flex: 1; border: 0; background: none; padding: 0; }
.search button { border: 0; background: none; cursor: pointer; color: var(--accent); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; }

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1rem;
    padding-bottom: 1.75rem;
}

/* Ruled buttons, shared by the work filter and the surprise topics. The
   selected one is the only lit thing in the row, so which view you are in is
   readable at a glance rather than inferred from the list below it. */
.filter-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    margin: 2rem 0 .5rem;
}

.filter-option {
    display: inline-flex;
    align-items: baseline;
    gap: .5rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
    border-bottom: 1px solid var(--rule);
    padding-bottom: .35rem;
}

.filter-option:hover {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.filter-option.is-current {
    color: var(--accent);
    border-bottom-color: var(--accent);
    text-shadow: 0 0 14px var(--halo);
}

.filter-count {
    font-size: .66rem;
    color: var(--faint);
    font-variant-numeric: tabular-nums;
}

.filter-option.is-current .filter-count { color: var(--accent); }

.pager {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.pager span { color: var(--faint); font-variant-numeric: tabular-nums; }

/* Forms */
.stack { display: flex; flex-direction: column; gap: 1.6rem; max-width: 46rem; }
label { display: block; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.hint { text-transform: none; letter-spacing: .02em; color: var(--faint); font-size: .72rem; }

input[type="text"], input[type="url"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], textarea, select {
    width: 100%;
    margin-top: .5rem;
    padding: .5rem 0;
    background: none;
    color: var(--ink);
    border: 0;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-mono);
    font-size: .9rem;
}

input:focus, textarea:focus, select:focus { border-bottom-color: var(--accent); outline: none; }
textarea { resize: vertical; line-height: 1.65; }
.field-row { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
.checkbox { display: flex; gap: .7rem; align-items: flex-start; }
.checkbox input { width: auto; margin-top: .15rem; }
.field-error { color: #b3261e; font-family: var(--font-mono); font-size: .72rem; margin: -1rem 0 0; }
@media (prefers-color-scheme: dark) { .field-error { color: #ff9d8f; } }

.editor-head { display: flex; justify-content: space-between; align-items: baseline; }
.preview-pane { border: 1px solid var(--rule); border-left: 2px solid var(--accent); padding: 1.25rem 1.5rem; min-height: 12rem; }

.login-wrap { max-width: 24rem; padding: 5rem 0; }

.alert {
    font-family: var(--font-mono);
    font-size: .74rem;
    letter-spacing: .06em;
    color: var(--accent);
    border-left: 2px solid var(--accent);
    padding: .6rem 0 .6rem 1rem;
    margin: 0 0 2rem;
}
.alert-error { color: #b3261e; border-left-color: #b3261e; }
@media (prefers-color-scheme: dark) { .alert-error { color: #ff9d8f; border-left-color: #ff9d8f; } }

/* Admin */
.stat-row { display: flex; flex-wrap: wrap; gap: 3.5rem; margin: 2.5rem 0; }
.stat strong { display: block; font-family: var(--font-display); font-size: 3rem; line-height: 1; font-weight: 400; }
.stat span { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); }
.admin-actions { display: flex; flex-wrap: wrap; gap: 2rem; align-items: baseline; margin-bottom: 2.5rem; }

.table { width: 100%; border-collapse: collapse; font-size: .82rem; margin: 1.5rem 0 3rem; display: block; overflow-x: auto; }
.table th, .table td { text-align: left; padding: .7rem 1rem .7rem 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.table th { font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); border-bottom-color: var(--rule); }
.row-actions { display: flex; gap: 1.25rem; flex-wrap: wrap; font-family: var(--font-mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; }
.muted { color: var(--faint); font-family: var(--font-mono); font-size: .72rem; }
.pill { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; }
.pill-live { color: var(--accent); }
.pill-draft { color: var(--faint); }

.empty { color: var(--faint); font-family: var(--font-mono); font-size: .8rem; letter-spacing: .08em; padding: 4rem 0; }

/* ---------------------------------------------------------------------------
   /surprise — one short note, centred on its own sheet.

   Note: the original styling for this page was lost and this is a rewrite in
   the new design system, so it is worth a look to check it still reads the way
   it was meant to.
   --------------------------------------------------------------------------- */

.surprise {
    max-width: 34rem;
    padding: 7rem 0 5rem;
}

.surprise-mark {
    font-family: var(--font-mono);
    color: var(--accent);
    font-size: 1rem;
    letter-spacing: .5em;
    margin: 0 0 2.5rem;
    text-shadow: 0 0 18px var(--halo);
}

.surprise-card {
    margin: 0;
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    padding: 2rem 0 2.25rem;
}

.surprise-line {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3.1rem);
    line-height: 1.06;
    letter-spacing: -.02em;
    margin: 0 0 1.1rem;
    text-wrap: balance;
}

.surprise-note {
    color: var(--muted);
    margin: 0;
    font-size: 1.05rem;
    text-wrap: pretty;
}

/* Marks the second line as a revealed answer rather than a continuation. */
.surprise-answer {
    display: block;
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: .5rem;
}

/* Credit where the content came from. Only shown when it really is live. */
.surprise-source {
    font-family: var(--font-mono);
    font-size: .64rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
    margin: 1.25rem 0 0;
}

.surprise-again {
    margin-top: 2.5rem;
    display: flex;
    gap: 1.5rem;
    font-family: var(--font-mono);
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
}

/* ---------------------------------------------------------------------------
   Spacing helpers.

   These exist so no template needs a `style` attribute. That is not a style
   preference — a Content-Security-Policy without `unsafe-inline` blocks inline
   style attributes outright, and one stray `style="..."` is enough to force the
   policy to be loosened for the whole site.
   --------------------------------------------------------------------------- */

.gap-xs { margin-top: .6rem; }
.gap-sm { margin: .75rem 0 0; }
.gap-md { margin-top: 1.25rem; }
.gap-lg { margin-top: 2.5rem; }

.login-title { font-size: 2.5rem; margin-top: .75rem; }

/* ---------------------------------------------------------------------------
   Footer
   --------------------------------------------------------------------------- */

.site-footer {
    position: relative;
    z-index: 1;
    border-top: 1px solid var(--ink);
    margin-left: 0;
    padding: 1.75rem 2.5rem 2.5rem 3rem;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 2rem;
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--faint);
}

.footer-inner p { margin: 0; }
.footer-links { display: flex; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.footer-links a { border: 0; color: var(--muted); }
.footer-links a:hover { color: var(--accent); }

/* ---------------------------------------------------------------------------
   Narrow screens: the rail thins, the margin column folds under its row.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .rail-bubbles { display: none; }
}

@media (max-width: 62rem) {
    :root { --rail: 2.5rem; --margin-col: 0; }

    .rail-year { display: none; }
    .rail-mark { font-size: .62rem; letter-spacing: .26em; }

    .nav { padding: .9rem 1.25rem; gap: 1rem; flex-wrap: wrap; }
    .nav-links { gap: 1.1rem; }
    main { padding: 0 1.25rem 4rem; }
    .site-footer { padding: 1.5rem 1.25rem 2rem; }

    .row, .entry, .hero-cols {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.25rem;
    }

    .row-note, .entry-note {
        border-left: 0;
        border-top: 1px solid var(--rule-soft);
        padding-left: 0;
        padding-top: .9rem;
    }

    .hero { padding: 3rem 0 2.5rem; }
    .band { margin-top: 3.5rem; }
}