:root {
    --ground:#ded2bc;
    --surface:#d1c3aa;
    --surface-2:#c1b296;
    --line:#9e9074;
    --ink-soft:#564c39;
    --ink:#2b261c;
    --accent:#78350f;
    --accent-ink:#ffffff;

    --kimo-9b3:"DM Serif Display", 'DM Serif Display Fallback', Georgia, serif;
    --kimo-724:'Bitter', 'Bitter Fallback', Georgia, serif;
    --kimo-a40:'Space Mono', 'Space Mono Fallback', "Courier New", monospace;

    --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
    --dur-fast:140ms;
    --dur-base:220ms;
    --dur-slow:380ms;

    --band:clamp(3rem, 6vw, 6rem);
    --band-tight:clamp(2rem, 4vw, 3.5rem);
    --band-open:clamp(4rem, 8vw, 8rem);

    --rail-width:72px;
    --dock-height:64px;
    --container-max:1240px;
    --gutter:clamp(1.25rem, 3.5vw, 3rem);

    --step--1:clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
    --kimo-abc:clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);
    --kimo-d9f:clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem);
    --kimo-2ca:clamp(1.375rem, 1.25rem + 0.6vw, 1.75rem);
    --kimo-6c4:clamp(1.75rem, 1.55rem + 1vw, 2.375rem);
    --kimo-126:clamp(2.25rem, 1.9rem + 1.6vw, 3.25rem);
    --kimo-737:clamp(2.75rem, 2.2rem + 2.5vw, 4.5rem);

    font-feature-settings:"kern" 1, "tnum" 1;
}

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

html {
    font-size:100%;
    background-color:var(--ground);
    color:var(--ink);
    font-family:var(--kimo-724);
    line-height:1.55;
    -webkit-text-size-adjust:100%;
    tab-size:4;
    scroll-behavior:smooth;
    scroll-padding-top:2rem;
}

body {
    min-height:100vh;
    display:flex;
    flex-direction:column;
    background-color:var(--ground);
    color:var(--ink);
    overflow-x:hidden;
    padding-bottom:var(--dock-height);
}

@media (min-width: 1024px) {
    body {
        padding-bottom:0;

        padding-left:var(--rail-width);

    }
}

img,
picture,
svg,
video,
canvas {
    display:block;
    max-width:100%;
    height:auto;
}

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

button {
    cursor:pointer;
}

a {
    color:inherit;
    text-decoration-skip-ink:auto;
}

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

ul[role="list"],
ol[role="list"] {
    list-style:none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family:var(--kimo-9b3);
    font-weight:400;
    line-height:1.15;
    color:var(--ink);
    text-wrap:balance;
    letter-spacing:-0.015em;
}

h1 {
    font-size:var(--kimo-737);
    line-height:1.05;
}

h2 {
    font-size:var(--kimo-126);
    line-height:1.1;
}

h3 {
    font-size:var(--kimo-6c4);
    line-height:1.2;
}

h4 {
    font-size:var(--kimo-2ca);
}

p,
li,
dd {
    font-family:var(--kimo-724);
    font-size:var(--kimo-abc);
    line-height:1.6;
    max-width:65ch;
    color:var(--ink);
}

small {
    font-size:var(--step--1);
    color:var(--ink-soft);
}

strong,
b {
    font-weight:600;
}

hr {
    border:0;
    height:1px;
    background-color:var(--line);
    margin-block:2rem;
}

code,
kbd,
samp,
pre {
    font-family:var(--kimo-a40);
    font-size:0.9em;
}

.num,
.tabular,
[data-num] {
    font-family:var(--kimo-a40);
    font-variant-numeric:tabular-nums;
    letter-spacing:-0.02em;
}

.container {
    width:100%;
    max-width:var(--container-max);
    margin-inline:auto;
    padding-inline:var(--gutter);
}

.container-narrow {
    width:100%;
    max-width:860px;

    margin-inline:auto;
    padding-inline:var(--gutter);
}

