@font-face {
    font-family: "Graphik Web Regular";
    src: url("../fonts/Graphik-Regular.otf") format("opentype");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

/* Nine letters, one instance. Archivo's variable file carries every weight and
   width for the whole Latin set — 88KB to set a single word. This is the same
   face pinned at wght 420 / wdth 125 and subset to KOCHERGIN: 1.2KB.
   Subset of Archivo, © 2020 The Archivo Project Authors, SIL OFL 1.1. */
@font-face {
    font-family: "KOCHERGIN Wordmark";
    src: url("../fonts/KOCHERGIN-Wordmark.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    color-scheme: light dark;
    --background: #ffffff;
    --text: #111111;
    --text-muted: #666666;
    --text-low: #666666;
    --line: #8f8f8f;
    --line-soft: #d8d8d8;
    --project-premise: #3f3f3f;
    --focus: #111111;
    --accent: #ff2e00;
    --font-size: 1rem;
    --max-width: 560px;
    --content-leading: 1.8;
    --motion-fast: 150ms;
    --motion-calm: 220ms;
}

@media (min-width: 250px) {
    :root {
        --font-size: 1.05rem;
        --max-width: 560px;
    }
}

@media (min-width: 500px) {
    :root {
        --font-size: 1.075rem;
        --max-width: 590px;
    }
}

@media (min-width: 1000px) {
    :root {
        --font-size: 1.115rem;
        --max-width: 610px;
    }
}

@media (min-width: 1500px) {
    :root {
        --font-size: 1.15rem;
        --max-width: 640px;
    }
}

@media (min-width: 2000px) {
    :root {
        --font-size: 1.25rem;
        --max-width: 710px;
    }
}

@media (min-width: 2250px) {
    :root {
        --font-size: 1.35rem;
        --max-width: 760px;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #111111;
        --text: #c7c8ca;
        --text-muted: #a8aaac;
        --text-low: #9b9da0;
        --line: #747474;
        --line-soft: #3d3f41;
        --project-premise: #adafb2;
        --focus: #f2f2f2;
    }
}

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

html {
    background: var(--background);
    /* In-page anchors glide. Correspondence sits past the whole index, so the
       arrow tells the truth and the work goes by on the way.
       The reduced-motion block below returns this to an instant jump. */
    scroll-behavior: smooth;
}

body {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    margin: 8px;
    color: var(--text);
    background: var(--background);
    font-family: "Graphik Web Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: var(--font-size);
    font-weight: 400;
    line-height: var(--content-leading);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-kerning: normal;
    overflow-x: hidden;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
a,
summary,
label {
    -webkit-tap-highlight-color: transparent;
}

button {
    color: inherit;
}

[hidden] {
    display: none !important;
}

::selection {
    color: var(--background);
    background: var(--text);
}

.wrap {
    position: relative;
    width: 90%;
    max-width: var(--max-width);
    margin: 5vw;
}

/* The mark. --accent is the canonical colour and the state without scripting;
   color.js swaps in one of the four per visit. */
.home-icon-rectangle {
    position: relative;
    width: 20px;
    height: 20px;
    overflow: hidden;
    isolation: isolate;
    background-color: var(--accent);
    box-shadow: 0 3px 10px rgba(17, 17, 17, 0.09);
}

.home-icon-rectangle::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.08) 34%, rgba(255, 255, 255, 0) 56%),
        linear-gradient(315deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 54%);
    opacity: 0.95;
}

