:root {
    --bg: #EDEEEA;
    --sheet: #F9F9F7;
    --ink: #16191A;
    --muted: #5A5F60;
    --rule: #CDD0CB;
    --rule-strong: #16191A;
    --tab: #D8DBD5;
    --tab-ink: #16191A;
    --signal: #3C8F69;
    --signal-ink: #FFFFFF;
    --signal-deep: #2F7656;
    --graphite: #202427;
    --graphite-ink: #ECEDE9;
    --graphite-muted: #A0A6A8;
    --graphite-rule: #3A4044;
    --error: #B42318;
    --f-display: "Barlow Condensed", "Arial Narrow", "Helvetica Neue", sans-serif;
    --f-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
    --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #111315;
        --sheet: #171A1C;
        --ink: #E8E9E5;
        --muted: #9BA0A2;
        --rule: #2D3235;
        --rule-strong: #E8E9E5;
        --tab: #262B2E;
        --tab-ink: #E8E9E5;
        --signal: #3C8F69;
        --signal-ink: #FFFFFF;
        --signal-deep: #2F7656;
        --graphite: #1B1F22;
        --graphite-ink: #ECEDE9;
        --graphite-muted: #A0A6A8;
        --graphite-rule: #343A3E;
        --error: #FF8A7A;
        color-scheme: dark;
    }
}

:root[data-theme="dark"] {
    --bg: #111315;
    --sheet: #171A1C;
    --ink: #E8E9E5;
    --muted: #9BA0A2;
    --rule: #2D3235;
    --rule-strong: #E8E9E5;
    --tab: #262B2E;
    --tab-ink: #E8E9E5;
    --signal: #3C8F69;
    --signal-ink: #FFFFFF;
    --signal-deep: #2F7656;
    --graphite: #1B1F22;
    --graphite-ink: #ECEDE9;
    --graphite-muted: #A0A6A8;
    --graphite-rule: #343A3E;
    --error: #FF8A7A;
    color-scheme: dark;
}

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

body {
    margin: 0;
    background: var(--bg);
    color: var(--ink);
    font-family: var(--f-body);
    font-size: 18px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased
}

body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: env(safe-area-inset-top, 0px);
    z-index: 10;
    background: var(--bg)
}

a {
    color: inherit
}

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

h1, h2, h3 {
    margin: 0;
    text-wrap: balance
}

p {
    margin: 0
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none
}

table {
    border-collapse: collapse;
    width: 100%
}

.wrap {
    max-width: 1200px;
    margin-inline: auto;
    padding-left: max(16px, env(safe-area-inset-left, 0px));
    padding-right: max(16px, env(safe-area-inset-right, 0px))
}

@media (min-width: 700px) {
    .wrap {
        padding-left: max(32px, env(safe-area-inset-left, 0px));
        padding-right: max(32px, env(safe-area-inset-right, 0px))
    }
}

@media (min-width: 1100px) {
    .wrap {
        padding-right: calc(max(32px, env(safe-area-inset-right, 0px)) + 64px)
    }
}

/* type */
.eyebrow {
    font-family: var(--f-mono);
    font-size: 12.5px;
    font-weight: 500;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted)
}

.mega {
    font-family: var(--f-display);
    font-weight: 750;
    text-transform: uppercase;
    font-size: clamp(2.75rem, 8.6vw, 7.25rem);
    line-height: .9;
    letter-spacing: -.005em;
    isolation: isolate
}

.big {
    font-family: var(--f-display);
    font-weight: 720;
    text-transform: uppercase;
    font-size: clamp(2.3rem, 5.6vw, 4.6rem);
    line-height: .94
}

.h2 {
    font-family: var(--f-display);
    font-weight: 700;
    text-transform: uppercase;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    line-height: .98;
    letter-spacing: .002em
}

.h3 {
    font-family: var(--f-display);
    font-weight: 650;
    font-size: 1.55rem;
    line-height: 1.1;
    letter-spacing: .005em
}

