/* Silica landing page.
   The page is a ruled ledger: a left rail carries the op key, a hairline rule runs the whole
   height of the record, and the field carries the entry. Exactly one gradient on the page, the
   spine, which draws itself down the rule as you read. See the direction contract in index.html. */

@font-face {
    font-family: "Archivo";
    src: url("/fonts/archivo-latin.woff2") format("woff2");
    font-weight: 100 900;
    font-stretch: 62% 125%;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Martian Mono";
    src: url("/fonts/martian-mono-latin.woff2") format("woff2");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

:root {
    --void: #0B0D12;
    --slate: #10141B;
    --line: #1E2530;
    --line-2: #2B3442;
    --frost: #E7EBF1;
    --ash: #8A93A3;
    --ash-dim: #737C8C;
    /* 4.7:1 on --void; anything dimmer fails small text */
    --cyan: #22D3EE;
    --indigo: #6366F1;
    --indigo-lit: #8B8DF5;
    /* the indigo that passes contrast as text */
    --grad: linear-gradient(180deg, var(--cyan), var(--indigo));

    --sans: "Archivo", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
    --mono: "Martian Mono", ui-monospace, "Cascadia Code", Menlo, monospace;
    --term: ui-monospace, "SF Mono", "Cascadia Code", "DejaVu Sans Mono", Menlo, Consolas, monospace;

    /* the small-text ramp: five steps, nothing between them */
    --t-micro: 0.72rem;
    --t-label: 0.82rem;
    --t-small: 0.9rem;
    --t-prose: 0.96rem;
    --t-lead: 1.02rem;
    /* code blocks size to fit a real terminal line, so they are fluid, but both
       endpoints still land on the ramp */
    --t-block: clamp(var(--t-micro), 0.66rem + 0.3vw, var(--t-label));
    --t-block-lg: clamp(var(--t-label), 0.76rem + 0.45vw, var(--t-lead));

    --maxw: 1240px;
    --pad: clamp(1.15rem, 4vw, 2.75rem);
    --rail: clamp(7.5rem, 14vw, 13rem);
    --gap: clamp(1.15rem, 3vw, 2.75rem);
    --sp: clamp(3.75rem, 7.5vw, 6.5rem);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5rem;
    -webkit-text-size-adjust: 100%;
}

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

body {
    margin: 0;
    background: var(--void);
    color: var(--frost);
    font-family: var(--sans);
    font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.03rem);
    font-weight: 400;
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* the silica lattice, one step quieter than the type it sits behind */
    background-image: radial-gradient(circle at 1px 1px, rgba(138, 147, 163, 0.07) 1px, transparent 0);
    background-size: 40px 40px;
}

a {
    color: var(--cyan);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-underline-offset: 0.22em;
    text-decoration-thickness: 1px;
}

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

code {
    font-family: var(--term);
    font-size: 0.88em;
    color: var(--frost);
    background: rgba(138, 147, 163, 0.1);
    padding: 0.08em 0.34em;
    white-space: nowrap;
}

b {
    font-weight: 600;
    color: var(--frost);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 50;
    background: var(--cyan);
    color: var(--void);
    font-weight: 600;
    padding: 0.7rem 1.1rem;
}

.skip:focus {
    left: 0;
}

/* ───────── nav ───────── */

.nav {
    position: sticky;
    top: 0;
    z-index: 20;
    /* opaque: at 6% transparency the ledger rows read straight through the bar */
    background: var(--void);
    border-bottom: 1px solid var(--line);
}

.nav-in {
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--pad);
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    color: var(--frost);
}

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

.brand-mark {
    display: block;
    color: var(--frost);
}

.brand-text {
    font-weight: 600;
    font-stretch: 106%;
    font-size: var(--t-lead);
    letter-spacing: -0.015em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: clamp(0.9rem, 2.6vw, 1.9rem);
    font-family: var(--term);
    font-size: var(--t-label);
    letter-spacing: 0.01em;
}

