/* Stories — fiction, set as a book. The shared system (style.css) provides
   the tokens, nav, footer, hero, and the article column; this file adds the
   index, the cover, the contents, the chapter plates with their instrument
   readouts, the printed document, and the reading bar that follows a long
   read. Each chapter carries its own accent in --st-acc; the site's gold
   stays for anything that belongs to the site rather than the story. */

:root {
    --st-mono: 'Berkeley Mono', 'Geist Mono', ui-monospace, SFMono-Regular,
               Menlo, Monaco, monospace;
    --st-paper: var(--fg-bright);
    --st-paper-ink: var(--bg);
    --st-paper-dim: #6b665c;
    --st-paper-rule: rgba(11, 11, 10, 0.16);
    --st-bar-h: 3rem;
    /* One vertical rhythm for the whole page: --st-gap between the parts
       of a section, --st-gap-lg between sections. */
    --st-gap: clamp(2rem, 5vw, 3rem);
    --st-gap-lg: clamp(3rem, 7vw, 4.5rem);
    /* The reading column: .article-body's 38em, at the prose size, so the
       document and its kicker measure the same as the text above them. */
    --st-column: calc(38 * clamp(1.05rem, 1.5vw, 1.15rem));
    /* The full-bleed width. 100vw counts a classic scrollbar; the page
       script measures one and sets --st-sbw so the bleed stops short of it. */
    --st-vw: calc(100vw - var(--st-sbw, 0px));
}

/* The cover backdrop and the chapter plates bleed past the column;
   nothing else should scroll sideways for them. */