.hl {
    background: var(--signal);
    color: var(--signal-ink);
    padding: 0 .1em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    /* paint under the line above, which the tight .mega line-height overlaps */
    position: relative;
    z-index: -1
}

.lede {
    font-size: clamp(1.1rem, 1.6vw, 1.3rem);
    line-height: 1.5;
    max-width: 56ch
}

.muted {
    color: var(--muted)
}

.body {
    color: var(--muted);
    max-width: 62ch
}

/* buttons */
.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: .6em;
    font: 600 16px/1 var(--f-body);
    text-decoration: none;
    padding: 16px 22px;
    border: 2px solid var(--ink);
    cursor: pointer;
    transition: transform .12s, box-shadow .12s, background .12s
}

.btn-signal {
    background: var(--signal-deep);
    color: var(--signal-ink);
    border-color: var(--signal-deep)
}

.btn-ink {
    background: var(--ink);
    color: var(--bg)
}

.btn-line {
    background: transparent;
    color: var(--ink)
}

.btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--ink)
}

.btn-signal:hover {
    box-shadow: 4px 4px 0 var(--ink)
}

.cta .btn:hover {
    box-shadow: 4px 4px 0 var(--ink)
}

.arrow {
    font-family: var(--f-mono);
    font-weight: 500
}

/* header */
.site-head {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 9;
    background: var(--bg);
    border-bottom: 2px solid var(--rule-strong)
}

.head-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 68px
}

.brand {
    display: flex;
    align-items: baseline;
    gap: 18px;
    min-width: 0
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none
}

.logo-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    background: var(--signal);
    color: var(--signal-ink);
    font: 800 17px/1 var(--f-display);
    border: 2px solid var(--signal)
}

.logo-word {
    font: 700 25px/1 var(--f-display);
    letter-spacing: .01em;
    text-transform: uppercase
}

.tagline {
    font-family: var(--f-mono);
    font-size: 12px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap
}

@media (max-width: 760px) {
    .tagline {
        display: none
    }
}

.head-cta {
    display: flex;
    align-items: center;
    gap: 10px
}

.head-cta .btn {
    padding: 11px 16px;
    font-size: 15px
}

.menu-btn {
    display: inline-flex;
    background: none;
    border: 2px solid var(--ink);
    color: var(--ink);
    padding: 9px 12px;
    font: 600 14px/1 var(--f-mono);
    text-transform: uppercase;
    letter-spacing: .06em;
    cursor: pointer
}

.theme-btn {
    display: inline-grid;
    place-items: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background: none;
    border: 2px solid var(--ink);
    color: var(--ink);
    cursor: pointer
}

/* show the theme a click switches to */
.theme-btn[aria-pressed="true"] .i-moon, .theme-btn[aria-pressed="false"] .i-sun {
    display: none
}

@media (max-width: 520px) {
    .head-cta .btn {
        display: none
    }
}

@media (min-width: 1100px) {
    .menu-btn {
        display: none
    }
}

.menu {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--bg);
    border-bottom: 2px solid var(--rule-strong);
    padding: 8px max(16px, env(safe-area-inset-right, 0px)) 18px max(16px, env(safe-area-inset-left, 0px))
}

.menu a {
    display: grid;
    grid-template-columns:44px minmax(0, 1fr);
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
    text-decoration: none;
    font: 650 22px/1.1 var(--f-display);
    text-transform: uppercase
}

.menu a b {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    background: var(--tab);
    color: var(--tab-ink);
    font-weight: 800
}

.menu a[aria-current="page"] b {
    background: var(--signal);
    color: var(--signal-ink)
}

@media (min-width: 1100px) {
    .menu {
        display: none !important
    }
}

/* thumb index */
.thumbs {
    display: none
}

