:root {
    color-scheme: light dark;

    --paper: #EAE2CD;
    --page: #F2ECDC;
    --ink: #221D12;
    --ink-2: #4C4433;
    --ink-3: #6E6551;
    --rule: #C3B99E;
    --rule-line: #C9D4E4;
    --margin: #B23A48;

    --stamp-ink: #2C3E6B;
    --stamp-green: #2A6140;
    --stamp-purple: #6B3A7A;

    --lh: 1.75rem;

    --serif: Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
    --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --hand: "Segoe Print", "Bradley Hand", "Chalkboard SE", "Comic Sans MS", cursive;

    --gutter: clamp(1rem, 4vw, 2.5rem);
    --measure: 34rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --paper: #1A1710;
        --page: #221E15;
        --ink: #EFE8D6;
        --ink-2: #C4BBA4;
        --ink-3: #988F79;
        --rule: #443E30;
        --rule-line: #33302A;
        --margin: #E38793;

        --stamp-ink: #93AEE8;
        --stamp-green: #74C79A;
        --stamp-purple: #C79AE0;
    }
}

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

body, h1, h2, h3, p, ul, ol, li, figure, blockquote, dl, dt, dd, table {
    margin: 0;
    padding: 0;
}

ul, ol {
    list-style: none;
}

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

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1rem;
    line-height: 1.6;
}

main {
    margin: 2rem;
}

h1, h2, h3 {
    font-family: var(--serif);
    font-weight: 400;
    line-height: 1.15;
}

a {
    color: var(--stamp-ink);
    text-decoration-color: var(--margin);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    transition: color .15s ease, text-decoration-color .15s ease, text-decoration-thickness .15s ease;
}

a:where(:visited) {
    color: var(--stamp-purple);
}

a:where(:hover) {
    color: var(--ink);
    text-decoration-color: var(--ink);
    text-decoration-thickness: 2px;
}

svg {
    max-width: 100%;
}

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

.wrap {
    width: min(64rem, 100%);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.measure {
    max-width: var(--measure);
}

.skip {
    position: absolute;
    left: .5rem;
    top: -6rem;
    z-index: 100;
    background: var(--ink);
    color: var(--page);
    padding: .75rem 1rem;
    font-weight: 700;
}

.skip:focus {
    top: .5rem;
}

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

/* ---- The page: ruled paper with a margin rule ---- */
.page {
    background-color: var(--page);
    background-image: repeating-linear-gradient(
            var(--page) 0, var(--page) calc(var(--lh) - 1px),
            var(--rule-line) calc(var(--lh) - 1px), var(--rule-line) var(--lh));
    background-position: 0 .25rem;
    border: 1px solid var(--rule);
    box-shadow: 0 1px 0 var(--rule), 0 2px 0 var(--page), 0 3px 0 var(--rule);
    padding: 1.75rem 1.5rem 1.75rem 2rem;
    position: relative;
}

@media (min-width: 42rem) {
    .page {
        padding-left: 4.5rem;
    }
}

.page::before {
    content: "";
    position: absolute;
    inset-block: 0;
    left: 3.25rem;
    border-left: 1px solid var(--margin);
    opacity: .7;
    display: none;
}

@media (min-width: 42rem) {
    .page::before {
        display: block;
    }
}

.page > * {
    position: relative;
}

/* ---- Rubber stamp: the recurring device ---- */
.stamp {
    display: inline-block;
    font-family: var(--mono);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--stamp-ink);
    border: 2px solid currentColor;
    border-radius: 2px;
    padding: .25rem .6rem;
    transform: rotate(-2deg);
    opacity: .92;
}

.stamp-green {
    color: var(--stamp-green);
    transform: rotate(1.5deg);
}

.stamp-purple {
    color: var(--stamp-purple);
    transform: rotate(-1deg);
}

.stamp-red {
    color: var(--margin);
    transform: rotate(2deg);
}

.pencil {
    font-family: var(--hand);
    font-size: .9375rem;
    color: var(--ink-2);
    display: inline-block;
    transform: rotate(-1deg);
}