.nav-links a {
    color: var(--ash);
}

.nav-links a:hover {
    color: var(--frost);
    text-decoration: none;
}

.nav-links .nav-cta {
    color: var(--cyan);
    border: 1px solid var(--line-2);
    padding: 0.32rem 0.85rem;
}

.nav-links .nav-cta:hover {
    border-color: var(--cyan);
    background: rgba(34, 211, 238, 0.08);
    color: var(--cyan);
}

@media (max-width: 720px) {
    .nav-links a[href^="#"]:not(.nav-cta) {
        display: none;
    }
}

/* ───────── the ledger ───────── */

.ledger {
    position: relative;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--pad);
}

/* the one gradient on the page: the record being written, drawn as you read down it */
.spine {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--pad) + var(--rail) - 1px);
    width: 1px;
    background: var(--grad);
    /* clipped rather than scaled: scaling would squeeze the whole ramp into whatever is
       drawn so far, and the colour under a given entry would shift as you scroll */
    clip-path: inset(0 0 0 0);
    pointer-events: none;
    z-index: 1;
    /* longhands on purpose: the shorthand would force duration to 0s, and a scroll timeline
       needs `auto`. Browsers without scroll-driven animation land on the filled end state,
       which is the whole line drawn, and that is a fine fallback. */
    animation-name: spine-draw;
    animation-duration: auto;
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root block);
}

@keyframes spine-draw {
    from {
        clip-path: inset(0 0 100% 0);
    }

    to {
        clip-path: inset(0 0 0 0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .spine {
        animation: none;
    }
}

.entry {
    position: relative;
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    border-top: 1px solid var(--line);
    padding-block: var(--sp);
}

.entry:first-child {
    border-top: 0;
}

/* the rule runs the entry's whole height, whatever rows the entry happens to have */
.entry::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--rail) - 1px);
    width: 1px;
    background: var(--line);
}

.rail {
    padding-right: var(--gap);
    padding-bottom: 1.5rem;
}

.field {
    grid-column: 2;
    padding-left: var(--gap);
}

.op,
.op-note {
    display: block;
    font-family: var(--mono);
    font-size: var(--t-micro);
    line-height: 1.5;
    letter-spacing: 0.02em;
}

.op {
    color: var(--frost);
    font-weight: 600;
}

.op-note {
    color: var(--ash-dim);
}

@media (max-width: 780px) {

    .spine,
    .entry::before {
        display: none;
    }

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

    .rail {
        border-left: 1px solid var(--line-2);
        padding: 0 0 0 0.75rem;
        margin-bottom: 1.75rem;
        display: flex;
        gap: 0.6rem;
    }

    .rail .op-note::before {
        content: "· ";
    }

    .field {
        grid-column: 1;
        padding-left: 0;
    }
}

/* ───────── type ───────── */

.display {
    margin: 0.9rem 0 0;
    font-size: clamp(2.25rem, 1.1rem + 4.6vw, 4.6rem);
    font-weight: 700;
    font-stretch: 108%;
    line-height: 0.99;
    letter-spacing: -0.032em;
    text-wrap: balance;
    max-width: 19ch;
}

.entry h2 {
    margin: 0 0 1.1rem;
    font-size: clamp(1.4rem, 1rem + 1.5vw, 2.2rem);
    font-weight: 600;
    font-stretch: 104%;
    line-height: 1.12;
    letter-spacing: -0.024em;
    text-wrap: balance;
    max-width: 26ch;
}

.entry h2 code {
    font-size: 0.78em;
    background: none;
    padding: 0;
    color: var(--cyan);
}

.deck {
    margin: 1.5rem 0 0;
    max-width: 66ch;
    color: var(--ash);
    font-size: clamp(1.02rem, 0.95rem + 0.42vw, 1.2rem);
    line-height: 1.58;
}

.deck--sm {
    margin-top: 0;
    font-size: var(--t-lead);
    line-height: 1.62;
}