@media (min-width: 1100px) {
    .thumbs {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        position: fixed;
        right: 0;
        top: calc(env(safe-area-inset-top, 0px) + 112px);
        z-index: 8
    }

    .thumbs a {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        width: 48px;
        padding: 12px 0 16px;
        padding-right: env(safe-area-inset-right, 0px);
        background: var(--tab);
        color: var(--tab-ink);
        text-decoration: none;
        transition: width .15s, background .15s
    }

    .thumbs a b {
        font: 800 20px/1 var(--f-display)
    }

    .thumbs a span {
        writing-mode: vertical-rl;
        transform: rotate(180deg);
        font: 500 11.5px/1 var(--f-mono);
        letter-spacing: .08em;
        text-transform: uppercase
    }

    .thumbs a:hover {
        width: 54px
    }

    .thumbs a[aria-current="page"] {
        background: var(--signal);
        color: var(--signal-ink);
        width: 62px
    }
}

/* hero */
.hero {
    display: grid;
    gap: 30px;
    padding-block: clamp(44px, 7vw, 88px) clamp(56px, 8vw, 104px)
}

.hero-grid {
    display: grid;
    gap: 40px;
    align-items: start;
    margin-top: clamp(8px, 2vw, 20px)
}

@media (min-width: 960px) {
    .hero-grid {
        grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
        gap: 64px
    }
}

.hero-copy {
    display: grid;
    gap: 28px;
    min-width: 0
}

/* datasheet */
.datasheet {
    border: 2px solid var(--rule-strong);
    background: var(--sheet);
    min-width: 0
}

.ds-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    background: var(--ink);
    color: var(--bg);
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 11px 14px
}

.datasheet th, .datasheet td {
    text-align: left;
    vertical-align: baseline;
    padding: 9px 14px;
    border-bottom: 1px solid var(--rule)
}

.datasheet tr:last-child th, .datasheet tr:last-child td {
    border-bottom: 0
}

.datasheet th {
    font: 500 11.5px/1.4 var(--f-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
    width: 40%;
    font-weight: 500
}

.datasheet td {
    font-size: 16px;
    font-weight: 500;
    font-variant-numeric: tabular-nums
}

.datasheet td.num {
    font: 700 22px/1 var(--f-display)
}

/* sections */
.section {
    padding-block: clamp(64px, 9vw, 112px)
}

.sec-head {
    display: grid;
    gap: 14px;
    margin-bottom: clamp(32px, 5vw, 52px);
    max-width: 820px
}

.rule-top {
    border-top: 2px solid var(--rule-strong)
}

/* wiring diagram */
.schem {
    border: 2px solid var(--rule-strong);
    background: var(--sheet);
    padding: clamp(16px, 3vw, 32px)
}

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

.schem .w {
    fill: none;
    stroke: var(--ink);
    stroke-width: 2
}

.schem .node {
    fill: var(--bg);
    stroke: var(--ink);
    stroke-width: 2
}

.schem .core {
    fill: var(--signal);
    stroke: var(--ink);
    stroke-width: 2
}

.schem .dot {
    fill: var(--ink)
}

.schem .pulse {
    fill: var(--signal);
    stroke: var(--ink);
    stroke-width: 1.5
}

.schem .t-name {
    font: 700 24px var(--f-display);
    fill: var(--ink);
    text-transform: uppercase
}

.schem .t-sub {
    font: 400 12px var(--f-mono);
    fill: var(--muted)
}

.schem .t-core-label {
    font: 500 13px var(--f-mono);
    fill: var(--signal-ink);
    letter-spacing: .08em
}

.schem .t-core {
    font: 750 28px var(--f-display);
    fill: var(--signal-ink);
    text-transform: uppercase
}

.schem .t-core-sub {
    font: 500 14px var(--f-mono);
    fill: var(--signal-ink)
}

.schem-m {
    display: none
}

@media (max-width: 759px) {
    .schem svg {
        display: none
    }

    .schem-m {
        display: grid;
        gap: 0
    }

    .schem-m .c {
        background: var(--signal);
        color: var(--signal-ink);
        border: 2px solid var(--ink);
        padding: 16px;
        display: grid;
        gap: 4px
    }

    .schem-m .c small {
        font: 500 11.5px/1 var(--f-mono);
        letter-spacing: .08em;
        text-transform: uppercase
    }

    .schem-m .c strong {
        font: 750 26px/1 var(--f-display);
        text-transform: uppercase
    }

    .schem-m ul {
        margin-left: 22px;
        border-left: 2px solid var(--ink);
        padding-top: 10px
    }

    .schem-m li {
        position: relative;
        margin-left: 22px;
        padding: 10px 14px;
        border: 2px solid var(--ink);
        background: var(--bg);
        margin-bottom: 10px;
        display: grid;
        gap: 2px
    }

    .schem-m li::before {
        content: "";
        position: absolute;
        left: -24px;
        top: 50%;
        width: 22px;
        border-top: 2px solid var(--ink)
    }

    .schem-m li b {
        font: 700 20px/1.1 var(--f-display);
        text-transform: uppercase
    }

    .schem-m li span {
        font: 400 12.5px/1.3 var(--f-mono);
        color: var(--muted)
    }
}

.schem-cap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 8px 24px;
    margin-top: 14px;
    font: 400 12.5px/1.5 var(--f-mono);
    color: var(--muted)
}