@keyframes details-reveal {
    from {
        opacity: 0;
        transform: translateY(-0.3rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.brand-axis {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    width: 100%;
    min-width: 0;
}

/* The mark is made by the letterforms, not by the space between them. The width
   axis at 125% is the widest the face goes: engineered, and rare — letterspaced
   caps are everywhere, extended caps are not. Tracking stays at zero so the
   word keeps its mass and reads as one block. */
.wordmark {
    display: block;
    justify-self: end;
    margin: 0;
    min-width: 0;
    width: max-content;
    max-width: 100%;
    white-space: nowrap;
    font-family: "KOCHERGIN Wordmark", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1.3em;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    font-synthesis: none;
}

.intro {
    margin-top: 4rem;
}

.intro p,
.index-note p,
.correspondence p,
.project-details-copy p {
    margin: 0;
}

.intro p + p {
    margin-top: 1rem;
}

.intro p.intro-correspondence,
.intro-correspondence {
    display: inline-block;
    margin-top: 1.15rem;
    color: var(--text-low);
    font-size: 0.84em;
    line-height: 1.45;
}

.intro-correspondence .text-link,
a.intro-correspondence {
    color: inherit;
}

/* Both arrows are drawn, not typed: Graphik carries no arrow glyphs, so ↓ and ↗
   fell to the system face — larger, lighter, off the baseline. Sized in em so
   they track the type, and coloured by currentColor so dark mode needs no
   filter. The gap is explicit rather than a text space. */
.intro-correspondence-arrow,
.project-visit-arrow {
    display: inline-block;
    flex: none;
    width: 0.72em;
    height: 0.72em;
    vertical-align: -0.06em;
    color: var(--text-low);
    transition: transform var(--motion-fast) cubic-bezier(0.22, 1, 0.36, 1);
}

.intro-correspondence-arrow {
    margin-left: 0.34em;
}

.intro-correspondence:hover .intro-correspondence-arrow,
.intro-correspondence:focus-visible .intro-correspondence-arrow {
    transform: translateY(2px);
}

.underline-ink,
.control-ink,
.view-option-label,
.project-name {
    border-bottom: 1px solid transparent;
}

.underline-ink,
.view-option-label,
.project-name {
    display: inline;
}

.control-ink {
    display: inline-flex;
    align-items: baseline;
    gap: 0.36rem;
    line-height: 1.2;
}

.person-trigger {
    margin: 0;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: zoom-in;
    line-height: inherit;
}

.person-name-lockup {
    white-space: nowrap;
}

/* The signature is a name, not a link. The portrait affordance appears only on
   hover and focus, so the block carries a single underline: the address. */
.person-trigger .underline-ink {
    border-bottom-color: transparent;
    transition: border-color var(--motion-fast) ease;
}

.person-trigger:hover,
.person-trigger[aria-expanded="true"] {
    color: var(--text);
}

.person-trigger:hover .underline-ink,
.person-trigger[aria-expanded="true"] .underline-ink {
    border-bottom-color: var(--line);
}

.person-trigger:disabled .underline-ink {
    border-bottom-color: transparent;
}

.person-trigger:disabled {
    cursor: text;
}

/* The row grows from zero and clips the image from the bottom, so the portrait
   unfolds downward instead of appearing all at once. */
/* The portrait takes its full height the instant it opens. The growth happens
   entirely below the fold so nothing is seen to jump, and it leaves the page at
   its final height — which is what lets the scroll land exactly. Animating the
   height instead would clamp the scroll to the page as it was. One motion: the
   page travels down while the image fades up. */
.person-preview {
    width: 100%;
    height: 0;
    margin: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 260ms ease;
}

.person-preview.is-visible {
    height: auto;
    margin-top: 1.1rem;
    opacity: 1;
}

/* The ratio is declared rather than inferred from the width and height
   attributes: on the first open the file has not arrived yet, and the figure
   has to reach its final height before the scroll target is computed from it.
   Without this the first click scrolls to a page that does not yet include the
   portrait, stops short, and only the second click lands. */
.person-preview img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1080 / 721;
    background: #111111;
}

/* The portrait unfolds in the flow, below the name, as the last thing on the
   page. Nothing sits under it but the clocks, so it never has to overlay. */

.section-label {
    margin: 0;
    color: var(--text-low);
    font-size: 0.84em;
    font-weight: 400;
    line-height: 1.45;
}

.index-note {
    margin-top: 4.5rem;
}

.index-note p {
    max-width: none;
    margin-top: 0.7rem;
    color: var(--text-muted);
    font-size: 1em;
    line-height: 1.8;
}

.index-section {
    margin-top: 2.65rem;
}

.index-heading-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.shuffle-project {
    min-height: 32px;
    margin: -0.35rem 0;
    padding: 0;
    color: var(--text-low);
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    font-size: 0.84em;
    line-height: 1.2;
    transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}

.shuffle-project:hover,
.shuffle-project:focus-visible {
    color: var(--text);
}

.shuffle-project:hover .control-ink,
.shuffle-project:focus-visible .control-ink {
    border-bottom-color: var(--text);
}

.shuffle-project:disabled {
    color: var(--line);
    cursor: default;
}

.shuffle-project:disabled .control-ink {
    border-bottom-color: transparent;
}

.view-bar {
    margin-top: 0.15rem;
    font-size: 0.9em;
}

.view-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 1.5rem;
}

.view-option {
    cursor: pointer;
}

.view-option-copy {
    display: inline-flex;
    align-items: baseline;
    gap: 0.34rem;
    min-height: 38px;
    padding-block: calc((38px - 1em) / 2);
    color: var(--text-low);
    line-height: 1;
    white-space: nowrap;
    transition: color var(--motion-fast) ease;
}

.view-option-label {
    line-height: 1;
    transition: border-color var(--motion-fast) ease;
}

.view-option-count {
    font-size: 0.84em;
    font-variant-numeric: tabular-nums;
}

.view-option:hover .view-option-copy,
.view-option input:checked + .view-option-copy {
    color: var(--text);
}

.view-option:hover .view-option-label {
    border-bottom-color: var(--line);
}

.view-option input:checked + .view-option-copy .view-option-label {
    border-bottom-color: var(--text);
}

.view-option input:focus-visible + .view-option-copy {
    outline: 1px solid var(--focus);
    outline-offset: 3px;
}

.view-option input:focus-visible + .view-option-copy .view-option-label {
    border-bottom-color: var(--focus);
}

.view-option.is-disabled,
.view-option:has(input:disabled) {
    cursor: default;
    opacity: 0.44;
}

.view-option.is-disabled:hover .view-option-label,
.view-option:has(input:disabled):hover .view-option-label {
    border-bottom-color: transparent;
}

a:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

a:focus-visible .underline-ink {
    border-bottom-color: var(--focus);
}

.empty-reset:focus-visible,
.shuffle-project:focus-visible,
.person-trigger:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: none;
}