/* ---- Buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--mono);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .7rem 1.3rem;
    border: 2px solid var(--ink);
    border-radius: 2px;
    background: transparent;
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.btn:hover {
    transform: translateY(-2px);
    background: var(--paper);
}

.btn-ink {
    background: var(--stamp-green);
    border-color: var(--stamp-green);
    color: var(--page);
}

@media (prefers-color-scheme: dark) {
    .btn-ink {
        color: #14170F;
    }
}

.btn-ink:hover {
    background: var(--stamp-green);
    color: var(--page);
}

@media (prefers-color-scheme: dark) {
    .btn-ink:hover {
        color: #14170F;
    }
}

/* ---- Header ---- */
.masthead {
    background: var(--paper);
    border-bottom: 2px solid var(--ink);
    position: sticky;
    top: 0;
    z-index: 30;
}

.masthead .wrap {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-height: 3.75rem;
}

.brand {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-family: var(--serif);
    font-size: 1.5rem;
    color: var(--ink);
    text-decoration: none;
    margin-inline-end: auto;
}

.brand svg {
    width: 1.4rem;
    height: 1.4rem;
    flex: none;
}

.brand small {
    font-family: var(--mono);
    font-size: .625rem;
    letter-spacing: .16em;
    color: var(--ink-3);
    text-transform: uppercase;
}

.nav-toggle {
    display: none;
    font-family: var(--mono);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    background: transparent;
    color: var(--ink);
    border: 2px solid var(--ink);
    padding: .45rem .8rem;
    cursor: pointer;
}

.nav {
    display: flex;
    align-items: center;
    gap: 1.35rem;
}

.nav a:not(.btn) {
    font-family: var(--mono);
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-2);
    text-decoration: none;
}

.nav a:not(.btn):hover {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: .3em;
}

.nav .btn {
    font-size: .75rem;
    padding: .45rem .9rem;
}

@media (max-width: 56rem) {
    .nav-toggle {
        display: inline-block;
    }

    .nav {
        display: none;
        position: absolute;
        inset-inline: 0;
        top: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--paper);
        border-bottom: 2px solid var(--ink);
        padding: .5rem var(--gutter) 1.25rem;
    }

    .nav[data-open="true"] {
        display: flex;
    }

    .nav a {
        padding: .75rem 0;
        border-bottom: 1px solid var(--rule);
    }

    .nav .btn {
        margin-top: 1rem;
    }
}

/* ---- Sections ---- */
.section {
    padding-block: clamp(2.5rem, 6vw, 4rem);
}

.section-head {
    margin-bottom: 2rem;
}

.section-head h2 {
    font-size: clamp(1.75rem, 4.5vw, 2.5rem);
    margin-top: .9rem;
}

.section-head p {
    color: var(--ink-2);
    margin-top: .9rem;
    max-width: var(--measure);
}

/* ---- Hero ---- */
.hero {
    padding-block: clamp(2rem, 5vw, 3.5rem);
}

.hero-grid {
    display: grid;
    gap: clamp(2rem, 4vw, 3rem);
    align-items: start;
}

@media (min-width: 62rem) {
    .hero-grid {
        grid-template-columns: 1.05fr .95fr;
    }
}

.hero h1 {
    font-size: clamp(2.125rem, 6vw, 3.5rem);
    margin-block: 1rem .75rem;
}

.hero h1 em {
    font-style: italic;
    color: var(--stamp-green);
}

.hero-lede {
    font-size: 1.0625rem;
    color: var(--ink-2);
    max-width: var(--measure);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.75rem;
}

.hero-note {
    margin-top: 1rem;
}

/* ---- Specimen sheet (root diagram) ---- */
.plate {
    padding: 1.25rem 1rem .75rem;
}

.plate-head {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--rule);
    padding-bottom: .6rem;
    margin-bottom: .75rem;
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.root-svg {
    display: block;
    width: 100%;
    height: auto;
}