html, body { overflow-x: clip; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---- Index ---- */

.st-list {
    display: flex;
    flex-direction: column;
    gap: clamp(2.5rem, 6vw, 4rem);
    border-top: 1px solid var(--border);
    padding-top: clamp(2.5rem, 6vw, 4rem);
}

.st-item {
    display: block;
    text-decoration: none;
    color: inherit;
}

.st-item-head {
    display: flex;
    align-items: baseline;
    gap: 1.25rem;
    margin-bottom: 0.4rem;
}

.st-item-title {
    font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    letter-spacing: -0.02em;
    color: var(--fg-bright);
    transition: color var(--dur) var(--ease);
}

.st-item-year {
    font-family: var(--sans);
    font-size: 0.8125rem;
    color: var(--fg-dim);
    font-variant-numeric: tabular-nums;
}

.st-item-meta {
    display: block;
    margin-top: 0.35rem;
    font-family: var(--sans);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

/* The cover, framed like a project screenshot. */
.st-item-shot {
    display: block;
    margin-top: 1.5rem;
    overflow: hidden;
    border-radius: 4px;
    border: 1px solid var(--border);
}

.st-item-shot img {
    width: 100%;
    filter: saturate(0.9) brightness(0.94);
    transition: filter 300ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .st-item:hover .st-item-title { color: rgb(var(--hue-stories)); }
    .st-item:hover .st-item-shot img { filter: saturate(1) brightness(1); }
}

/* ---- Cover ---- */

.st-cover {
    position: relative;
    padding: clamp(3rem, 8vw, 6rem) 0 var(--st-gap);
}

.st-cover .masthead {
    margin-bottom: clamp(1.25rem, 3vw, 1.75rem);
}

/* The story's artwork, full bleed behind the title. Screen-blended, so its
   black is the page's own warm black and only the light shows; masked so
   it dissolves before the contents begin. */
.st-backdrop {
    position: absolute;
    z-index: -1;
    top: -14rem;
    left: calc(50% - var(--st-vw) / 2);
    width: var(--st-vw);
    max-width: none;
    height: calc(100% + 22rem);
    object-fit: cover;
    object-position: 50% 45%;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.95;
    -webkit-mask-image: linear-gradient(to bottom, #000 40%, transparent);
    mask-image: linear-gradient(to bottom, #000 40%, transparent);
}

/* The shared masthead staggers eight letters; a longer title's tail
   arrives with the eighth rather than all at once. */
.st-cover .masthead-word > span:nth-child(n+9) { animation-delay: 315ms; }

.st-cover-body {
    animation: fade 900ms var(--ease) 450ms backwards;
}

/* Sits over the artwork, so a step brighter than the count line elsewhere. */
.st-kind {
    margin: 0;
    color: var(--fg-muted);
}

/* Only ever holds the Resume link, and only once there is somewhere to
   resume from. */
.st-actions {
    margin-top: 1.25rem;
    font-family: var(--sans);
    font-size: 0.875rem;
}

.st-actions:empty,
.st-actions:has(> [hidden]:only-child) { display: none; }

.st-resume {
    color: rgb(var(--hue-stories));
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .st-resume:hover { color: var(--fg-bright); }
}

/* ---- Contents ---- */

.st-contents {
    padding-top: var(--st-gap);
    padding-bottom: var(--st-gap-lg);
    scroll-margin-top: var(--st-bar-h);
}

.st-contents .label {
    margin-bottom: clamp(1rem, 2.5vw, 1.5rem);
}

.st-toc {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 clamp(2rem, 5vw, 4rem);
}

.st-toc-item a {
    display: flex;
    align-items: baseline;
    gap: 0.8rem;
    padding: 0.55rem 0;
    text-decoration: none;
    color: inherit;
}

/* Each chapter's accent, the way the homepage rows carry their hue. */
.st-toc-dot {
    flex: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--st-acc, var(--fg-dim));
    box-shadow: 0 0 10px color-mix(in srgb, var(--st-acc, var(--fg-dim)) 55%, transparent);
    transform: translateY(-1px);
}

.st-toc-item.is-document .st-toc-dot {
    border-radius: 1px;
    background: var(--st-paper);
    box-shadow: none;
}

.st-toc-n {
    font-family: var(--st-mono);
    font-size: 0.8125rem;
    color: var(--fg-dim);
    font-variant-numeric: tabular-nums;
}

.st-toc-title {
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    color: var(--fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--dur) var(--ease);
}

.st-toc-dots {
    flex: 1;
    min-width: 2rem;
    border-bottom: 1px dotted var(--fg-dim);
    opacity: 0.5;
    transform: translateY(-0.3em);
}

.st-toc-time {
    font-family: var(--sans);
    font-size: 0.8125rem;
    color: var(--fg-dim);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.st-toc-item.is-current .st-toc-title { color: var(--st-acc, var(--fg-bright)); }

@media (hover: hover) and (pointer: fine) {
    .st-toc-item a:hover .st-toc-title { color: var(--st-acc, var(--accent)); }
}

@media (max-width: 720px) {
    .st-toc { grid-template-columns: 1fr; }
}

/* ---- Chapter ---- */

/* A chapter begins at its plate, so a jump lands the art flush under the
   reading bar; the space between chapters is carried below each one. */
.st-chapter {
    padding-bottom: var(--st-gap-lg);
    scroll-margin-top: var(--st-bar-h);
}

.st-chapter ::selection {
    background: color-mix(in srgb, var(--st-acc, var(--accent)) 32%, transparent);
    color: var(--fg-bright);
}

/* The plate: the chapter's art, full bleed, with its number and title set
   into the fog and aligned to the reading column. The gradient stands in
   until the canvas is drawn, and stands alone without JavaScript. */
.st-plate {
    position: relative;
    width: var(--st-vw);
    margin-left: calc(50% - var(--st-vw) / 2);
    aspect-ratio: 21 / 8;
    min-height: 18rem;
    max-height: 72vh;
    overflow: hidden;
    background: linear-gradient(160deg, var(--st-c0), var(--st-c1) 55%, var(--st-c2));
    color: var(--st-ink, var(--fg-bright));
}

.st-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.st-plate::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 55%;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.55));
    pointer-events: none;
}

.st-plate-text {
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(1.25rem, 4vw, 2.5rem) max(var(--gutter), calc((var(--st-vw) - var(--measure)) / 2 + var(--gutter)));
}

.st-plate-label {
    font-family: var(--sans);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 0.6rem;
}

.st-plate-title {
    font-weight: 300;
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    line-height: 1.02;
    letter-spacing: -0.035em;
    color: inherit;
}

@media (max-width: 640px) {
    .st-plate {
        aspect-ratio: 4 / 3.2;
        min-height: 0;
    }
}

/* A chapter without art opens like an essay. */
.st-head {
    padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
    border-bottom: 1px solid var(--border);
}

.st-head .st-plate-label {
    color: var(--fg-dim);
    opacity: 1;
}

.st-head-title {
    font-weight: 300;
    font-size: clamp(2.4rem, 6vw, 4.25rem);
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--fg-bright);
}

/* The instrument readout at the top of a wake. Full section width, like
   the rule under an article hero; the reading column starts below it. */
.st-readout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem 2rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--border);
}