/* catalogue entries */
.catalog li {
    border-top: 2px solid var(--rule-strong)
}

.catalog li:last-child {
    border-bottom: 2px solid var(--rule-strong)
}

.catalog a {
    display: grid;
    grid-template-columns:64px minmax(0, 1fr);
    gap: 18px 28px;
    padding: 28px 0;
    text-decoration: none;
    align-items: start
}

@media (min-width: 860px) {
    .catalog a {
        grid-template-columns:84px minmax(0, .9fr) minmax(0, 1.2fr) auto;
        align-items: center
    }
}

.tab {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    background: var(--tab);
    color: var(--tab-ink);
    font: 800 36px/1 var(--f-display);
    transition: background .15s, color .15s
}

@media (min-width: 860px) {
    .tab {
        width: 84px;
        height: 84px;
        font-size: 46px
    }
}

.catalog .t {
    font: 720 clamp(1.7rem, 3vw, 2.5rem)/1 var(--f-display);
    text-transform: uppercase
}

.catalog .d {
    color: var(--muted);
    grid-column: 2
}

@media (min-width: 860px) {
    .catalog .d {
        grid-column: auto
    }
}

.catalog .go {
    display: none;
    font: 500 13px/1 var(--f-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    white-space: nowrap
}

@media (min-width: 860px) {
    .catalog .go {
        display: inline
    }
}

.catalog a:hover .tab {
    background: var(--signal);
    color: var(--signal-ink)
}

/* graphite band */
.band {
    background: var(--graphite);
    color: var(--graphite-ink)
}

.band .eyebrow {
    color: var(--graphite-muted)
}

.band-inner {
    padding-block: clamp(64px, 9vw, 112px);
    display: grid;
    gap: clamp(32px, 5vw, 52px)
}

.band-head {
    display: grid;
    gap: 16px;
    max-width: 820px
}

.band-head p {
    color: var(--graphite-muted);
    max-width: 60ch
}

.prin li {
    display: grid;
    grid-template-columns:minmax(0, 1fr);
    gap: 8px 40px;
    padding: 22px 0;
    border-top: 1px solid var(--graphite-rule)
}

.prin li:last-child {
    border-bottom: 1px solid var(--graphite-rule)
}

@media (min-width: 860px) {
    .prin li {
        grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr)
    }
}

.prin h3 {
    font: 700 1.6rem/1.05 var(--f-display);
    text-transform: uppercase
}

.prin p {
    color: var(--graphite-muted);
    max-width: 60ch
}

/* stack */
.bom th, .bom td {
    text-align: left;
    vertical-align: baseline;
    padding: 16px 0;
    border-bottom: 1px solid var(--rule)
}

.bom tr:first-child th, .bom tr:first-child td {
    border-top: 2px solid var(--rule-strong)
}