.root-svg .stem {
    fill: none;
    stroke: var(--ink-2);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.root-svg .sprout {
    fill: none;
    stroke: var(--stamp-green);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.root-svg .leafshape {
    fill: none;
    stroke: var(--stamp-green);
    stroke-width: 2.5;
}

.root-svg .node {
    fill: var(--page);
    stroke: var(--ink);
    stroke-width: 2.5;
}

.root-svg .node-txt {
    font-family: var(--mono);
    font-size: 13px;
    letter-spacing: .04em;
    fill: var(--ink);
    text-anchor: middle;
}

.root-svg .seed-txt {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .16em;
    fill: var(--ink-3);
    text-anchor: middle;
}

.root-svg .anno {
    font-family: var(--mono);
    font-size: 11px;
    fill: var(--margin);
}

.root-svg .anno-line {
    stroke: var(--margin);
    stroke-width: 1.5;
    fill: none;
    stroke-dasharray: 4 3;
}

.root-svg .draw {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: grow 1.5s ease-out forwards;
}

.d1 {
    animation-delay: .1s
}

.d2 {
    animation-delay: .25s
}

.d3 {
    animation-delay: .4s
}

.d4 {
    animation-delay: .55s
}

.d5 {
    animation-delay: .7s
}

.root-svg .pop {
    opacity: 0;
    animation: pop .4s ease forwards;
}

.p1 {
    animation-delay: 1.3s
}

.p2 {
    animation-delay: 1.42s
}

.p3 {
    animation-delay: 1.54s
}

.p4 {
    animation-delay: 1.66s
}

.p5 {
    animation-delay: 1.78s
}

.p6 {
    animation-delay: 2.1s
}

@keyframes grow {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes pop {
    to {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        animation-delay: 0ms !important;
        transition-duration: .001ms !important;
    }

    .root-svg .draw {
        stroke-dashoffset: 0;
    }

    .root-svg .pop {
        opacity: 1;
    }
}

/* ---- Ledger of features ---- */
.ledger {
    width: 100%;
    border-collapse: collapse;
}

.ledger caption {
    text-align: left;
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    padding-bottom: .75rem;
}

.ledger th, .ledger td {
    text-align: left;
    vertical-align: top;
    padding: .9rem .75rem;
    border-bottom: 1px solid var(--rule);
}

.ledger thead th {
    font-family: var(--mono);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-3);
    border-bottom: 2px solid var(--ink);
}

.ledger tbody th {
    font-family: var(--serif);
    font-size: 1.1875rem;
    font-weight: 400;
    white-space: nowrap;
}

.ledger td.cat {
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cat-coord {
    color: var(--stamp-ink);
}

.cat-people {
    color: var(--stamp-green);
}

.cat-comms {
    color: var(--stamp-purple);
}

.cat-intake {
    color: var(--margin);
}

.ledger td.desc {
    color: var(--ink-2);
    font-size: .9375rem;
    max-width: 40ch;
}

.ledger tbody tr:hover {
    background: var(--paper);
}

@media (max-width: 46rem) {
    .ledger, .ledger tbody, .ledger tr, .ledger td, .ledger th {
        display: block;
    }

    .ledger thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
    }

    .ledger tbody tr {
        border-bottom: 2px solid var(--ink);
        padding-block: .5rem;
    }

    .ledger th, .ledger td {
        border-bottom: 0;
        padding-block: .25rem;
    }
}

/* ---- Steps ---- */
.steps {
    display: grid;
    gap: 1.5rem;
    counter-reset: step;
}

@media (min-width: 50rem) {
    .steps {
        grid-template-columns: repeat(2, 1fr);
    }
}

.step {
    counter-increment: step;
    padding-top: 1.9rem;
    border-top: 2px solid var(--ink);
    margin-top: 1rem;
}

.step::before {
    content: "Reason " counter(step);
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--margin);
    display: block;
    margin-bottom: .6rem;
}

.step h3 {
    font-size: 1.25rem;
    margin-bottom: .4rem;
}

.step p {
    color: var(--ink-2);
    font-size: .9375rem;
}

/* ---- Quote ---- */
.slip {
    max-width: 48rem;
}

.slip blockquote {
    font-family: var(--serif);
    font-size: clamp(1.1875rem, 2.8vw, 1.625rem);
    line-height: 1.4;
    font-style: italic;
}

.slip figcaption {
    margin-top: 1rem;
    font-family: var(--mono);
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ink-3);
}

/* ============================================================
   PRICING — self-contained. To disable: delete <section
   id="pricing"> and the links marked data-pricing-link.
   ============================================================ */
.tiers {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
    align-items: start;
}