.st-readout dt {
    font-family: var(--sans);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-dim);
    margin-bottom: 0.3rem;
}

.st-readout dd {
    font-family: var(--st-mono);
    font-size: 0.8125rem;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}

/* A value that moved since the last chapter, in the site's green or red. */
.st-readout dd.is-up { color: rgb(var(--hue-projects)); }
.st-readout dd.is-down { color: rgb(var(--hue-records)); }

/* ---- Text ---- */

/* .article-body sets the column, the size, and the prose styles. */
.st-text {
    padding-top: var(--st-gap);
}

/* A clause from the institute's procedures, set as a specimen: a dot
   grid behind it, the source on the left and the text on the right. It takes the readout's full width rather than the
   prose column, because it is a document, not the story. */
.st-clause {
    display: grid;
    grid-template-columns: 14rem 1fr;
    gap: 0.75rem 2.5rem;
    margin: 1.5rem 0 0;
    padding: 1.25rem 1.5rem 1.4rem;
    background-image: radial-gradient(rgba(237, 233, 225, 0.11) 1px, transparent 1px);
    background-size: 12px 12px;
    background-position: 6px 6px;
    font-family: var(--st-mono);
    font-size: 0.875rem;
    line-height: 1.65;
    color: var(--fg);
}

.st-clause-src {
    display: block;
    font-family: var(--st-mono);
    font-style: normal;
    font-size: 0.6875rem;
    line-height: 1.7;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.st-clause-text {
    margin: 0;
    max-width: 62ch;
}

.st-clause-ref {
    font-weight: 600;
    color: var(--fg-bright);
    margin-right: 0.7em;
}

/* Wake 10's clause is a line of the constraint file, labeled the way the
   transmit queue labels its lines. */
.st-clause.is-code .st-clause-ref {
    font-weight: 500;
    color: var(--accent);
}

@media (max-width: 720px) {
    .st-clause {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 1rem 1.1rem 1.1rem;
    }
}

.st-prose > p:first-child {
    font-size: 1.15em;
    line-height: 1.55;
    letter-spacing: -0.01em;
    color: var(--fg-bright);
}

.st-prose em { color: var(--fg-bright); }

/* The transmit queue at the end of the last wake, on the site's code plate. */
.article-body pre.st-terminal {
    margin: 2.25rem 0 1.1rem;
    font-family: var(--st-mono);
    font-size: 0.8125rem;
    line-height: 1.8;
    color: var(--fg-muted);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.st-t-line b {
    font-weight: 500;
    color: var(--accent);
}

@keyframes st-blink {
    50% { opacity: 0; }
}

/* ---- Document ---- */

/* The pause before it arrives. */
.st-sending {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0 0 var(--st-gap);
    font-family: var(--sans);
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.st-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 12px var(--accent);
    animation: st-pulse 2.4s ease-in-out infinite;
}

@keyframes st-pulse {
    0%, 100% { opacity: 0.25; }
    50% { opacity: 1; }
}

.st-document {
    scroll-margin-top: var(--st-bar-h);
}

/* Set in the reading column, like everything else. */
.st-doc-kicker {
    max-width: var(--st-column);
    margin: 0 auto 1.25rem;
    font-weight: 300;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    letter-spacing: -0.03em;
    color: var(--fg-dim);
}

/* One light page in a dark site: the paper is the site's brightest ink,
   the ink is the site's black, and everything on it is set in mono. */
.st-doc {
    max-width: var(--st-column);
    margin: 0 auto;
    padding: clamp(1.5rem, 5vw, 2.75rem);
    background: var(--st-paper);
    color: var(--st-paper-ink);
    border-radius: 4px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(237, 233, 225, 0.08);
    font-family: var(--st-mono);
    font-size: 0.8125rem;
    line-height: 1.7;
}

.st-doc ::selection {
    background: rgba(11, 11, 10, 0.18);
    color: inherit;
}

.st-doc-head {
    padding-bottom: 1.1rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--st-paper-rule);
}

.st-doc-heading {
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: inherit;
    margin-bottom: 0.9rem;
}

.st-doc-head dl {
    display: grid;
    gap: 0.15rem;
}

.st-doc-head dl div {
    display: grid;
    grid-template-columns: 6rem 1fr;
    gap: 0.75rem;
}

.st-doc-head dt {
    color: var(--st-paper-dim);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.st-doc-head dd { font-variant-numeric: tabular-nums; }

.st-doc-body h2 {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: inherit;
    margin: 2rem 0 0.6rem;
}

.st-doc-body h3 {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--st-paper-dim);
    margin: 1.25rem 0 0.4rem;
}

.st-doc-body p { margin-bottom: 1em; }

.st-doc-body ul,
.st-doc-body ol {
    margin: 0 0 1em 1.2em;
}

.st-doc-body li { margin: 0.2em 0; }
.st-doc-body li::marker { color: var(--st-paper-dim); }

.st-doc-body ul ol {
    margin: 0.3em 0 0.2em 1.4em;
}

.st-doc-body table {
    border-collapse: collapse;
    min-width: 16rem;
    margin-bottom: 1em;
    font-variant-numeric: tabular-nums;
}

.st-doc-body th,
.st-doc-body td {
    text-align: left;
    padding: 0.35em 1.5em 0.35em 0;
    border-bottom: 1px solid var(--st-paper-rule);
}

.st-doc-body th {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--st-paper-dim);
}