.deck b,
.deck code {
    color: var(--frost);
}

.field p {
    max-width: 68ch;
}

.sub-h {
    margin: clamp(3rem, 6vw, 4.5rem) 0 1.1rem;
    font-family: var(--mono);
    font-size: var(--t-micro);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ash-dim);
}

.note {
    margin: 1.6rem 0 0;
    color: var(--ash);
    font-size: var(--t-small);
    line-height: 1.6;
}

.pull {
    margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
    max-width: 34ch !important;
    font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem);
    font-weight: 500;
    font-stretch: 102%;
    line-height: 1.28;
    letter-spacing: -0.02em;
    color: var(--frost);
}

/* ───────── masthead ───────── */

.entry--masthead {
    padding-top: clamp(3rem, 6vw, 5rem);
}

.refs {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem var(--gap);
    font-family: var(--term);
    font-size: var(--t-micro);
    line-height: 1.7;
}

.refs li {
    flex: 1 1 19rem;
    max-width: 32rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--line-2);
}

.refs a {
    display: block;
    color: var(--frost);
}

.refs a:hover {
    color: var(--cyan);
    text-decoration: none;
}

.refs span {
    display: block;
    color: var(--ash-dim);
}

/* the trespasser: the only element that crosses the rule, and it is the action */
.strike {
    grid-column: 1 / -1;
    position: relative;
    z-index: 2;
    margin-top: clamp(2.25rem, 5vw, 3.5rem);
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    border: 1px solid var(--cyan);
    background: var(--slate);
}

.strike-cmd {
    flex: 1 1 20rem;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.95rem clamp(0.9rem, 2.5vw, 1.5rem);
    overflow-x: auto;
    font-family: var(--term);
    font-size: var(--t-block-lg);
    white-space: nowrap;
}

.strike-cmd .pr {
    color: var(--cyan);
    font-weight: 700;
    user-select: none;
}

.strike-cmd code {
    background: none;
    padding: 0;
    font-size: 1em;
    color: var(--frost);
}

.strike .btn {
    border: 0;
    border-left: 1px solid var(--cyan);
}

.field--tail {
    margin-top: clamp(2.25rem, 5vw, 3.5rem);
}

.logblock {
    margin: 0;
    padding: 1.1rem clamp(0.9rem, 2.5vw, 1.4rem);
    border: 1px solid var(--line);
    background: var(--slate);
    font-family: var(--term);
    font-size: var(--t-block);
    line-height: 2;
    color: var(--ash);
    overflow-x: auto;
}

.logblock b {
    font-weight: 400;
    color: var(--frost);
}

.logblock .dim {
    color: var(--ash-dim);
}

/* ───────── numbered rows ───────── */

.rows {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--line);
}

.rows>li,
.rows>div {
    border-bottom: 1px solid var(--line);
    padding-block: clamp(1.25rem, 2.5vw, 1.7rem);
}

.rows h3,
.rows dt {
    margin: 0 0 0.35rem;
    font-size: var(--t-lead);
    font-weight: 600;
    font-stretch: 102%;
    letter-spacing: -0.012em;
    color: var(--frost);
}

.rows p,
.rows dd {
    margin: 0;
    max-width: 68ch;
    color: var(--ash);
    font-size: var(--t-prose);
    line-height: 1.62;
}

.rows--num {
    counter-reset: rot;
}

.rows--num>li {
    counter-increment: rot;
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
}

.rows--num>li>* {
    grid-column: 2;
}

.rows--num>li::before {
    grid-column: 1;
    grid-row: 1;
    content: counter(rot, decimal-leading-zero);
    font-family: var(--term);
    font-size: var(--t-micro);
    line-height: 1.9;
    color: var(--ash-dim);
}

.rows--dl>div {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    column-gap: var(--gap);
    align-items: baseline;
}

.rows--cmd dt {
    font-family: var(--term);
    font-size: var(--t-label);
    font-weight: 400;
}