.tier {
    padding: 1.5rem;
    background-image: none;
    background-color: var(--page);
}

.tier::before {
    display: none;
}

.tier h3 {
    font-size: 1.5rem;
}

.tier .price {
    font-family: var(--serif);
    font-size: 2.25rem;
    display: block;
    line-height: 1.1;
    margin-block: .5rem .25rem;
}

.tier .price small {
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.tier ul {
    margin-block: 1rem;
    display: grid;
    gap: .45rem;
    font-size: .9375rem;
    color: var(--ink-2);
}

.tier li {
    padding-left: 1.4rem;
    position: relative;
}

.tier li::before {
    content: "\2014";
    position: absolute;
    left: 0;
    color: var(--ink-3);
}

.tier .btn {
    width: 100%;
}

.pricing-note {
    margin-top: 1.75rem;
    padding-left: 1.25rem;
    border-left: 3px solid var(--margin);
    color: var(--ink-2);
    font-size: .9375rem;
    max-width: 46rem;
}

/* ---- Form as a sign-in book ---- */
.demo-grid {
    display: grid;
    gap: clamp(2rem, 5vw, 3rem);
}

@media (min-width: 56rem) {
    .demo-grid {
        grid-template-columns: .85fr 1.15fr;
    }
}

.field {
    margin-bottom: 1.1rem;
}

.field label {
    display: block;
    font-family: var(--mono);
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: .2rem;
}

input, textarea, select {
    font: inherit;
    font-family: var(--hand);
    font-size: 1.0625rem;
    width: 100%;
    color: var(--ink);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--ink-3);
    padding: .35rem .25rem;
}

select {
    font-family: var(--sans);
    font-size: 1rem;
    border: 1px solid var(--ink-3);
    padding: .5rem;
    background: var(--page);
}

textarea {
    min-height: 5rem;
    resize: vertical;
    border: 1px solid var(--ink-3);
    padding: .5rem;
}

input:focus, textarea:focus, select:focus {
    background: var(--paper);
}

.hint {
    font-size: .8125rem;
    color: var(--ink-3);
    margin-top: .25rem;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

/* ---- FAQ ---- */
.faq {
    max-width: 48rem;
}

.faq details {
    border-bottom: 1px solid var(--rule);
}

.faq summary {
    cursor: pointer;
    padding: .95rem 0;
    font-family: var(--serif);
    font-size: 1.125rem;
    display: flex;
    gap: 1rem;
    align-items: baseline;
    justify-content: space-between;
    list-style: none;
}

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

.faq summary::after {
    content: "see";
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--margin);
    flex: none;
}

.faq details[open] summary::after {
    content: "close";
}

.faq details p {
    padding-bottom: 1.1rem;
    color: var(--ink-2);
    max-width: var(--measure);
}

/* ---- Footer ---- */
.foot {
    border-top: 2px solid var(--ink);
    padding-block: 2.5rem;
}

.foot-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.foot h2 {
    font-family: var(--mono);
    font-size: .6875rem;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: .7rem;
}

.foot ul {
    display: grid;
    gap: .45rem;
    font-size: .9375rem;
}

.foot a {
    color: var(--ink-2);
    text-decoration: none;
}

.foot a:hover {
    color: var(--ink);
    text-decoration: underline;
}

.colophon {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rule);
    font-family: var(--mono);
    font-size: .75rem;
    color: var(--ink-3);
}

.d-block {
    display: block;
}

.text-center {
    text-align: center;
}

.page-with-margin {
    padding-left: 4rem;
}

/* ---- Story: prose with a supporting image ---- */
.story { display: grid; gap: 2.5rem; }

.story-item { display: grid; gap: 1.25rem; align-items: start; }

@media (min-width: 56rem) {
    .story-item {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
        column-gap: 2.5rem;
    }
}

.story-text { max-width: var(--measure); }
.story-text p { color: var(--ink-2); }