.skip-link {
    position:fixed;
    top:1rem;
    left:1rem;
    z-index:10000;
    padding:0.75rem 1.25rem;
    background:var(--ink);
    color:var(--ground);
    font-family:var(--kimo-a40);
    font-size:var(--step--1);
    text-decoration:none;
    border:1px solid var(--line);
    transform:translateY(-150%);
    transition:transform var(--dur-base) var(--ease-out);
}

.skip-link:focus-visible {
    transform:translateY(0);
    outline:2px solid var(--accent);
    outline-offset:2px;
}

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

.icon {
    width:1.25em;
    height:1.25em;
    display:inline-block;
    vertical-align:-0.2em;
    fill:currentColor;
    flex-shrink:0;
}

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

.flow > * + * {
    margin-top:1.5rem;
}

.flow-tight > * + * {
    margin-top:0.75rem;
}

.flow-loose > * + * {
    margin-top:2.75rem;
}

.surface-band {
    background-color:var(--surface);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    padding-block:var(--band);
}

.surface-band > :first-child,
.ground-band > :first-child {
    margin-top:0;
}

.surface-band > :last-child,
.ground-band > :last-child {
    margin-bottom:0;
}

.ground-band {
    background-color:var(--ground);
    padding-block:var(--band);
}

.lead {
    font-size:var(--kimo-d9f);
    line-height:1.5;
    color:var(--ink);
    max-width:60ch;
}

.mono-meta {
    font-family:var(--kimo-a40);
    font-size:var(--step--1);
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--ink-soft);
}

.badge-tag {
    display:inline-flex;
    align-items:center;
    gap:0.4rem;
    padding:0.35rem 0.65rem;
    font-family:var(--kimo-a40);
    font-size:var(--step--1);
    line-height:1;
    background-color:var(--surface-2);
    color:var(--ink);
    border:1px solid var(--line);
}

.annotated-frame {
    position:relative;
    border:1px solid var(--line);
    background-color:var(--surface);
    padding:clamp(1rem, 2vw, 2rem);
}

.hairline-grid {
    display:grid;
    gap:1px;
    background-color:var(--line);
    border:1px solid var(--line);
}

.hairline-grid > * {
    background-color:var(--surface);
}

.text-soft {
    color:var(--ink-soft);
}

.rule-thick {
    height:2px;
    background-color:var(--ink);
    border:0;
}

/* Editorial typography helpers & typographic measures */
blockquote.editorial-quote {
    border-left:3px solid var(--accent);
    padding-left:1.5rem;
    margin-block:2rem;
    font-family:var(--kimo-9b3);
    font-size:var(--kimo-2ca);
    line-height:1.35;
    color:var(--ink);
}

blockquote.editorial-quote cite {
    display:block;
    margin-top:0.75rem;
    font-family:var(--kimo-a40);
    font-size:var(--step--1);
    font-style:normal;
    color:var(--ink-soft);
    letter-spacing:0.04em;
}

.exchange-speaker {
    font-family:var(--kimo-a40);
    font-size:var(--step--1);
    text-transform:uppercase;
    letter-spacing:0.1em;
    color:var(--ink-soft);
    margin-bottom:0.5rem;
    display:flex;
    align-items:center;
    gap:0.5rem;
}

.exchange-speaker::before {
    content:"";
    display:inline-block;
    width:0.5rem;
    height:0.5rem;
    background-color:var(--ink);
}

.exchange-speaker.electrician::before {
    background-color:var(--accent);
}

.prose {
    font-size:var(--kimo-abc);
    line-height:1.65;
    color:var(--ink);
}

.prose > * + * {
    margin-top:1.25rem;
}

.prose strong {
    color:var(--ink);
}

.prose h2,
.prose h3,
.prose h4 {
    margin-top:2rem;
    margin-bottom:0.75rem;
}

.prose ul,
.prose ol {
    padding-left:1.5rem;
    margin-block:1rem;
}

.prose li + li {
    margin-top:0.5rem;
}

.prose hr {
    margin-block:2.5rem;
}