.rows--cmd dt code {
    background: none;
    padding: 0;
    font-size: 1em;
    color: var(--cyan);
}

.rows--credit>li {
    max-width: 78ch;
    color: var(--ash);
    font-size: var(--t-prose);
    line-height: 1.62;
}

@media (max-width: 640px) {

    .rows--num>li,
    .rows--dl>div {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.4rem;
    }

    /* one column: the counter stacks above the heading instead of landing on top of it */
    .rows--num>li>*,
    .rows--num>li::before {
        grid-column: 1;
        grid-row: auto;
    }

    .rows--num>li::before {
        line-height: 1.4;
    }
}

/* ───────── callout, pull, scope ───────── */

.callout {
    margin-top: clamp(2.25rem, 4.5vw, 3rem);
    padding: clamp(1.25rem, 3vw, 1.85rem);
    background: var(--slate);
    border: 1px solid var(--line);
}

.callout h3 {
    margin: 0 0 0.5rem;
    font-size: var(--t-lead);
    font-weight: 600;
    color: var(--frost);
}

.callout p {
    margin: 0;
    color: var(--ash);
    font-size: var(--t-prose);
    line-height: 1.62;
}

.scope {
    margin-top: clamp(2.25rem, 4.5vw, 3rem);
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    column-gap: var(--gap);
    padding-top: 1.1rem;
    border-top: 1px solid var(--line-2);
}

.scope-key {
    font-family: var(--mono);
    font-size: var(--t-micro);
    line-height: 1.85;
    letter-spacing: 0.02em;
    color: var(--indigo-lit);
}

.scope p {
    margin: 0;
    color: var(--ash);
    font-size: var(--t-small);
    line-height: 1.62;
}

@media (max-width: 640px) {
    .scope {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.4rem;
    }
}

/* ───────── tables ───────── */

.tablewrap {
    margin-top: clamp(2rem, 4vw, 2.75rem);
    overflow-x: auto;
}

.tbl {
    width: 100%;
    min-width: 40rem;
    border-collapse: collapse;
    text-align: left;
}

.tbl th,
.tbl td {
    padding: clamp(0.85rem, 1.8vw, 1.15rem) 1.15rem clamp(0.85rem, 1.8vw, 1.15rem) 0;
    border-bottom: 1px solid var(--line);
    vertical-align: top;
}

.tbl thead th {
    border-bottom-color: var(--line-2);
    padding-top: 0;
    font-family: var(--mono);
    font-size: var(--t-micro);
    font-weight: 400;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ash-dim);
    white-space: nowrap;
}

.tbl tbody th,
.tbl tbody td {
    font-size: var(--t-prose);
    line-height: 1.55;
    font-weight: 400;
    color: var(--ash);
}

.tbl tbody th {
    color: var(--frost);
}

.tbl--map tbody td:nth-child(2) {
    color: var(--ash-dim);
    white-space: nowrap;
}

.tbl--num .num {
    font-family: var(--term);
    font-size: var(--t-prose);
    color: var(--frost);
    white-space: nowrap;
}

.tbl--num .num .unit,
.tbl--num .num .and {
    color: var(--ash-dim);
    font-size: var(--t-label);
}

.tbl--num .smp {
    font-size: var(--t-small);
    color: var(--ash-dim);
}

.tbl--num th[scope="row"] {
    width: 38%;
}

/* ───────── command blocks ───────── */

.cmdblock {
    margin: clamp(2rem, 4vw, 2.75rem) 0 0;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    border: 1px solid var(--line);
    background: var(--slate);
    font-family: var(--term);
    font-size: var(--t-block);
    line-height: 2;
    color: var(--frost);
    overflow-x: auto;
    white-space: pre;
}

.cmdblock--lg {
    font-size: var(--t-block-lg);
    border-color: var(--line-2);
}

.cmdblock .pr {
    color: var(--cyan);
    font-weight: 700;
    user-select: none;
}