.story-fig { --tilt: 0deg; margin: 0; }
@media (min-width: 56rem) {
    .story-fig { transform: rotate(var(--tilt)); }

    .story-item:nth-child(3n+1) .story-fig { --tilt: -1.5deg; }
    .story-item:nth-child(3n+2) .story-fig { --tilt: 2deg;   }
    .story-item:nth-child(3n+3) .story-fig { --tilt: -1deg;  }

    .story-item {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }
    .story-item > * { grid-row: 1; }
    .story-text { grid-column: 1; }
    .story-fig  { grid-column: 2; }

    .story-item:nth-child(even) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    }
    .story-item:nth-child(even) .story-text { grid-column: 2; }
    .story-item:nth-child(even) .story-fig  { grid-column: 1; }
}
.story-fig img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--rule);
}
.story-fig figcaption { margin-top: .5rem; }

/* ============================================================
   LEGAL DOCUMENTS — terms.html, privacy.html
   Scoped to a <main> that contains generated section.level2
   blocks, so the marketing pages keep the zeroed reset.
   ============================================================ */
main:has(.level2) {
    margin: clamp(1.5rem, 4vw, 3rem) clamp(.75rem, 3vw, 2rem);
    line-height: 1.7;

    /* Sticky masthead is 3.75rem; keep anchored sections clear of it. */
    [id] {
        scroll-margin-top: 5rem;
    }

    /* ---- The document itself, as a sheet ---- */
    > .wrap {
        width: min(46rem, 100%);
        background: var(--page);
        border: 1px solid var(--rule);
        box-shadow: 0 1px 0 var(--rule), 0 2px 0 var(--page), 0 3px 0 var(--rule);
        padding-block: clamp(1.75rem, 4vw, 2.75rem);
        position: relative;
    }

    > .wrap::before {
        content: "";
        position: absolute;
        inset-block: 0;
        left: 3.25rem;
        border-left: 1px solid var(--margin);
        opacity: .7;
        display: none;
    }

    @media (min-width: 42rem) {
        > .wrap {
            padding-left: 4.5rem;
        }

        > .wrap::before {
            display: block;
        }
    }

    /* ---- Headings ---- */
    h1 {
        font-size: clamp(1.875rem, 5vw, 2.75rem);
        padding-bottom: .75rem;
        border-bottom: 2px solid var(--ink);
    }

    h2 {
        font-size: clamp(1.375rem, 3.5vw, 1.75rem);
        margin-block: 2.25rem .75rem;
    }

    h3 {
        font-size: 1.1875rem;
        margin-block: 1.75rem .5rem;
    }

    /* ---- Body copy ---- */
    p {
        margin-block: .9rem;
    }

    /* Dates and revision stamps under the title. */
    .docmeta {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem 1.5rem;
        margin-top: 1rem;
        font-family: var(--mono);
        font-size: .6875rem;
        letter-spacing: .12em;
        text-transform: uppercase;
        color: var(--ink-2);
    }

    .docmeta p {
        margin: 0;
    }

    .docmeta strong {
        font-weight: 700;
        color: var(--ink-3);
    }

    /* ---- Lists: the reset removes markers, put them back ---- */
    ul, ol {
        margin-block: .9rem;
        padding-inline-start: 1.5rem;
    }

    ul {
        list-style: disc;
    }

    ol {
        list-style: decimal;
    }

    li {
        margin-block: .4rem;
        padding-left: .35rem;
    }

    li::marker {
        color: var(--margin);
    }

    /* ---- Section separators ---- */
    hr {
        border: 0;
        border-top: 1px solid var(--rule);
        margin-block: 2.25rem;
    }

    /* ---- Conspicuous clauses (warranty, liability) ----
       Weight plus a rule, never colour alone. Consecutive
       clauses join into one continuous bar. */
    .conspicuous {
        font-weight: 600;
        border-left: 3px solid var(--margin);
        padding: .3rem 0 .3rem 1.25rem;
    }

    .conspicuous + .conspicuous {
        margin-top: 0;
    }

    /* ---- Tables ---- */
    table {
        width: 100%;
        border-collapse: collapse;
        margin-block: 1.25rem;
    }

    th, td {
        text-align: left;
        vertical-align: top;
        padding: .7rem .75rem;
        border-bottom: 1px solid var(--rule);
    }

    thead th {
        font-family: var(--mono);
        font-size: .6875rem;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        color: var(--ink-3);
        border-bottom: 2px solid var(--ink);
    }

    tbody tr:hover {
        background: var(--paper);
    }
}