.empty-reset:focus-visible .control-ink,
.shuffle-project:focus-visible .control-ink,
.person-trigger:focus-visible .underline-ink {
    border-bottom-color: var(--focus);
}

.project-summary:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: inset 2px 0 0 var(--focus);
}

.project-list {
    padding: 0;
    margin: 0.8rem 0 0;
    list-style: none;
    transition: opacity var(--motion-fast) ease;
}

.project-list.is-updating {
    opacity: 0.42;
}

.project-item[hidden] {
    display: none;
}

.project-divider {
    margin: 1.25rem 0 0.35rem 42px;
    color: var(--text-low);
    font-size: 0.84em;
    line-height: 1.45;
    list-style: none;
}

.project-divider[data-state="archive"] {
    margin-top: 3rem;
}

.project-record {
    margin: 0;
}

.project-summary {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    column-gap: 16px;
    align-items: baseline;
    min-height: 84px;
    padding: 0.5rem 0 0.72rem;
    color: var(--text);
    cursor: pointer;
    list-style: none;
}

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

.project-emoji {
    display: inline-block;
    width: 100%;
    padding: 0;
    line-height: 1.45;
    text-align: center;
}

.project-copy {
    min-width: 0;
}

.project-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.1rem 0.9rem;
}

.project-lead {
    line-height: 1.55;
}

.project-name {
    transition: border-color var(--motion-fast) ease;
}

.project-separator,
.project-premise {
    font-size: 1em;
}

.project-name,
.project-separator {
    color: var(--text);
}

.project-premise {
    color: var(--project-premise);
}

.project-summary:focus-visible .project-name,
.project-record[open] .project-name {
    border-bottom-color: var(--text);
}

@media (hover: hover) {
    .project-summary:hover .project-name {
        border-bottom-color: var(--line);
    }
}

.project-meta {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 0.38rem;
    margin-top: 0.05rem;
    color: var(--text-low);
    font-size: 0.88em;
    line-height: 1.55;
}

.project-period {
    font-variant-numeric: tabular-nums;
}

.project-form {
    color: var(--text-low);
    white-space: nowrap;
}

.project-meta-separator {
    color: var(--line);
}

.project-disclosure {
    align-self: baseline;
    flex: 0 0 auto;
    min-width: 3.1rem;
    padding-top: 0;
    color: var(--text-low);
    font-size: 0.8em;
    line-height: 1.5;
    text-align: right;
}

.when-open {
    display: none;
}

.project-record[open] .when-open {
    display: inline;
}

.project-record[open] .when-closed {
    display: none;
}

/* Earlier work sits a step below the work in operation: same anatomy, less
   weight, and a period instead of the full metadata line. */
.project-item--quiet .project-summary {
    min-height: 62px;
    padding: 0.34rem 0 0.5rem;
}

.project-item--quiet .project-lead {
    font-size: 0.94em;
}

.project-item--quiet .project-premise {
    color: var(--text-low);
}

.project-item--quiet .project-meta {
    font-size: 0.82em;
}

.project-item--quiet .project-disclosure {
    font-size: 0.76em;
}

.project-details-body {
    margin: 0.45rem 0 0 42px;
    animation: details-reveal var(--motion-calm) cubic-bezier(0.22, 1, 0.36, 1);
}

.project-details-copy {
    max-width: none;
    padding: 0 0 1.45rem;
    color: var(--text-muted);
    font-size: 1em;
    line-height: 1.72;
}

/* The layer under a project: systems built to run it. Set a step down from the
   record's own prose, in the index's grammar — name, em dash, premise — so it
   reads as the same catalogue one level deeper, not as a new component. */