.cmdblock .cm {
    color: var(--ash-dim);
}

/* ───────── buttons ───────── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    font-family: var(--mono);
    font-size: var(--t-label);
    font-weight: 600;
    color: var(--void);
    background: var(--cyan);
    border: 1px solid var(--cyan);
    padding: 0.72rem 1.35rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.btn:hover {
    background: var(--frost);
    border-color: var(--frost);
    color: var(--void);
    text-decoration: none;
}

.btn.is-ok {
    background: var(--slate);
    color: var(--cyan);
}

.btn--ghost {
    background: transparent;
    color: var(--cyan);
    border-color: var(--line-2);
    font-weight: 400;
}

.btn--ghost code {
    background: none;
    padding: 0;
    font-size: 1em;
    color: inherit;
}

.btn--ghost:hover {
    background: rgba(34, 211, 238, 0.08);
    border-color: var(--cyan);
    color: var(--cyan);
}

.actions {
    margin-top: 1.35rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

/* ───────── the run ───────── */

/* the recording is 1000px wide; the field column is close to that, so it stays sharp
   and everything under it keeps the ledger's alignment */
.demo {
    grid-column: 2;
    margin: clamp(2.25rem, 5vw, 3.25rem) 0 0;
}

.demo-vid {
    display: block;
    width: 100%;
    height: auto;
    background: var(--void);
    border: 1px solid var(--line-2);
}

.beats {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 0;
}

.beats li {
    display: grid;
    grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
    column-gap: var(--gap);
    align-items: baseline;
    padding-block: 0.85rem;
    border-bottom: 1px solid var(--line);
}

.beats .beat-cmd {
    font-family: var(--term);
    font-size: var(--t-label);
    line-height: 1.5;
    color: var(--cyan);
    overflow-wrap: anywhere;
}

.beats .beat-txt {
    color: var(--ash);
    font-size: var(--t-prose);
    line-height: 1.5;
}

.beats .beat--last .beat-cmd {
    color: var(--indigo-lit);
}

.beats .beat--last .beat-txt {
    color: var(--frost);
}

@media (max-width: 780px) {
    .beats li {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 0.25rem;
    }

    /* a scroll container that hides half a log line reads as truncation; let it wrap instead */
    .logblock {
        white-space: pre-wrap;
        line-height: 1.75;
    }
}

/* ───────── screenshot ───────── */

.shot {
    margin: clamp(2.25rem, 4.5vw, 3rem) 0 0;
}

.shot img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--line-2);
}

.shot figcaption {
    margin-top: 0.7rem;
    font-family: var(--mono);
    font-size: var(--t-micro);
    color: var(--ash-dim);
}

.shot figcaption code {
    background: none;
    padding: 0;
    color: var(--ash);
}

/* ───────── install + sili ───────── */

.entry--install .field {
    padding-bottom: 1rem;
}

.sili {
    grid-column: 2;
    justify-self: end;
    width: clamp(130px, 20vw, 230px);
    height: auto;
    /* it comes up beside the install block rather than sitting in its own empty band */
    margin-top: clamp(-11rem, -9vw, -3rem);
    pointer-events: none;
}

@media (max-width: 780px) {
    .sili {
        grid-column: 1;
        justify-self: center;
        margin-top: 2.5rem;
    }
}

/* ───────── close + footer ───────── */

.entry--close {
    padding-bottom: clamp(3rem, 6vw, 5rem);
}

.foot {
    border-top: 1px solid var(--line);
    padding-block: 2.75rem;
}

.foot-in {
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--pad);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1.6rem;
    font-family: var(--mono);
    font-size: var(--t-micro);
    color: var(--ash-dim);
}

.foot-mark {
    font-family: var(--sans);
    font-size: var(--t-prose);
    font-weight: 600;
    color: var(--ash);
    margin-right: auto;
}

.foot a {
    color: var(--ash-dim);
}

.foot a:hover {
    color: var(--frost);
}