/* A line that stops mid-sentence. */
.st-cut {
    padding: 0.75em 0.9em;
    border-left: 2px solid var(--st-paper-ink);
    background: rgba(11, 11, 10, 0.05);
    font-weight: 600;
}

.st-cut::after {
    content: '';
    display: inline-block;
    width: 0.5em;
    height: 1em;
    margin-left: 0.15em;
    background: var(--st-paper-ink);
    vertical-align: -0.15em;
    animation: st-blink 1.1s steps(1) infinite;
}

.st-doc-end {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--st-paper-rule);
    font-weight: 600;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}

/* ---- Reading bar ---- */

/* Fixed, but only once the cover has scrolled away: the site nav owns the
   top of the page until then. */
.st-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    height: var(--st-bar-h);
    background: rgba(11, 11, 10, 0.84);
    -webkit-backdrop-filter: saturate(1.2) blur(14px);
    backdrop-filter: saturate(1.2) blur(14px);
    border-bottom: 1px solid var(--border);
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform 300ms var(--ease), visibility 0s 300ms;
}

.st-bar.is-shown {
    transform: none;
    visibility: visible;
    transition: transform 300ms var(--ease), visibility 0s;
}

.st-bar-in {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 100%;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 var(--gutter);
}

.st-bar-brand {
    font-size: 1rem;
    letter-spacing: -0.01em;
    color: var(--fg-bright);
    text-decoration: none;
    transition: color var(--dur) var(--ease);
}

.st-bar-where {
    flex: 1;
    min-width: 0;
    font-family: var(--sans);
    font-size: 0.8125rem;
    color: var(--fg-dim);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-bar-where b {
    font-weight: 400;
    color: var(--fg-muted);
}

.st-btn {
    font-family: var(--sans);
    font-size: 0.8125rem;
    color: var(--fg-muted);
    background: none;
    border: 1px solid var(--border);
    border-radius: 3px;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

@media (hover: hover) and (pointer: fine) {
    .st-bar-brand:hover { color: rgb(var(--hue-stories)); }
    .st-btn:hover { color: rgb(var(--hue-stories)); border-color: var(--ghost); }
}

/* Progress paints the story's spectrum in, left to right. */
.st-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    overflow: hidden;
}

.st-progress-fill {
    position: absolute;
    inset: 0;
    background: var(--st-spectrum, var(--accent));
    clip-path: inset(0 100% 0 0);
    transition: clip-path 120ms linear;
}

/* ---- Drawer ---- */

.st-scrim {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(0, 0, 0, 0.55);
    opacity: 0;
    transition: opacity 250ms var(--ease);
}

.st-scrim.is-open { opacity: 1; }

.st-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 41;
    width: min(24rem, 100%);
    padding: 1.5rem clamp(1.25rem, 4vw, 2rem) 2rem;
    overflow-y: auto;
    background: var(--bg);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform 300ms var(--ease);
}

.st-drawer.is-open { transform: none; }

.st-drawer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.st-drawer-top .label { margin-bottom: 0; }

.st-toc--drawer { grid-template-columns: 1fr; }

.st-toc--drawer .st-toc-item a {
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--border);
}

.st-keys {
    margin-top: 1.5rem;
    font-family: var(--st-mono);
    font-size: 0.6875rem;
    line-height: 1.9;
    color: var(--fg-dim);
}

.st-keys kbd {
    font-family: var(--st-mono);
    font-size: 0.625rem;
    padding: 0.05em 0.4em;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 3px;
}