.bom th {
    font: 500 12.5px/1.4 var(--f-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    width: 220px;
    padding-right: 24px
}

.bom td {
    font: 650 clamp(1.25rem, 2.2vw, 1.65rem)/1.25 var(--f-display);
    text-transform: uppercase
}

.bom td i {
    font-style: normal;
    color: var(--rule);
    padding-inline: .3em
}

/* allow wrapping after each separator */
.bom td i::after {
    content: "\200B"
}

@media (max-width: 699px) {
    .bom, .bom tbody, .bom tr, .bom th, .bom td {
        display: block
    }

    .bom th {
        width: auto;
        padding: 16px 0 6px;
        border-bottom: 0
    }

    .bom td {
        padding-top: 0
    }

    .bom tr:first-child td {
        border-top: 0
    }
}

/* section page hero */
.sec-hero {
    display: grid;
    gap: 24px;
    padding-block: clamp(44px, 7vw, 88px) clamp(48px, 6vw, 72px)
}

@media (min-width: 860px) {
    .sec-hero {
        grid-template-columns:120px minmax(0, 1fr);
        gap: 40px
    }
}

.sec-tab {
    display: grid;
    place-items: center;
    width: 84px;
    height: 84px;
    background: var(--signal);
    color: var(--signal-ink);
    font: 800 52px/1 var(--f-display);
    border: 2px solid var(--signal)
}

@media (min-width: 860px) {
    .sec-tab {
        width: 120px;
        height: 120px;
        font-size: 76px
    }
}

.sec-hero-copy {
    display: grid;
    gap: 22px;
    min-width: 0;
    max-width: 900px
}

/* entries */
.entries {
    display: grid;
    grid-template-columns:minmax(0, 1fr);
    gap: 0 48px
}

@media (min-width: 760px) {
    .entries {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

.entry {
    border-top: 2px solid var(--rule-strong);
    padding: 20px 0 36px;
    display: grid;
    gap: 10px;
    align-content: start
}

.entry h3 {
    font: 700 1.65rem/1.05 var(--f-display);
    text-transform: uppercase
}

.entry p {
    color: var(--muted)
}

/* spec tables */
.spec {
    border-top: 2px solid var(--rule-strong)
}

.spec thead th {
    font: 500 12px/1.4 var(--f-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
    text-align: left;
    padding: 12px 16px 12px 0;
    border-bottom: 1px solid var(--rule)
}

.spec tbody th, .spec tbody td {
    text-align: left;
    vertical-align: baseline;
    padding: 18px 16px 18px 0;
    border-bottom: 1px solid var(--rule)
}

.spec tbody th {
    font: 700 1.5rem/1.1 var(--f-display);
    text-transform: uppercase;
    width: 30%
}

.spec tbody td {
    color: var(--muted)
}

.spec tbody td.strong {
    color: var(--ink);
    font-weight: 500
}

.spec a {
    color: var(--ink);
    text-underline-offset: 3px
}

@media (max-width: 680px) {
    .spec thead {
        display: none
    }

    .spec, .spec tbody, .spec tr, .spec th, .spec td {
        display: block;
        width: auto
    }

    .spec tbody tr {
        padding: 16px 0;
        border-bottom: 1px solid var(--rule)
    }

    .spec tbody th, .spec tbody td {
        border: 0;
        padding: 3px 0
    }

    .spec tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        font: 500 11px/1.6 var(--f-mono);
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--muted);
        margin-top: 6px
    }
}

/* split */
.split {
    display: grid;
    gap: 28px
}

@media (min-width: 900px) {
    .split {
        grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr);
        gap: 64px
    }
}

/* steps (a real sequence) */
.steps {
    display: grid;
    grid-template-columns:minmax(0, 1fr);
    gap: 12px
}

@media (min-width: 760px) {
    .steps {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

@media (min-width: 1080px) {
    .steps {
        grid-template-columns:repeat(4, minmax(0, 1fr))
    }
}

.steps li {
    counter-increment: step;
    border: 2px solid var(--rule-strong);
    background: var(--sheet);
    padding: 18px 18px 22px;
    display: grid;
    gap: 10px;
    align-content: start
}

.steps {
    counter-reset: step
}

.steps li::before {
    content: "Step " counter(step);
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    background: var(--ink);
    color: var(--bg);
    padding: 6px 8px;
    justify-self: start
}

.steps h3 {
    font: 700 1.6rem/1 var(--f-display);
    text-transform: uppercase
}

.steps p {
    color: var(--muted);
    font-size: 16.5px
}

/* checklist */
.checks li {
    display: grid;
    grid-template-columns:28px minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;
    padding: 14px 0;
    border-top: 1px solid var(--rule);
    font-weight: 500
}

.checks li:first-child {
    border-top: 2px solid var(--rule-strong)
}

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

.checks li::before {
    content: "✓";
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    background: var(--signal);
    color: var(--signal-ink);
    font: 700 14px/1 var(--f-body);
    transform: translateY(5px)
}

/* facts row */
.facts {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    border: 2px solid var(--rule-strong);
    background: var(--sheet)
}

@media (min-width: 860px) {
    .facts {
        grid-template-columns:repeat(4, minmax(0, 1fr))
    }
}

.fact {
    padding: 18px;
    display: grid;
    gap: 6px;
    align-content: start;
    border-left: 1px solid var(--rule)
}

.fact:first-child {
    border-left: 0
}

@media (max-width: 859px) {
    .fact:nth-child(3) {
        border-left: 0
    }

    .fact:nth-child(n+3) {
        border-top: 1px solid var(--rule)
    }
}

.fact small {
    font: 500 11.5px/1.3 var(--f-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted)
}

.fact strong {
    font: 750 clamp(1.8rem, 3vw, 2.6rem)/1 var(--f-display);
    text-transform: uppercase;
    font-variant-numeric: tabular-nums
}

/* roster */
.roster td.nm {
    font: 700 1.45rem/1.1 var(--f-display);
    text-transform: uppercase;
    color: var(--ink)
}

.roster a {
    font: 500 13px/1 var(--f-mono);
    letter-spacing: .04em;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 2px solid var(--signal);
    padding-bottom: 2px
}

.roster a:hover {
    background: var(--signal);
    color: var(--signal-ink)
}

/* contact */
.contact-grid {
    display: grid;
    gap: 44px;
    padding-bottom: clamp(64px, 9vw, 112px)
}

@media (min-width: 960px) {
    .contact-grid {
        grid-template-columns:minmax(0, .75fr) minmax(0, 1.25fr);
        gap: 64px
    }
}

.c-details {
    display: grid;
    gap: 0;
    align-content: start;
    border-top: 2px solid var(--rule-strong)
}

.c-item {
    display: grid;
    gap: 6px;
    padding: 18px 0;
    border-bottom: 1px solid var(--rule)
}

.c-item .val {
    font: 700 1.6rem/1.1 var(--f-display);
    overflow-wrap: anywhere
}

.c-item a.val {
    text-decoration: none
}

.c-item a.val:hover {
    text-decoration: underline;
    text-decoration-color: var(--signal);
    text-decoration-thickness: 3px
}

.copy-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px
}

.copy-btn {
    font: 500 12px/1 var(--f-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    background: transparent;
    border: 2px solid var(--ink);
    color: var(--ink);
    padding: 7px 10px;
    cursor: pointer
}

.copy-btn:hover {
    background: var(--signal);
    color: var(--signal-ink);
    border-color: var(--signal)
}

.enquiry {
    border: 2px solid var(--rule-strong);
    background: var(--sheet)
}

.enquiry .ds-head {
    background: var(--ink)
}

form {
    display: grid;
    gap: 20px;
    padding: clamp(18px, 3vw, 30px)
}

.row2 {
    display: grid;
    gap: 20px
}

@media (min-width: 600px) {
    .row2 {
        grid-template-columns:repeat(2, minmax(0, 1fr))
    }
}

.field {
    display: grid;
    gap: 7px;
    min-width: 0
}

label {
    font: 500 12px/1.3 var(--f-mono);
    letter-spacing: .08em;
    text-transform: uppercase
}

label .opt {
    color: var(--muted)
}

input, select, textarea {
    font: 400 17px/1.4 var(--f-body);
    color: var(--ink);
    background: var(--bg);
    border: 2px solid var(--rule);
    padding: 12px 13px;
    width: 100%;
    min-width: 0;
    border-radius: 0
}

textarea {
    min-height: 150px;
    resize: vertical
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: 4px 4px 0 var(--signal)
}

.err {
    font-size: 15px;
    font-weight: 500;
    color: var(--error)
}

.form-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid var(--rule);
    padding-top: 18px
}

.form-foot small {
    color: var(--muted);
    font-size: 14px
}

.sent {
    display: grid;
    gap: 16px;
    padding: clamp(18px, 3vw, 30px)
}

.sent h2 {
    font: 700 1.8rem/1.05 var(--f-display);
    text-transform: uppercase
}

.sent pre {
    margin: 0;
    white-space: pre-wrap;
    font: 400 14px/1.6 var(--f-mono);
    background: var(--bg);
    border: 2px solid var(--rule);
    padding: 16px;
    overflow-x: auto;
    color: var(--ink)
}

/* CTA */
.cta {
    background: var(--signal);
    color: var(--signal-ink)
}

.cta-inner {
    display: grid;
    gap: 28px;
    padding-block: clamp(56px, 8vw, 96px);
    align-items: end
}

@media (min-width: 900px) {
    .cta-inner {
        grid-template-columns:minmax(0, 1fr) auto
    }
}

.cta .big {
    max-width: 16ch
}

.cta p {
    margin-top: 16px;
    max-width: 52ch;
    font-size: 1.2rem;
    font-weight: 500
}

.cta .btn {
    background: var(--signal-ink);
    color: var(--signal-deep);
    border-color: var(--signal-ink)
}

/* footer */
.site-foot {
    background: var(--graphite);
    color: var(--graphite-ink)
}

.foot-grid {
    display: grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap: 36px 24px;
    padding-block: 56px 40px
}

@media (min-width: 860px) {
    .foot-grid {
        grid-template-columns:minmax(0, 1.4fr) repeat(3, minmax(0, 1fr))
    }
}

.foot-brand {
    grid-column: 1/-1;
    display: grid;
    gap: 14px;
    align-content: start
}

@media (min-width: 860px) {
    .foot-brand {
        grid-column: auto
    }
}

.foot-brand p {
    color: var(--graphite-muted);
    max-width: 34ch;
    font-size: 16px
}

.foot-col {
    display: grid;
    gap: 10px;
    align-content: start;
    font-size: 16px
}

.foot-col h4 {
    margin: 0 0 4px;
    font: 500 12px/1.3 var(--f-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--graphite-muted)
}

.foot-col a {
    text-decoration: none;
    overflow-wrap: anywhere
}

.foot-col a:hover {
    color: var(--signal)
}

.foot-col span {
    overflow-wrap: anywhere
}

.foot-base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px 24px;
    padding-block: 18px 28px;
    border-top: 1px solid var(--graphite-rule);
    font: 400 12.5px/1.5 var(--f-mono);
    color: var(--graphite-muted)
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important
    }
}

/* base reset */
html {
    -webkit-text-size-adjust: 100%
}

img {
    max-width: 100%
}

[hidden] {
    display: none !important
}

/* form errors, notices, honeypot */
.field ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 15px;
    font-weight: 500;
    color: var(--error)
}

.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] {
    border-color: var(--error)
}

.notice {
    display: grid;
    gap: 8px;
    padding: clamp(18px, 3vw, 30px)
}

.notice h2 {
    font: 700 1.8rem/1.05 var(--f-display);
    text-transform: uppercase
}

.notice.error h2 {
    color: var(--error)
}

.hp {
    position: absolute !important;
    left: -10000px !important;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.skip {
    position: absolute;
    left: -10000px;
    top: 0
}

.skip:focus {
    left: 16px;
    top: 16px;
    z-index: 20;
    background: var(--ink);
    color: var(--bg);
    padding: 10px 14px
}