.project-internal {
    margin-top: 1.15rem;
}

/* A label for the list, not a section heading — a heading here would skip from
   h2 to h4 for every project that sits above the archive divider. */
.project-internal .section-label {
    display: block;
}

.project-internal-list {
    margin: 0.3rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.94em;
    line-height: 1.6;
}

.project-internal-item + .project-internal-item {
    margin-top: 0.2rem;
}

.project-internal-name {
    color: var(--text);
}

.project-internal-premise {
    color: var(--project-premise);
}

.project-visit {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
    color: var(--text);
    text-decoration: none;
    line-height: 1.45;
}

.project-visit .underline-ink {
    border-bottom-color: var(--line);
    transition: border-color var(--motion-fast) ease;
}

.project-visit:hover .underline-ink {
    border-bottom-color: var(--text);
}

.project-visit-arrow {
    margin-left: 0.38em;
}

.project-visit:hover .project-visit-arrow,
.project-visit:focus-visible .project-visit-arrow {
    transform: translate(1px, -1px);
}

.empty-state {
    margin: 1rem 0 0;
    color: var(--text-muted);
}

.empty-reset {
    min-height: 36px;
    margin-left: 0.35rem;
    padding: 0;
    color: var(--text);
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
}

.empty-reset:hover .control-ink {
    border-bottom-color: var(--text);
}

.correspondence {
    margin-top: 4.5rem;
}

.correspondence p {
    margin-top: 0.85rem;
}

.correspondence-address {
    margin-top: 1.75rem !important;
}

/* The address and the profiles are one cluster: how to reach him. The profiles
   are set as a sentence so they never read as a row of equal-weight links. */
.correspondence-elsewhere {
    margin-top: 0.85rem;
}

/* The page closes on a colophon — who, and where he keeps time. The name leads
   it at full contrast; the clocks stay quiet beneath. */
.colophon {
    margin-top: 4rem;
}

.colophon-name {
    margin: 0 0 0.2rem;
    color: var(--text);
    font-size: 0.84em;
    line-height: 1.65;
}

.text-link {
    color: var(--text);
    text-decoration: none;
}

.text-link .underline-ink {
    border-bottom-color: var(--line);
    transition: border-color var(--motion-fast) ease;
}

.text-link:hover .underline-ink {
    border-bottom-color: var(--text);
}

.local-times {
    margin: 0;
    color: var(--text-low);
    font-size: 0.84em;
    line-height: 1.65;
}

.local-times p {
    margin: 0;
}

.no-js .view-bar,
.no-js .shuffle-project,
.no-js .empty-state {
    display: none;
}

.no-js .person-trigger {
    cursor: text;
    pointer-events: none;
}

.no-js .person-trigger .underline-ink {
    border-bottom-color: transparent;
}

.no-js .person-preview {
    display: none;
}

.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;
}

@media (max-width: 499px) {
    .wrap {
        width: calc(100vw - 2rem);
        margin: 5vw 0;
    }

    .intro {
        margin-top: clamp(3.8rem, 20vw, 4.4rem);
    }

    .index-section {
        margin-top: 2.5rem;
    }

    .shuffle-project {
        min-height: 48px;
        margin-block: -0.8rem;
    }

    .index-note {
        margin-top: 3.8rem;
    }

    .view-options {
        gap: 0 1.15rem;
    }

    .view-option-copy {
        min-height: 44px;
        padding-block: calc((44px - 1em) / 2);
    }

    .project-list {
        margin-top: 0.75rem;
    }

    .project-divider {
        margin-left: 2.2rem;
    }

    .project-summary {
        grid-template-columns: 1.45rem minmax(0, 1fr);
        column-gap: 0.75rem;
        min-height: 96px;
        padding: 0.55rem 0 0.78rem;
    }

    .project-separator {
        display: none;
    }

    .project-premise {
        display: block;
        margin-top: 0.05rem;
        line-height: 1.55;
    }

    .project-disclosure {
        align-self: baseline;
        min-width: 0;
        min-height: 30px;
        padding-top: 0.12rem;
        margin-left: auto;
        text-align: right;
    }

    .project-details-body {
        margin-left: 2.2rem;
    }

    .project-details-copy {
        padding-right: 0;
    }

    .correspondence {
        margin-top: 3.8rem;
    }

    .colophon {
        margin-top: 3.4rem;
    }
}

@media (pointer: coarse) {
    .view-option-copy,
    .empty-reset,
    .shuffle-project {
        min-height: 48px;
    }
}

@media (prefers-color-scheme: dark) {
    .home-icon-rectangle {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
    }
}

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

}