/* =========================================================================
   Kendari Shipyard — The Harbour Ledger
   =========================================================================
   A docking desk is a records business: measurements, thickness grids, dock
   days, variation orders. The design language is drawn from that — a ledger
   of hairline rules, mono reference marks and numbered sections — kept
   quiet and generously spaced so it reads as considered rather than busy.

   Berry is the only chromatic accent and is rationed: section numbers, one
   accented phrase per headline, the active state. Everything else is ink on
   paper.

   Contents
     01  Tokens
     02  Reset & base
     03  Typography primitives
     04  Buttons & links
     05  Layout: shell, bands, reveal
     06  Header: utility, masthead, nav, drawer
     07  Hero, facts, breadcrumb
     08  Section: answer, prose
     09  Section: cards, nodes, support
     10  Section: table, ruler, badges
     11  Section: steps, tiers, stats
     12  Section: split, panel, checklist
     13  Section: related, methods, contact
     14  Section: FAQ (flat + grouped)
     15  Section: CTA, page note
     16  Journal, article, rich text, pager, search
     17  Footer
     18  Floating controls
     19  Motion & print
   ========================================================================= */


/* == 01  Tokens ========================================================== */

:root {
    /* Ground and ink */
    --ink:        #1a1620;
    --ink-soft:   #241e2b;
    --paper:      #f6f5f2;
    --paper-warm: #efede8;
    --white:      #ffffff;

    /* Accent and support */
    --berry:      #ae2454;
    --berry-deep: #8e1c44;
    --slate:      #5c5766;
    --micro:      #8e8a97;
    --wa:         #1f7a4d;
    --wa-deep:    #176139;

    /* Band-scoped: redefined per band in §05 so components stay generic */
    --bg:       var(--paper);
    --fg:       var(--ink);
    --fg-soft:  var(--slate);
    --fg-micro: var(--micro);
    --line:     rgba(26, 22, 32, 0.12);
    --line-firm: rgba(26, 22, 32, 0.22);
    --card-bg:  var(--white);
    --card-bg-2: rgba(26, 22, 32, 0.02);

    /* Type */
    --disp: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
    --body: "Source Sans 3", ui-sans-serif, system-ui, sans-serif;
    --mono: "Red Hat Mono", ui-monospace, "SFMono-Regular", monospace;

    /* Measure and rhythm */
    --shell:   76rem;   /* 1216px */
    --measure: 68ch;
    --gutter:  clamp(1.25rem, 4vw, 2.5rem);
    --band-y:  clamp(4.5rem, 9vw, 8.5rem);
    --band-y-tight: clamp(3rem, 6vw, 5.5rem);

    /* Motion */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --fast: 160ms;
    --slow: 420ms;
}

html {
    color-scheme: light;
}


/* == 02  Reset & base ==================================================== */

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

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--body);
    font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    line-height: 1.68;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(174, 36, 84, 0.14);
}

/* A faint paper tooth over the whole page: enough to warm the ground,
   not enough to read as texture. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

p {
    margin: 0 0 1em;
    text-wrap: pretty;
}

p:last-child {
    margin-bottom: 0;
}

ul,
ol,
dl,
dd {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

a {
    color: inherit;
    text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 0.18em;
}

button {
    font: inherit;
    color: inherit;
    cursor: pointer;
}

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

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

::selection {
    background: var(--berry);
    color: var(--paper);
}

.ks-skip {
    position: absolute;
    left: 50%;
    top: 0;
    z-index: 200;
    transform: translate(-50%, -140%);
    padding: 0.7rem 1.25rem;
    background: var(--ink);
    color: var(--paper);
    font-family: var(--mono);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-decoration: none;
    transition: transform var(--fast) var(--ease);
}

.ks-skip:focus-visible {
    transform: translate(-50%, 0);
}

.ks-main {
    display: block;
}


/* == 03  Typography primitives =========================================== */

.ks-h1,
.ks-h2,
.ks-h3 {
    margin: 0;
    font-family: var(--disp);
    font-weight: 600;
    letter-spacing: -0.022em;
    text-wrap: balance;
    color: var(--fg);
}

.ks-h1 {
    font-size: clamp(2.15rem, 1.3rem + 4.1vw, 4.1rem);
    line-height: 1.04;
    letter-spacing: -0.032em;
}

.ks-h1 em {
    font-style: normal;
    color: var(--berry);
}

.ks-band--ink .ks-h1 em,
.ks-band--ink .ks-h2 em {
    color: color-mix(in srgb, var(--berry) 68%, var(--paper));
}

.ks-h2 {
    font-size: clamp(1.6rem, 1.15rem + 1.9vw, 2.5rem);
    line-height: 1.12;
}

.ks-h3 {
    font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem);
    line-height: 1.26;
    font-weight: 600;
}

/* The mono reference label that opens every block. */
.ks-kicker {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 1.1rem;
    font-family: var(--mono);
    font-size: 0.715rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--fg-micro);
}

.ks-kicker__num {
    color: var(--berry);
    font-weight: 600;
}

.ks-kicker__num::after {
    content: "";
    display: inline-block;
    width: 1.6rem;
    height: 1px;
    margin-left: 0.7rem;
    vertical-align: 0.26em;
    background: currentColor;
    opacity: 0.5;
}

.ks-kicker--hero {
    margin-bottom: 1.4rem;
    color: var(--slate);
}

/* A kicker that links to its category: no underline at this size, the colour
   carries the hover. */
.ks-kicker a {
    text-decoration: none;
    transition: color var(--fast) var(--ease);
}

.ks-kicker a:hover {
    color: var(--berry);
}

.ks-kicker--invert {
    color: rgba(246, 245, 242, 0.6);
}

.ks-lede {
    max-width: var(--measure);
    margin: 1.1rem 0 0;
    font-size: clamp(1.03rem, 0.99rem + 0.22vw, 1.15rem);
    color: var(--fg-soft);
}

.ks-note {
    max-width: var(--measure);
    margin: clamp(1.75rem, 3vw, 2.5rem) 0 0;
    padding-left: 1.1rem;
    border-left: 2px solid color-mix(in srgb, var(--berry) 55%, transparent);
    font-size: 0.945rem;
    color: var(--fg-soft);
}

.ks-blockhead {
    max-width: 62rem;
    margin-bottom: clamp(2.25rem, 4.5vw, 3.75rem);
}


/* == 04  Buttons & links ================================================= */

.ks-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: 2.875rem;
    padding: 0.7rem 1.35rem;
    border: 1px solid transparent;
    border-radius: 2px;
    font-family: var(--disp);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    text-decoration: none;
    transition: background-color var(--fast) var(--ease),
                border-color var(--fast) var(--ease),
                color var(--fast) var(--ease),
                transform var(--fast) var(--ease);
}

.ks-btn i {
    font-size: 1.05em;
}

.ks-btn:hover {
    transform: translateY(-1px);
}

.ks-btn:active {
    transform: translateY(0);
}

.ks-btn--wa {
    background: var(--wa);
    color: var(--white);
}

.ks-btn--wa:hover {
    background: var(--wa-deep);
}

.ks-btn--ghost {
    border-color: var(--line-firm);
    color: var(--fg);
}

.ks-btn--ghost:hover {
    border-color: var(--berry);
    color: var(--berry);
}

.ks-btn--outline {
    border-color: rgba(246, 245, 242, 0.32);
    color: var(--paper);
}

.ks-btn--outline:hover {
    border-color: var(--paper);
    background: rgba(246, 245, 242, 0.07);
}

.ks-btn--sm {
    min-height: 2.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.ks-btn--block {
    width: 100%;
}

/* The quiet "keep reading" link used throughout. */
.ks-arrowlink {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 1.5rem;
    font-family: var(--disp);
    font-size: 0.93rem;
    font-weight: 600;
    color: var(--berry);
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--berry) 32%, transparent);
    padding-bottom: 2px;
    transition: border-color var(--fast) var(--ease);
}

.ks-arrowlink i {
    transition: transform var(--fast) var(--ease);
}

.ks-arrowlink:hover {
    border-color: var(--berry);
}

.ks-arrowlink:hover i {
    transform: translateX(0.25rem);
}

.ks-band--ink .ks-arrowlink {
    color: color-mix(in srgb, var(--berry) 62%, var(--paper));
}

.ks-arrowlink--quiet {
    margin-left: 1.5rem;
    color: var(--fg-soft);
    border-color: var(--line-firm);
}

.ks-arrowlink--inline {
    margin-top: 0;
    margin-left: 0.4rem;
}


/* == 05  Layout: shell, bands, reveal ==================================== */

.ks-shell {
    width: 100%;
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: max(var(--gutter), env(safe-area-inset-left));
}

.ks-band {
    padding-block: var(--band-y);
    background: var(--bg);
    color: var(--fg);
    border-top: 1px solid var(--line);
}

.ks-band--tight {
    padding-block: var(--band-y-tight);
}

.ks-band--paper {
    --bg: var(--paper);
    --fg: var(--ink);
    --fg-soft: var(--slate);
    --fg-micro: var(--micro);
    --line: rgba(26, 22, 32, 0.12);
    --line-firm: rgba(26, 22, 32, 0.22);
    --card-bg: var(--white);
    --card-bg-2: rgba(26, 22, 32, 0.025);
}

.ks-band--ink {
    --bg: var(--ink);
    --fg: var(--paper);
    --fg-soft: rgba(246, 245, 242, 0.68);
    --fg-micro: rgba(246, 245, 242, 0.48);
    --line: rgba(246, 245, 242, 0.14);
    --line-firm: rgba(246, 245, 242, 0.26);
    --card-bg: rgba(246, 245, 242, 0.035);
    --card-bg-2: rgba(246, 245, 242, 0.02);
    border-top-color: var(--ink);
}

/* One staggered reveal per block, driven by IntersectionObserver in app.js.
   Without JavaScript the content is simply visible. */
.ks-reveal > * {
    opacity: 1;
}

.js .ks-reveal.is-pending > * {
    opacity: 0;
    transform: translateY(14px);
}

.js .ks-reveal.is-in > * {
    opacity: 1;
    transform: none;
    transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease);
}

.js .ks-reveal.is-in > *:nth-child(2) { transition-delay: 60ms; }
.js .ks-reveal.is-in > *:nth-child(3) { transition-delay: 120ms; }
.js .ks-reveal.is-in > *:nth-child(4) { transition-delay: 180ms; }
.js .ks-reveal.is-in > *:nth-child(5) { transition-delay: 240ms; }
.js .ks-reveal.is-in > *:nth-child(6) { transition-delay: 300ms; }
.js .ks-reveal.is-in > *:nth-child(n + 7) { transition-delay: 340ms; }


/* == 06  Header: utility, masthead, nav, drawer ========================== */

.ks-utility {
    background: var(--ink);
    color: rgba(246, 245, 242, 0.76);
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
}

.ks-utility__inner {
    max-width: var(--shell);
    margin-inline: auto;
    padding: 0.5rem max(var(--gutter), env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

/* The coordinates stamp and the note share the left of the strip. The stamp
   used to sit in the masthead, where a two-level menu needs the room more —
   and the mono micro-type of this bar is where it belonged anyway. */
.ks-utility__lead {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.ks-utility__coords {
    flex-shrink: 0;
    letter-spacing: 0.1em;
    color: rgba(246, 245, 242, 0.92);
}

.ks-utility__note {
    margin: 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ks-utility__links {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-shrink: 0;
}

.ks-utility__links a,
.ks-utility__hours,
.ks-utility__langs {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
    color: inherit;
    transition: color var(--fast) var(--ease);
}

.ks-utility__links a:hover {
    color: var(--paper);
}

@media (max-width: 60rem) {
    .ks-utility__note,
    .ks-utility__hours,
    .ks-utility__langs {
        display: none;
    }

    /* The stamp stays: it is the one thing on this bar that is brand, not
       detail, and it costs almost nothing. */
    .ks-utility__lead {
        gap: 0;
    }

    .ks-utility__inner {
        justify-content: center;
    }
}

.ks-masthead {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--paper) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
}

.ks-masthead__inner {
    max-width: var(--shell);
    margin-inline: auto;
    padding: 0.85rem max(var(--gutter), env(safe-area-inset-left));
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 2.5rem);
    transition: padding var(--fast) var(--ease);
}

/* Scroll sentinel: app.js watches it leave the viewport and marks the
   masthead stuck, which tightens it to give the page back some height. */
.ks-stick {
    display: block;
    height: 1px;
    margin-bottom: -1px;
}

.ks-masthead.is-stuck {
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    box-shadow: 0 10px 28px -24px rgba(26, 22, 32, 0.6);
}

.ks-masthead.is-stuck .ks-masthead__inner {
    padding-block: 0.5rem;
}

.ks-masthead.is-stuck .ks-logo__img--header {
    height: 2.05rem;
}

.ks-logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
}

.ks-logo__img {
    width: auto;
    height: 2.5rem;
    object-fit: contain;
}

.ks-logo__img--header {
    transition: height var(--fast) var(--ease);
}

.ks-logo__img--footer {
    height: 3rem;
}

/* Footer and drawer logos sit on ink; invert a dark mark to white. */
.ks-logo--invert {
    filter: brightness(0) invert(1);
}

.ks-wordmark {
    display: inline-flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1;
}

.ks-wordmark__name {
    font-family: var(--disp);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.025em;
}

.ks-wordmark__name em {
    font-style: normal;
    color: var(--berry);
}

.ks-wordmark__suffix {
    font-family: var(--mono);
    font-size: 0.6rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--micro);
}

.ks-wordmark--footer .ks-wordmark__name {
    font-size: 1.45rem;
    color: var(--paper);
}

.ks-wordmark--footer .ks-wordmark__name em {
    color: color-mix(in srgb, var(--berry) 66%, var(--paper));
}

.ks-wordmark--footer .ks-wordmark__suffix {
    color: rgba(246, 245, 242, 0.5);
}

.ks-nav {
    flex: 1;
    min-width: 0;
}

.ks-masthead .ks-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(0.5rem, 1.2vw, 1.05rem);
}

/* Each item is the positioning context for its own dropdown. */
.ks-masthead .ks-nav__list > li {
    position: relative;
}

.ks-masthead .ks-nav__list > li > a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.15rem;
    font-family: var(--disp);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    color: var(--slate);
    border-bottom: 1px solid transparent;
    transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.ks-masthead .ks-nav__list > li > a:hover,
.ks-masthead .ks-nav__list > li > a[aria-current="page"],
.ks-masthead .ks-nav__list > li.is-ancestor > a,
.ks-masthead .ks-nav__list > li.current-menu-ancestor > a,
.ks-masthead .ks-nav__list > li.current-menu-parent > a,
.ks-masthead .ks-nav__list > li:focus-within > a {
    color: var(--ink);
    border-bottom-color: var(--berry);
}

.ks-masthead .ks-nav__chev {
    font-size: 0.8em;
    color: var(--micro);
    transition: transform var(--fast) var(--ease), color var(--fast) var(--ease);
}

.ks-masthead .ks-nav__list > li:hover > a .ks-nav__chev,
.ks-masthead .ks-nav__list > li.is-open > a .ks-nav__chev,
.ks-masthead .ks-nav__list > li:focus-within > a .ks-nav__chev {
    transform: rotate(180deg);
    color: var(--berry);
}

/* Dropdown panel.
   Held closed with visibility, never display:none — every service page stays
   in the markup of every page, which is where most of the site's internal
   linking comes from, and a crawler reads it without hovering. */
.ks-masthead .ks-nav__list > li > .sub-menu {
    position: absolute;
    top: 100%;
    left: -0.9rem;
    z-index: 70;
    margin-top: 0.9rem;
    display: grid;
    gap: 0.1rem;
    min-width: 17.5rem;
    max-width: min(92vw, 34rem);
    padding: 0.55rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 2px solid var(--berry);
    box-shadow: 0 24px 48px -30px rgba(26, 22, 32, 0.55);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.35rem);
    transition: opacity var(--fast) var(--ease),
                transform var(--fast) var(--ease),
                visibility var(--fast) var(--ease);
}

/* Bridges the gap between the item and its panel, so the pointer never
   leaves the item on the way down. */
.ks-masthead .ks-nav__list > li > .sub-menu::before {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: -0.9rem;
    height: 0.9rem;
}

.ks-masthead .ks-nav__list > li:hover > .sub-menu,
.ks-masthead .ks-nav__list > li:focus-within > .sub-menu,
.ks-masthead .ks-nav__list > li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

/* Added by app.js to any panel long enough to need two columns. */
.ks-masthead .ks-nav__list > li > .sub-menu.ks-nav__sub--cols {
    grid-template-columns: repeat(2, minmax(14rem, 1fr));
}

.ks-masthead .ks-nav__list .sub-menu a {
    display: block;
    padding: 0.5rem 0.65rem;
    text-decoration: none;
    color: var(--ink);
    border-left: 2px solid transparent;
    transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.ks-masthead .ks-nav__list .sub-menu a:hover,
.ks-masthead .ks-nav__list .sub-menu a:focus-visible,
.ks-masthead .ks-nav__list .sub-menu a[aria-current="page"] {
    background: var(--paper-warm);
    border-left-color: var(--berry);
}

.ks-masthead .ks-nav__sublabel {
    display: block;
    font-family: var(--disp);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.35;
}

.ks-masthead .ks-nav__subdesc {
    display: block;
    margin-top: 0.12rem;
    font-size: 0.775rem;
    line-height: 1.45;
    color: var(--micro);
}

/* A pointer that can't hover — a tablet in landscape, above the drawer
   breakpoint — gets a real toggle instead, injected by app.js. */
.ks-masthead .ks-nav__caret {
    display: none;
}

@media (hover: none) {
    .ks-masthead .ks-nav__chev {
        display: none;
    }

    .ks-masthead .ks-nav__caret {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.75rem;
        height: 1.75rem;
        margin-left: -0.2rem;
        padding: 0;
        background: none;
        border: 0;
        color: var(--micro);
        font-size: 0.9rem;
    }

    .ks-masthead .ks-nav__list > li.is-open > .ks-nav__caret {
        color: var(--berry);
        transform: rotate(180deg);
    }
}

.ks-masthead__actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
    flex-shrink: 0;
}

.ks-burger {
    display: none;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    background: none;
    border: 1px solid var(--line-firm);
    border-radius: 2px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: border-color var(--fast) var(--ease);
}

.ks-burger:hover {
    border-color: var(--berry);
}

.ks-burger__bar {
    width: 1.1rem;
    height: 1.5px;
    background: var(--ink);
    transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}

.ks-burger[aria-expanded="true"] .ks-burger__bar:first-child {
    transform: translateY(3.25px) rotate(45deg);
}

.ks-burger[aria-expanded="true"] .ks-burger__bar:last-child {
    transform: translateY(-3.25px) rotate(-45deg);
}

/* The shell caps the masthead at 76rem, and a six-branch menu, the logo and
   a labelled button spend 1048 of the 1136px that leaves. Below 80rem the
   button's words are the first thing to go, and it carries on as its icon. */
@media (max-width: 80rem) {
    .ks-masthead__actions .ks-btn span {
        display: none;
    }

    .ks-masthead__actions .ks-btn {
        padding-inline: 0.8rem;
    }
}

/* Below this the menu no longer fits one line at a readable size, so it
   moves wholesale into the drawer. Kept in step with the media query in
   app.js that closes the drawer again on the way back up. */
@media (max-width: 72rem) {
    .ks-nav {
        display: none;
    }

    .ks-burger {
        display: inline-flex;
    }
}

/* Drawer */
.ks-drawer {
    position: fixed;
    inset: 0;
    z-index: 120;
}

.ks-drawer[hidden] {
    display: none;
}

.ks-drawer__scrim {
    position: absolute;
    inset: 0;
    background: rgba(26, 22, 32, 0.55);
    opacity: 0;
    transition: opacity var(--fast) var(--ease);
}

.ks-drawer.is-open .ks-drawer__scrim {
    opacity: 1;
}

.ks-drawer__panel {
    position: absolute;
    inset-block: 0;
    right: 0;
    width: min(26rem, 100%);
    display: flex;
    flex-direction: column;
    background: var(--ink);
    color: var(--paper);
    padding: 1.25rem max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom));
    transform: translateX(100%);
    transition: transform var(--slow) var(--ease);
    overscroll-behavior: contain;
}

.ks-drawer.is-open .ks-drawer__panel {
    transform: none;
}

.ks-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(246, 245, 242, 0.14);
}

.ks-drawer__close {
    width: 2.75rem;
    height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid rgba(246, 245, 242, 0.24);
    border-radius: 2px;
    color: var(--paper);
    font-size: 1.1rem;
    transition: border-color var(--fast) var(--ease);
}

.ks-drawer__close:hover {
    border-color: var(--paper);
}

.ks-drawer__nav {
    flex: 1;
    overflow-y: auto;
    padding-block: 0.5rem;
    overscroll-behavior: contain;
}

.ks-drawer__nav ul,
.ks-drawer__nav .ks-nav__list {
    display: block;
}

.ks-drawer__nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(246, 245, 242, 0.09);
    font-family: var(--disp);
    font-size: 1.02rem;
    font-weight: 500;
    color: rgba(246, 245, 242, 0.84);
    text-decoration: none;
    transition: color var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.ks-drawer__nav a i {
    opacity: 0;
    color: var(--berry);
    transition: opacity var(--fast) var(--ease);
}

.ks-drawer__nav a:hover,
.ks-drawer__nav a[aria-current="page"] {
    color: var(--paper);
    transform: translateX(0.35rem);
}

.ks-drawer__nav a:hover i,
.ks-drawer__nav a[aria-current="page"] i {
    opacity: 1;
}

/* A branch of the menu folds out in place. <details> does the work, so the
   accordion is open to a crawler and usable before app.js runs. */
.ks-drawer__nav summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(246, 245, 242, 0.09);
    font-family: var(--disp);
    font-size: 1.02rem;
    font-weight: 500;
    color: rgba(246, 245, 242, 0.84);
    cursor: pointer;
    list-style: none;
    transition: color var(--fast) var(--ease);
}

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

.ks-drawer__nav summary i {
    color: var(--berry);
    transition: transform var(--fast) var(--ease);
}

.ks-drawer__nav details[open] > summary {
    color: var(--paper);
    border-bottom-color: rgba(246, 245, 242, 0.2);
}

.ks-drawer__nav details[open] > summary i {
    transform: rotate(180deg);
}

/* Child lists: the wording-driven tree, and the sub-menu of a WordPress
   menu, which is a hover panel on desktop and a plain indented list here. */
.ks-drawer__sub,
.ks-drawer__nav .sub-menu {
    margin: 0 0 0.5rem;
    padding: 0 0 0 0.9rem;
    border-left: 1px solid rgba(246, 245, 242, 0.14);
}

.ks-drawer__sub a,
.ks-drawer__nav .sub-menu a,
.ks-drawer__extra a {
    padding: 0.7rem 0;
    font-size: 0.94rem;
    font-weight: 400;
    color: rgba(246, 245, 242, 0.7);
    border-left: 0;
    border-bottom: 1px solid rgba(246, 245, 242, 0.06);
    background: none;
}

.ks-drawer__nav .ks-nav__chev,
.ks-drawer__nav .ks-nav__caret,
.ks-drawer__nav .ks-nav__subdesc {
    display: none;
}

/* A WordPress menu branch in the drawer: the parent link keeps the row, the
   toggle app.js adds sits beside it, and the child list folds under both.
   Closed by default so the drawer opens as a short list of branches rather
   than one long scroll of every page on the site. */
.ks-drawer__nav .menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
}

.ks-drawer__nav .menu-item-has-children > a {
    flex: 1;
    min-width: 0;
}

.ks-drawer__nav .menu-item-has-children > .sub-menu {
    flex-basis: 100%;
}

.ks-drawer__nav .is-collapsed > .sub-menu {
    display: none;
}

.ks-drawer__toggle {
    width: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
    background: none;
    border: 0;
    /* Same hairline as the link beside it, so the row reads as one rule. */
    border-bottom: 1px solid rgba(246, 245, 242, 0.09);
    color: var(--berry);
    font-size: 1rem;
    cursor: pointer;
}

.ks-drawer__toggle i {
    transition: transform var(--fast) var(--ease);
}

.ks-drawer__toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.ks-drawer__subhead {
    margin: 1.6rem 0 0.2rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(246, 245, 242, 0.45);
}

.ks-drawer__foot {
    padding-top: 1.25rem;
    border-top: 1px solid rgba(246, 245, 242, 0.14);
}

.ks-drawer__meta {
    margin: 0.9rem 0 0;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    color: rgba(246, 245, 242, 0.56);
    overflow-wrap: anywhere;
}

body.ks-locked {
    overflow: hidden;
}


/* == 07  Hero, facts, breadcrumb ========================================= */

.ks-crumb {
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.ks-crumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--mono);
    font-size: 0.715rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--micro);
}

.ks-crumb a {
    color: inherit;
    text-decoration: none;
    transition: color var(--fast) var(--ease);
}

.ks-crumb a:hover {
    color: var(--berry);
}

.ks-crumb [aria-current="page"] {
    color: var(--slate);
}

.ks-hero {
    position: relative;
    padding-block: clamp(3.25rem, 7vw, 6.5rem) clamp(3rem, 6vw, 5.5rem);
    background: var(--paper);
    --fg: var(--ink);
    --fg-soft: var(--slate);
    --fg-micro: var(--micro);
    --line: rgba(26, 22, 32, 0.12);
    --line-firm: rgba(26, 22, 32, 0.22);
    overflow: hidden;
}

/* A single hairline grid behind the hero: the ledger, stated once. */
.ks-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(26, 22, 32, 0.045) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(26, 22, 32, 0.045) 1px, transparent 1px);
    background-size: 5.5rem 5.5rem;
    mask-image: linear-gradient(to bottom, #000, transparent 72%);
}

.ks-hero > .ks-shell {
    position: relative;
}

.ks-hero--compact {
    padding-block: clamp(2.5rem, 5vw, 4.25rem) clamp(2rem, 4vw, 3rem);
}

.ks-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: clamp(1.5rem, 4vw, 4rem);
}

.ks-hero__body {
    max-width: 48rem;
}

.ks-hero__lede {
    max-width: var(--measure);
    margin: clamp(1.25rem, 2.5vw, 1.9rem) 0 0;
    font-size: clamp(1.06rem, 1rem + 0.38vw, 1.26rem);
    line-height: 1.62;
    color: var(--slate);
}

.ks-hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.ks-hero .ks-note {
    margin-top: 1.5rem;
}

/* The mono stamp in the hero corner — coordinates, facility, revision date. */
.ks-hero__stamp {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    max-width: 15rem;
    padding-top: 0.4rem;
}

.ks-hero__stamp-rule {
    display: block;
    width: 1px;
    align-self: stretch;
    min-height: 3.5rem;
    background: var(--berry);
    opacity: 0.55;
}

.ks-hero__stamp p {
    margin: 0;
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.55;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--micro);
}

@media (max-width: 60rem) {
    .ks-hero__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .ks-hero__stamp {
        max-width: none;
        padding-top: 0;
    }

    .ks-hero__stamp-rule {
        min-height: 2.5rem;
    }
}

.ks-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    margin-top: clamp(2.75rem, 5vw, 4.5rem);
    border-top: 1px solid var(--line);
}

.ks-facts__item {
    padding: 1.4rem 1.25rem 0 0;
    border-right: 1px solid var(--line);
}

.ks-facts__item:last-child {
    border-right: 0;
}

.ks-facts__value {
    margin: 0;
    font-family: var(--disp);
    font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--ink);
}

.ks-facts__label {
    margin: 0.35rem 0 0;
    font-family: var(--mono);
    font-size: 0.705rem;
    line-height: 1.45;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--micro);
}

@media (max-width: 44rem) {
    .ks-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ks-facts__item:nth-child(2n) {
        border-right: 0;
    }

    .ks-facts__item:nth-child(n + 3) {
        border-top: 1px solid var(--line);
        padding-top: 1.1rem;
    }
}


/* == 08  Section: answer, prose =========================================== */

.ks-answer {
    max-width: 58rem;
    padding: clamp(1.75rem, 3.5vw, 2.75rem) clamp(1.5rem, 3vw, 2.75rem);
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-left: 2px solid var(--berry);
}

.ks-answer__text {
    margin: 0;
    font-family: var(--disp);
    font-size: clamp(1.15rem, 1.02rem + 0.6vw, 1.55rem);
    font-weight: 500;
    line-height: 1.42;
    letter-spacing: -0.014em;
    text-wrap: pretty;
    color: var(--fg);
}

.ks-answer__points {
    display: grid;
    gap: 0.6rem;
    margin-top: 1.6rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.ks-answer__points li {
    display: flex;
    gap: 0.6rem;
    font-size: 0.96rem;
    color: var(--fg-soft);
}

.ks-answer__points i {
    margin-top: 0.42em;
    font-size: 0.5rem;
    color: var(--berry);
    flex-shrink: 0;
}

.ks-answer .ks-note {
    margin-top: 1.5rem;
    border-left-color: var(--line-firm);
}

.ks-prose {
    display: grid;
    gap: clamp(1.75rem, 3.5vw, 2.75rem);
    max-width: 62rem;
}

.ks-prose__block {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: clamp(1rem, 3vw, 3rem);
    padding-top: clamp(1.5rem, 3vw, 2.25rem);
    border-top: 1px solid var(--line);
}

.ks-prose__block:first-child {
    padding-top: 0;
    border-top: 0;
}

/* No sub-heading means no left rail: the paragraph runs the full width on the
   reading measure, aligned with the section heading above it. */
.ks-prose__block--plain {
    grid-template-columns: minmax(0, 1fr);
}

.ks-prose__block .ks-h3 {
    position: sticky;
    top: 6rem;
    align-self: start;
}

.ks-prose__block p {
    max-width: var(--measure);
    color: var(--fg-soft);
}

@media (max-width: 54rem) {
    .ks-prose__block {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
    }

    .ks-prose__block .ks-h3 {
        position: static;
    }
}


/* == 09  Section: cards, nodes, support =================================== */

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

.ks-cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ks-cards--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ks-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    height: 100%;
    padding: clamp(1.4rem, 2.6vw, 2.1rem);
    background: var(--bg);
    text-decoration: none;
    transition: background-color var(--fast) var(--ease);
}

.ks-card--link:hover {
    background: var(--card-bg-2);
}

/* The berry hairline that slides in along the card's top edge on hover. */
.ks-card--link::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 2px;
    background: var(--berry);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--slow) var(--ease);
}

.ks-card--link:hover::after,
.ks-card--link:focus-visible::after {
    transform: scaleX(1);
}

.ks-card__index {
    font-family: var(--mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--berry);
}

.ks-card__icon {
    display: inline-flex;
    font-size: 1.4rem;
    color: var(--fg-soft);
    margin-top: 0.1rem;
}

.ks-card__title {
    margin: 0;
    font-family: var(--disp);
    font-size: 1.065rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.014em;
    text-wrap: balance;
    color: var(--fg);
}

.ks-card__text {
    margin: 0;
    font-size: 0.945rem;
    color: var(--fg-soft);
}

.ks-card__more {
    margin-top: auto;
    padding-top: 0.9rem;
    color: var(--berry);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.ks-card--link:hover .ks-card__more,
.ks-card--link:focus-visible .ks-card__more {
    opacity: 1;
    transform: none;
}

@media (max-width: 62rem) {
    .ks-cards--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .ks-cards--2,
    .ks-cards--3 {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Facility nodes */
.ks-nodes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
    gap: clamp(1rem, 2.5vw, 1.75rem);
}

.ks-node {
    display: flex;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.4rem);
    background: var(--card-bg);
    border: 1px solid var(--line);
}

.ks-node__tag {
    display: inline-block;
    align-self: flex-start;
    margin: 0 0 1.1rem;
    padding: 0.3rem 0.65rem;
    border: 1px solid color-mix(in srgb, var(--berry) 45%, transparent);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--berry);
}

.ks-band--ink .ks-node__tag {
    color: color-mix(in srgb, var(--berry) 64%, var(--paper));
}

.ks-node__title {
    margin: 0;
    font-family: var(--disp);
    font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--fg);
}

.ks-node__text {
    margin: 0.8rem 0 0;
    color: var(--fg-soft);
}

.ks-specs {
    margin-top: auto;
    padding-top: 1.5rem;
}

.ks-specs dt {
    margin-top: 1.1rem;
    font-family: var(--mono);
    font-size: 0.675rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--fg-micro);
}

.ks-specs dt:first-child {
    margin-top: 0;
    padding-top: 0;
}

.ks-specs dd {
    margin: 0.3rem 0 0;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.945rem;
    color: var(--fg);
}

.ks-specs dd:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

/* The honest-limits note that follows the nodes. */
.ks-limits {
    max-width: 62rem;
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    background: var(--card-bg-2);
    border: 1px dashed var(--line-firm);
}

.ks-limits__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--berry);
}

.ks-limits p:not(.ks-limits__label) {
    margin: 0;
    font-size: 0.96rem;
    color: var(--fg-soft);
}

.ks-limits .ks-arrowlink {
    margin-top: 1.1rem;
}

/* Support list */
.ks-support {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr));
    gap: 1px;
    background: var(--line);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.ks-support__item {
    display: flex;
    gap: 1rem;
    padding: clamp(1.4rem, 2.5vw, 2rem) clamp(1.25rem, 2vw, 1.75rem);
    background: var(--bg);
}

.ks-support__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    flex-shrink: 0;
    border: 1px solid var(--line-firm);
    border-radius: 50%;
    font-size: 1.05rem;
    color: var(--berry);
}

.ks-support__title {
    margin: 0 0 0.4rem;
    font-family: var(--disp);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--fg);
}

.ks-support__item p {
    margin: 0;
    font-size: 0.94rem;
    color: var(--fg-soft);
}


/* == 10  Section: table, ruler, badges =================================== */

.ks-tablewrap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid var(--line);
    background: var(--card-bg);
}

.ks-tablewrap:focus-visible {
    outline-offset: 0;
}

.ks-table {
    min-width: 44rem;
    font-size: 0.93rem;
}

.ks-table__caption {
    padding: 0.9rem 1.1rem;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-align: left;
    color: var(--fg-micro);
}

.ks-table thead th {
    padding: 0.95rem 1.1rem;
    border-bottom: 1px solid var(--line-firm);
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
    white-space: nowrap;
    color: var(--fg-micro);
}

.ks-table tbody th,
.ks-table tbody td {
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
    font-variant-numeric: tabular-nums;
    color: var(--fg-soft);
}

.ks-table tbody th {
    font-family: var(--disp);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fg);
}

.ks-table tbody th a {
    text-decoration: none;
    border-bottom: 1px solid color-mix(in srgb, var(--berry) 40%, transparent);
    transition: color var(--fast) var(--ease), border-color var(--fast) var(--ease);
}

.ks-table tbody th a:hover {
    color: var(--berry);
    border-bottom-color: var(--berry);
}

.ks-table tbody tr:last-child th,
.ks-table tbody tr:last-child td {
    border-bottom: 0;
}

.ks-table tbody tr {
    transition: background-color var(--fast) var(--ease);
}

.ks-table tbody tr:hover {
    background: var(--card-bg-2);
}

.ks-table--compare .is-accent {
    background: color-mix(in srgb, var(--berry) 5%, transparent);
    color: var(--fg);
}

.ks-table--compare thead .is-accent {
    color: var(--berry);
}

.ks-badge {
    display: inline-block;
    padding: 0.22rem 0.55rem;
    border: 1px solid color-mix(in srgb, var(--berry) 42%, transparent);
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--berry);
}

.ks-band--ink .ks-badge {
    color: color-mix(in srgb, var(--berry) 66%, var(--paper));
}

.ks-badge--soft {
    border-color: var(--line-firm);
    color: var(--fg-micro);
}

/* The tide ruler under the home-page route board. */
.ks-ruler {
    display: flex;
    justify-content: space-between;
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.1em;
    color: var(--fg-micro);
}

.ks-ruler__mark {
    position: relative;
    padding-top: 0.5rem;
}

.ks-ruler__mark::before {
    content: "";
    position: absolute;
    top: -0.75rem;
    left: 50%;
    width: 1px;
    height: 0.5rem;
    background: var(--line-firm);
}


/* == 11  Section: steps, tiers, stats ==================================== */

.ks-steps {
    display: grid;
    max-width: 62rem;
    counter-reset: step;
}

.ks-step {
    position: relative;
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    gap: clamp(1rem, 2.5vw, 2rem);
    padding: clamp(1.4rem, 2.6vw, 2.1rem) 0;
    border-top: 1px solid var(--line);
}

.ks-step:last-child {
    border-bottom: 1px solid var(--line);
}

/* Hairline spine running down the number column. */
.ks-step::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 2.25rem;
    width: 1px;
    background: var(--line);
}

.ks-step__num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--bg);
    border: 1px solid var(--line-firm);
    border-radius: 50%;
    font-family: var(--mono);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--berry);
}

.ks-step__title {
    margin: 0;
    font-family: var(--disp);
    font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
    font-weight: 600;
    letter-spacing: -0.016em;
    text-wrap: balance;
    color: var(--fg);
}

.ks-step__window {
    margin: 0.4rem 0 0;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--fg-micro);
}

.ks-step__text {
    max-width: var(--measure);
    margin: 0.75rem 0 0;
    color: var(--fg-soft);
}

@media (max-width: 40rem) {
    .ks-step {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.9rem;
    }

    .ks-step::before {
        display: none;
    }
}

/* Price bands */
.ks-tiers {
    border-top: 1px solid var(--line);
}

.ks-tier {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1.4fr);
    align-items: start;
    gap: clamp(1rem, 2.5vw, 2rem);
    padding: clamp(1.4rem, 2.5vw, 1.9rem) 0;
    border-bottom: 1px solid var(--line);
    transition: background-color var(--fast) var(--ease);
}

.ks-tier:hover {
    background: var(--card-bg-2);
}

.ks-tier__name {
    margin: 0;
    font-family: var(--disp);
    font-size: 1.065rem;
    font-weight: 600;
    letter-spacing: -0.014em;
    text-wrap: balance;
    color: var(--fg);
}

.ks-tier__code {
    margin: 0.3rem 0 0;
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    color: var(--fg-micro);
}

.ks-tier__figure {
    margin: 0;
    font-family: var(--disp);
    font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--berry);
}

.ks-band--ink .ks-tier__figure {
    color: color-mix(in srgb, var(--berry) 66%, var(--paper));
}

.ks-tier__unit {
    margin: 0.3rem 0 0;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-micro);
}

.ks-tier__body p {
    margin: 0;
    font-size: 0.945rem;
    color: var(--fg-soft);
}

.ks-tier .ks-badge {
    position: absolute;
    top: clamp(1.4rem, 2.5vw, 1.9rem);
    right: 0;
}

@media (max-width: 54rem) {
    .ks-tier {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem 1.25rem;
    }

    .ks-tier__body {
        grid-column: 1 / -1;
    }

    .ks-tier .ks-badge {
        position: static;
        justify-self: start;
        grid-column: 1 / -1;
    }
}

/* Figures */
.ks-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.ks-stat {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--bg);
}

.ks-stat__value {
    margin: 0;
    font-family: var(--disp);
    font-size: clamp(2rem, 1.6rem + 1.6vw, 3rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.035em;
    font-variant-numeric: tabular-nums;
    color: var(--fg);
}

.ks-stat__unit {
    font-size: 0.42em;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--berry);
}

.ks-stat__label {
    margin: 0.75rem 0 0;
    font-family: var(--mono);
    font-size: 0.695rem;
    line-height: 1.5;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-micro);
}


/* == 12  Section: split, panel, checklist ================================ */

.ks-split {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.75rem, 4vw, 4rem);
}

.ks-split__body > p {
    max-width: var(--measure);
    color: var(--fg-soft);
}

.ks-split__body > p:first-child {
    font-size: clamp(1.03rem, 0.99rem + 0.22vw, 1.12rem);
    color: var(--fg);
}

@media (max-width: 58rem) {
    .ks-split {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ks-panel {
    padding: clamp(1.5rem, 3vw, 2.25rem);
    background: var(--card-bg);
    border: 1px solid var(--line);
    border-top: 2px solid var(--berry);
}

.ks-panel__figure {
    margin: calc(-1 * clamp(1.5rem, 3vw, 2.25rem)) calc(-1 * clamp(1.5rem, 3vw, 2.25rem)) clamp(1.25rem, 2.5vw, 1.75rem);
}

.ks-panel__figure img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.ks-panel__title {
    margin: 0 0 1.25rem;
    font-family: var(--disp);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    text-wrap: balance;
    color: var(--fg);
}

.ks-checklist {
    display: grid;
    gap: 0.85rem;
}

.ks-checklist li {
    display: flex;
    gap: 0.7rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--line);
    font-size: 0.93rem;
    color: var(--fg-soft);
}

.ks-checklist li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.ks-checklist i {
    margin-top: 0.22em;
    font-size: 0.85rem;
    color: var(--berry);
    flex-shrink: 0;
}


/* == 13  Section: related, methods, contact ============================== */

.ks-related {
    border-top: 1px solid var(--line);
}

.ks-related li {
    border-bottom: 1px solid var(--line);
}

.ks-related a {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem;
    align-items: center;
    gap: 1rem;
    padding: 1.1rem 0;
    text-decoration: none;
    transition: transform var(--fast) var(--ease);
}

.ks-related a:hover {
    transform: translateX(0.4rem);
}

.ks-related__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    color: var(--fg-micro);
    transition: color var(--fast) var(--ease);
}

.ks-related a:hover .ks-related__icon {
    color: var(--berry);
}

.ks-related__body {
    display: grid;
    gap: 0.18rem;
    min-width: 0;
}

.ks-related__body strong {
    font-family: var(--disp);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--fg);
}

.ks-related__body span {
    font-size: 0.9rem;
    color: var(--fg-soft);
}

.ks-related__arrow {
    color: var(--berry);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.ks-related a:hover .ks-related__arrow,
.ks-related a:focus-visible .ks-related__arrow {
    opacity: 1;
    transform: none;
}

@media (max-width: 40rem) {
    .ks-related__body span {
        display: none;
    }
}

/* Contact methods */
.ks-methods {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 1px;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    background: var(--line);
    border: 1px solid var(--line);
}

.ks-method {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: clamp(1.4rem, 2.5vw, 1.9rem);
    background: var(--bg);
}

.ks-method__icon {
    font-size: 1.35rem;
    color: var(--berry);
}

.ks-method__title {
    margin: 0;
    font-family: var(--disp);
    font-size: 1.02rem;
    font-weight: 600;
    letter-spacing: -0.012em;
    color: var(--fg);
}

.ks-method__text {
    margin: 0;
    font-size: 0.92rem;
    color: var(--fg-soft);
}

.ks-method .ks-arrowlink {
    margin-top: auto;
    padding-top: 0.9rem;
    align-self: flex-start;
}

.ks-contact {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.75rem, 4vw, 3.5rem);
}

@media (max-width: 58rem) {
    .ks-contact {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ks-contact__listintro {
    max-width: var(--measure);
    margin: 0.9rem 0 1.75rem;
    color: var(--fg-soft);
}

.ks-datalist {
    border-top: 1px solid var(--line);
}

.ks-datalist__row {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: 0.4rem clamp(1rem, 2.5vw, 2rem);
    padding: 1.05rem 0;
    border-bottom: 1px solid var(--line);
}

.ks-datalist dt {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-family: var(--disp);
    font-size: 0.97rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--fg);
}

.ks-datalist__num {
    font-family: var(--mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--berry);
}

.ks-datalist dd {
    font-size: 0.93rem;
    color: var(--fg-soft);
}

@media (max-width: 44rem) {
    .ks-datalist__row {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ks-panel--contact .ks-btn {
    margin-top: 1.5rem;
}

.ks-hours {
    border-top: 1px solid var(--line);
}

.ks-hours > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--line);
}

.ks-hours dt {
    font-size: 0.93rem;
    color: var(--fg-soft);
}

.ks-hours dd {
    font-family: var(--mono);
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
    color: var(--fg);
}

.ks-panel__address {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.ks-panel__addresslabel {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.5rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--fg-micro);
}

.ks-panel__address p:not(.ks-panel__addresslabel) {
    margin: 0;
    font-size: 0.93rem;
    color: var(--fg-soft);
}

.ks-panel__address .ks-arrowlink {
    margin-top: 0.9rem;
}


/* == 14  Section: FAQ (flat + grouped) =================================== */

.ks-faq {
    border-top: 1px solid var(--line);
    max-width: 62rem;
}

.ks-faq__item {
    border-bottom: 1px solid var(--line);
}

.ks-faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.25rem;
    padding: 1.15rem 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--disp);
    font-size: clamp(1rem, 0.97rem + 0.18vw, 1.08rem);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.012em;
    text-wrap: pretty;
    color: var(--fg);
    transition: color var(--fast) var(--ease);
}

.ks-faq__q::-webkit-details-marker {
    display: none;
}

.ks-faq__q:hover {
    color: var(--berry);
}

/* A drawn plus that becomes a minus, rather than an icon font glyph. */
.ks-faq__sign {
    position: relative;
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    margin-top: 0.25rem;
}

.ks-faq__sign::before,
.ks-faq__sign::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    background: var(--berry);
    transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease);
}

.ks-faq__sign::before {
    width: 100%;
    height: 1.5px;
}

.ks-faq__sign::after {
    width: 1.5px;
    height: 100%;
}

.ks-faq__item[open] .ks-faq__sign::after {
    transform: rotate(90deg);
    opacity: 0;
}

.ks-faq__a {
    padding: 0 2.25rem 1.3rem 0;
    max-width: var(--measure);
}

.ks-faq__a p {
    margin: 0;
    color: var(--fg-soft);
}

/* Grouped FAQ hub */
.ks-faqg {
    display: grid;
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    align-items: start;
    gap: clamp(1.75rem, 4vw, 3.5rem);
}

.ks-faqg__nav {
    position: sticky;
    top: 6rem;
    padding: 1.25rem;
    background: var(--card-bg);
    border: 1px solid var(--line);
}

.ks-faqg__navhead {
    margin: 0 0 1rem;
    padding-bottom: 0.9rem;
    border-bottom: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--fg-micro);
}

.ks-faqg__navlink {
    display: grid;
    grid-template-columns: 1.4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem;
    padding: 0.62rem 0;
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: 0.6rem;
    margin-left: -0.6rem;
    transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.ks-faqg__navicon {
    display: inline-flex;
    font-size: 1rem;
    color: var(--fg-micro);
    transition: color var(--fast) var(--ease);
}

.ks-faqg__navlabel {
    font-family: var(--disp);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.3;
    color: var(--fg-soft);
    transition: color var(--fast) var(--ease);
}

.ks-faqg__navcount {
    font-family: var(--mono);
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    color: var(--fg-micro);
}

.ks-faqg__navlink:hover,
.ks-faqg__navlink.is-active {
    border-left-color: var(--berry);
}

.ks-faqg__navlink:hover .ks-faqg__navlabel,
.ks-faqg__navlink.is-active .ks-faqg__navlabel {
    color: var(--fg);
}

.ks-faqg__navlink:hover .ks-faqg__navicon,
.ks-faqg__navlink.is-active .ks-faqg__navicon {
    color: var(--berry);
}

.ks-faqg__body {
    display: grid;
    gap: clamp(2.5rem, 5vw, 4rem);
    min-width: 0;
}

.ks-faqg__group {
    scroll-margin-top: 7rem;
}

.ks-faqg__grouphead {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 0.9rem;
    margin-bottom: 0.75rem;
}

.ks-faqg__groupnum {
    font-family: var(--mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    padding-top: 0.42rem;
    color: var(--berry);
}

.ks-faqg__grouptitle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0;
    font-family: var(--disp);
    font-size: clamp(1.18rem, 1.08rem + 0.45vw, 1.4rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--fg);
}

.ks-faqg__grouptitle i {
    font-size: 1.1em;
    color: var(--berry);
}

.ks-faqg__grouptext {
    max-width: var(--measure);
    margin: 0.4rem 0 0;
    font-size: 0.93rem;
    color: var(--fg-soft);
}

@media (max-width: 62rem) {
    .ks-faqg {
        grid-template-columns: minmax(0, 1fr);
    }

    .ks-faqg__nav {
        position: static;
    }

    .ks-faqg__nav ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
        gap: 0 1rem;
    }
}


/* == 15  Section: CTA, page note ========================================= */

.ks-cta {
    position: relative;
    padding-block: clamp(3.5rem, 7vw, 6rem);
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
}

.ks-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(60rem 28rem at 15% 0%, rgba(174, 36, 84, 0.22), transparent 70%),
        linear-gradient(to bottom, rgba(246, 245, 242, 0.05), transparent 40%);
}

.ks-cta > .ks-shell {
    position: relative;
}

.ks-cta__inner {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
}

.ks-cta__heading {
    margin: 0;
    font-family: var(--disp);
    font-size: clamp(1.55rem, 1.2rem + 1.7vw, 2.5rem);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -0.028em;
    text-wrap: balance;
}

.ks-cta__text {
    max-width: var(--measure);
    margin: 1.1rem 0 0;
    color: rgba(246, 245, 242, 0.7);
}

.ks-cta__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

.ks-cta__note {
    margin: 0.4rem 0 0;
    font-family: var(--mono);
    font-size: 0.72rem;
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: rgba(246, 245, 242, 0.5);
}

@media (max-width: 58rem) {
    .ks-cta__inner {
        grid-template-columns: minmax(0, 1fr);
    }

    .ks-cta__actions {
        align-items: flex-start;
    }
}

.ks-pagenote {
    padding-block: clamp(1.75rem, 3vw, 2.5rem);
    background: var(--paper-warm);
    border-top: 1px solid rgba(26, 22, 32, 0.08);
}

.ks-pagenote p {
    max-width: 72rem;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.65;
    color: var(--micro);
}


/* == 16  Journal, article, rich text, pager, search ====================== */

.ks-journal {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
    gap: 1px;
    background: var(--line);
    border: 1px solid var(--line);
}

.ks-journal--index {
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
}

.ks-post__link {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    height: 100%;
    padding: clamp(1.4rem, 2.6vw, 2rem);
    background: var(--bg);
    text-decoration: none;
    transition: background-color var(--fast) var(--ease);
}

.ks-post__link:hover {
    background: var(--card-bg-2);
}

.ks-post__figure {
    margin: calc(-1 * clamp(1.4rem, 2.6vw, 2rem)) calc(-1 * clamp(1.4rem, 2.6vw, 2rem)) 0.4rem;
    overflow: hidden;
}

.ks-post__figure img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform var(--slow) var(--ease);
}

.ks-post__link:hover .ks-post__figure img {
    transform: scale(1.03);
}

.ks-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin: 0;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fg-micro);
}

.ks-post__cat {
    padding-left: 0.75rem;
    border-left: 1px solid var(--line-firm);
    color: var(--berry);
}

.ks-post__title {
    margin: 0;
    font-family: var(--disp);
    font-size: clamp(1.08rem, 1rem + 0.4vw, 1.25rem);
    font-weight: 600;
    line-height: 1.26;
    letter-spacing: -0.018em;
    text-wrap: balance;
    color: var(--fg);
}

.ks-post__excerpt {
    margin: 0;
    font-size: 0.93rem;
    color: var(--fg-soft);
}

.ks-post__more {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: auto;
    padding-top: 1rem;
    font-family: var(--disp);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--berry);
}

/* The article head sits on the same 62rem block as the body below it, so the
   title, the rail and the text column all start on one spine. */
.ks-article__head {
    max-width: 62rem;
}

/* A shade smaller than a landing-page H1: this one is read, not announced,
   and at 4.1rem it dwarfed the column underneath it. */
.ks-article__title {
    font-size: clamp(1.95rem, 1.35rem + 2.5vw, 3.05rem);
    line-height: 1.08;
}

.ks-article__lede {
    max-width: var(--measure);
    margin: clamp(1.1rem, 2.2vw, 1.6rem) 0 0;
    font-size: clamp(1.03rem, 0.99rem + 0.3vw, 1.18rem);
    line-height: 1.62;
    color: var(--slate);
}

.ks-article__byline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--micro);
}

/* ---- the two-column body ----

   The rail and the text column together come to 62rem, the width every other
   block on the site is set on. The reading column keeps its measure; the rail
   is what fills the space the column used to leave empty on its left. */
.ks-article__layout {
    display: grid;
    /* Same rail width and gap as the FAQ hub's category index, so the two
       sticky-rail pages on the site are set to one measure. */
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: clamp(1.75rem, 4vw, 3.5rem);
    max-width: 62rem;
}

/* The lede image above hangs into this band by up to 4rem, so when there is
   one the whole grid — rail and text together — drops clear of it. The offset
   belongs to the grid, not the text column: put it on the text alone and the
   rail starts a screenful higher than the first paragraph. */
.ks-article__layout--offset {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

.ks-article__rail {
    position: sticky;
    top: 6rem;
    align-self: start;
    display: grid;
    gap: 1.75rem;
    padding-right: clamp(0rem, 1.5vw, 1.25rem);
    border-right: 1px solid var(--line);
    /* A long contents list can outgrow a laptop screen, and a sticky element
       taller than the viewport strands its own bottom half. Let the rail
       scroll instead. */
    max-height: calc(100vh - 7.5rem);
    max-height: calc(100dvh - 7.5rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.ks-article__meta {
    display: grid;
    grid-template-columns: auto;
    gap: 0.15rem;
    margin: 0;
    font-size: 0.85rem;
}

.ks-article__meta dt {
    font-family: var(--mono);
    font-size: 0.665rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-micro);
}

.ks-article__meta dt + dd {
    margin: 0 0 0.9rem;
    color: var(--fg);
}

.ks-article__meta dd:last-child {
    margin-bottom: 0;
}

.ks-article__meta a {
    text-decoration: none;
    border-bottom: 1px solid var(--line-firm);
    transition: border-color var(--fast) var(--ease);
}

.ks-article__meta a:hover {
    border-bottom-color: var(--berry);
}

/* ---- contents list ---- */

.ks-toc__label {
    margin: 0 0 0.75rem;
    font-family: var(--mono);
    font-size: 0.665rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-micro);
}

.ks-toc__list {
    display: grid;
    gap: 0.1rem;
    margin: 0;
    padding: 0;
    counter-reset: ks-toc;
}

.ks-toc__list a {
    display: block;
    padding: 0.3rem 0 0.3rem 1.9rem;
    position: relative;
    font-size: 0.86rem;
    line-height: 1.4;
    text-decoration: none;
    color: var(--fg-soft);
    transition: color var(--fast) var(--ease);
}

/* The mono reference number this design language numbers everything with. */
.ks-toc__list a::before {
    counter-increment: ks-toc;
    content: counter(ks-toc, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.42rem;
    font-family: var(--mono);
    font-size: 0.66rem;
    letter-spacing: 0.06em;
    color: var(--fg-micro);
    transition: color var(--fast) var(--ease);
}

.ks-toc__list a:hover,
.ks-toc__list a.is-active {
    color: var(--ink);
}

.ks-toc__list a:hover::before,
.ks-toc__list a.is-active::before {
    color: var(--berry);
}

.ks-toc__list a.is-active {
    font-weight: 600;
}

/* ---- share ---- */

.ks-share__label {
    margin: 0 0 0.6rem;
    font-family: var(--mono);
    font-size: 0.665rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-micro);
}

.ks-share__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0;
    background: none;
    border: 0;
    font-family: var(--disp);
    font-size: 0.86rem;
    font-weight: 500;
    text-align: left;
    text-decoration: none;
    color: var(--fg-soft);
    cursor: pointer;
    transition: color var(--fast) var(--ease);
}

.ks-share__link i {
    color: var(--micro);
    transition: color var(--fast) var(--ease);
}

.ks-share__link:hover,
.ks-share__link.is-done {
    color: var(--ink);
}

.ks-share__link:hover i,
.ks-share__link.is-done i {
    color: var(--berry);
}

/* One column on anything narrower: the rail becomes a block of reference
   marks above the article, and the contents list is capped so it cannot push
   the first paragraph off the screen. */
@media (max-width: 62rem) {
    /* No rail to fill the left, so the block centres instead. The allowance
       over the measure is what tables and figures widen into; below about
       660px the shell is narrower than this anyway and it has no effect. */
    .ks-article__head,
    .ks-article__layout,
    .ks-adjacent__list {
        max-width: calc(var(--measure) + 4rem);
        margin-inline: auto;
    }

    .ks-article__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: clamp(2rem, 5vw, 2.75rem);
    }

    .ks-article__rail {
        position: static;
        max-height: none;
        overflow: visible;
        padding-right: 0;
        padding-bottom: 1.75rem;
        border-right: 0;
        border-bottom: 1px solid var(--line);
        grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
        align-items: start;
        gap: 1.5rem 2.5rem;
    }

    /* Label and value side by side here, one pair per row. auto-fit would
       reflow a four-pair list into three columns and scramble which value
       belongs to which label. */
    .ks-article__meta {
        grid-template-columns: auto minmax(0, 1fr);
        column-gap: 1.25rem;
        row-gap: 0.4rem;
        align-items: baseline;
    }

    .ks-article__meta dt + dd {
        margin-bottom: 0;
    }

    .ks-toc__list {
        max-height: 13rem;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

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

    .ks-share__label {
        width: 100%;
    }

    .ks-share__link {
        width: auto;
    }
}

/* ---- previous / next ---- */

.ks-adjacent__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: 1px;
    max-width: 62rem;
    background: var(--line);
    border: 1px solid var(--line);
}

.ks-adjacent__item a {
    display: grid;
    gap: 0.5rem;
    height: 100%;
    padding: clamp(1.1rem, 2.2vw, 1.6rem);
    background: var(--card-bg);
    text-decoration: none;
    transition: background-color var(--fast) var(--ease);
}

.ks-adjacent__item a:hover {
    background: var(--card-bg-2);
}

.ks-adjacent__label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--mono);
    font-size: 0.665rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--fg-micro);
}

.ks-adjacent__item a:hover .ks-adjacent__label {
    color: var(--berry);
}

.ks-adjacent__title {
    font-family: var(--disp);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--fg);
}

/* The next-article half is mirrored, so the two read outwards from the fold. */
.ks-adjacent__item--next {
    text-align: right;
}

.ks-adjacent__item--next .ks-adjacent__label {
    justify-content: flex-end;
}

.ks-article__figure {
    margin: 0 0 clamp(-4rem, -6vw, -2.5rem);
    position: relative;
    z-index: 1;
    border: 1px solid rgba(26, 22, 32, 0.1);
}

.ks-article__figure img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.ks-rich {
    max-width: var(--measure);
    color: var(--fg-soft);
}

/* 68ch of this body face is about 575px, and the column it sits in is 696px.
   The difference is not padding: prose keeps the measure, and the elements a
   measure-width column squeezes — tables, figures, quotes — take the column
   whole. */
.ks-rich--article {
    max-width: none;
}

.ks-rich--article > * {
    max-width: var(--measure);
}

.ks-rich--article > figure,
.ks-rich--article > blockquote,
.ks-rich--article > .ks-rich__scroller,
.ks-rich--article > .wp-block-image,
.ks-rich--article > .wp-block-table,
.ks-rich--article > .wp-block-embed {
    max-width: none;
}

/* A table too wide for the column scrolls inside it rather than stretching
   the page. The wrapper is added to the content in ks_article_content(). */
.ks-rich__scroller {
    overflow-x: auto;
    overscroll-behavior-x: contain;
}

.ks-rich__scroller > table {
    width: 100%;
    min-width: 32rem;
}

.ks-rich--article h2,
.ks-rich--article h3 {
    /* Clear of the sticky masthead when a contents link jumps here. */
    scroll-margin-top: 5.5rem;
}

.ks-rich > * + * {
    margin-top: 1.1em;
}

.ks-rich h2,
.ks-rich h3,
.ks-rich h4 {
    margin: 2.25em 0 0.6em;
    font-family: var(--disp);
    font-weight: 600;
    letter-spacing: -0.02em;
    text-wrap: balance;
    color: var(--fg);
}

.ks-rich h2 {
    font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
    line-height: 1.18;
}

.ks-rich h3 {
    font-size: clamp(1.1rem, 1.02rem + 0.4vw, 1.3rem);
}

.ks-rich a {
    color: var(--berry);
    text-decoration-color: color-mix(in srgb, var(--berry) 40%, transparent);
}

.ks-rich a:hover {
    text-decoration-color: var(--berry);
}

.ks-rich ul,
.ks-rich ol {
    padding-left: 1.3rem;
}

.ks-rich ul li {
    list-style: none;
    position: relative;
    padding-left: 0.3rem;
}

.ks-rich ul li::before {
    content: "";
    position: absolute;
    left: -0.95rem;
    top: 0.7em;
    width: 0.3rem;
    height: 1px;
    background: var(--berry);
}

.ks-rich ol li {
    list-style: decimal;
}

.ks-rich li + li {
    margin-top: 0.45em;
}

.ks-rich blockquote {
    margin: 2em 0;
    padding-left: 1.25rem;
    border-left: 2px solid var(--berry);
    font-family: var(--disp);
    font-size: 1.12rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--fg);
}

.ks-rich img,
.ks-rich figure {
    margin-block: 2em;
}

.ks-rich figcaption {
    margin-top: 0.6rem;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: var(--fg-micro);
}

.ks-rich code {
    padding: 0.1em 0.35em;
    background: var(--card-bg-2);
    border: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.88em;
}

.ks-rich table {
    font-size: 0.93rem;
}

.ks-rich th,
.ks-rich td {
    padding: 0.7rem 0.8rem;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.ks-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: 1.75rem;
    border-top: 1px solid var(--line);
}

.ks-pager a,
.ks-pager span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.75rem;
    min-height: 2.75rem;
    padding-inline: 0.65rem;
    border: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.78rem;
    text-decoration: none;
    color: var(--fg-soft);
    transition: border-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.ks-pager a:hover {
    border-color: var(--berry);
    color: var(--berry);
}

.ks-pager .current {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
}

.ks-search {
    max-width: 30rem;
    margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

.ks-search__label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--micro);
}

.ks-search__row {
    display: flex;
    border: 1px solid rgba(26, 22, 32, 0.22);
    background: var(--white);
    transition: border-color var(--fast) var(--ease);
}

.ks-search__row:focus-within {
    border-color: var(--berry);
}

.ks-search__input {
    flex: 1;
    min-width: 0;
    padding: 0.8rem 1rem;
    border: 0;
    background: none;
    font: inherit;
    font-size: 0.95rem;
    color: var(--ink);
}

.ks-search__input:focus {
    outline: none;
}

.ks-search__submit {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-height: 2.875rem;
    padding-inline: 1.1rem;
    border: 0;
    border-left: 1px solid rgba(26, 22, 32, 0.14);
    background: none;
    font-family: var(--disp);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--ink);
    transition: background-color var(--fast) var(--ease), color var(--fast) var(--ease);
}

.ks-search__submit:hover {
    background: var(--ink);
    color: var(--paper);
}


/* == 17  Footer ========================================================== */

.ks-footer {
    padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(1.75rem, 3vw, 2.5rem);
    background: var(--ink);
    color: rgba(246, 245, 242, 0.68);
    font-size: 0.93rem;
}

.ks-footer__top {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 0.95fr)) minmax(0, 1.3fr);
    gap: clamp(1.75rem, 3vw, 2.75rem);
    padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
    border-bottom: 1px solid rgba(246, 245, 242, 0.12);
}

@media (max-width: 78rem) {
    .ks-footer__top {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ks-footer__brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 44rem) {
    .ks-footer__top {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 30rem) {
    .ks-footer__top {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ks-footer__brand {
    max-width: 34rem;
}

.ks-footer__logo {
    display: inline-flex;
    text-decoration: none;
}

.ks-footer__intro {
    margin: 1.5rem 0 0;
    line-height: 1.68;
}

.ks-footer__badge {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 1.5rem 0 0;
    padding: 0.5rem 0.8rem;
    border: 1px solid rgba(246, 245, 242, 0.16);
    font-family: var(--mono);
    font-size: 0.7rem;
    line-height: 1.5;
    letter-spacing: 0.06em;
    color: rgba(246, 245, 242, 0.6);
}

.ks-footer__badge i {
    color: color-mix(in srgb, var(--berry) 62%, var(--paper));
    margin-top: 0.1em;
}

.ks-footer__coltitle {
    margin: 0 0 1.1rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(246, 245, 242, 0.45);
}

.ks-footer__col ul {
    display: grid;
    gap: 0.6rem;
}

.ks-footer__col a {
    text-decoration: none;
    color: rgba(246, 245, 242, 0.74);
    transition: color var(--fast) var(--ease);
}

.ks-footer__col a:hover {
    color: var(--paper);
    text-decoration: underline;
    text-decoration-color: var(--berry);
}

.ks-footer__contactlist {
    display: grid;
    gap: 1.1rem;
}

.ks-footer__contactlist li {
    display: flex;
    gap: 0.7rem;
}

.ks-footer__contactlist i {
    margin-top: 0.22em;
    color: color-mix(in srgb, var(--berry) 62%, var(--paper));
}

.ks-footer__contactlist span {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.ks-footer__contactlist strong {
    font-family: var(--mono);
    font-size: 0.64rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(246, 245, 242, 0.42);
}

.ks-footer__contactlist a {
    text-decoration: none;
    color: rgba(246, 245, 242, 0.84);
    overflow-wrap: anywhere;
    transition: color var(--fast) var(--ease);
}

.ks-footer__contactlist a:hover {
    color: var(--paper);
}

.ks-footer__maplink {
    margin-top: 0.3rem;
    font-family: var(--mono);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--berry) 62%, var(--paper)) !important;
}

.ks-footer__disclosure {
    padding-block: clamp(1.75rem, 3vw, 2.5rem);
    border-bottom: 1px solid rgba(246, 245, 242, 0.12);
}

.ks-footer__disclosure-lead {
    max-width: 72rem;
    margin: 0 0 1.25rem;
    font-size: 0.87rem;
    color: rgba(246, 245, 242, 0.56);
}

.ks-footer__entities {
    display: grid;
    gap: 0.4rem;
    max-width: 72rem;
}

.ks-footer__entities li {
    position: relative;
    padding-left: 1rem;
    font-size: 0.8rem;
    line-height: 1.6;
    color: rgba(246, 245, 242, 0.48);
}

.ks-footer__entities li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.72em;
    width: 0.4rem;
    height: 1px;
    background: color-mix(in srgb, var(--berry) 55%, transparent);
}

.ks-footer__entities-close {
    margin: 1.1rem 0 0;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    color: rgba(246, 245, 242, 0.42);
}

.ks-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: clamp(1.5rem, 3vw, 2rem);
}

.ks-footer__copy {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(246, 245, 242, 0.46);
}

.ks-footer__bottomlinks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    font-size: 0.8rem;
}

.ks-footer__bottomlinks a {
    text-decoration: none;
    color: rgba(246, 245, 242, 0.62);
    transition: color var(--fast) var(--ease);
}

.ks-footer__bottomlinks a:hover {
    color: var(--paper);
}

.ks-footer__currency {
    font-family: var(--mono);
    font-size: 0.7rem;
    letter-spacing: 0.06em;
    color: rgba(246, 245, 242, 0.4);
}


/* == 18  Floating controls =============================================== */

.ks-fab,
.ks-totop {
    position: fixed;
    right: max(1.25rem, env(safe-area-inset-right));
    z-index: 70;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 999px;
    text-decoration: none;
    transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
                opacity var(--fast) var(--ease), visibility var(--fast) var(--ease);
}

.ks-fab {
    bottom: max(1.25rem, env(safe-area-inset-bottom));
    padding: 0.8rem 1.15rem;
    background: var(--wa);
    color: var(--white);
    font-family: var(--disp);
    font-size: 0.88rem;
    font-weight: 600;
    box-shadow: 0 10px 28px -10px rgba(26, 22, 32, 0.5);
}

.ks-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px -12px rgba(26, 22, 32, 0.55);
}

.ks-fab i {
    font-size: 1.2rem;
}

.ks-totop {
    bottom: calc(max(1.25rem, env(safe-area-inset-bottom)) + 4rem);
    width: 2.75rem;
    height: 2.75rem;
    justify-content: center;
    padding: 0;
    background: var(--paper);
    border: 1px solid rgba(26, 22, 32, 0.18);
    color: var(--ink);
    opacity: 0;
    visibility: hidden;
}

.ks-totop.is-visible {
    opacity: 1;
    visibility: visible;
}

.ks-totop:hover {
    transform: translateY(-2px);
    border-color: var(--berry);
    color: var(--berry);
}

@media (max-width: 30rem) {
    .ks-fab__label {
        display: none;
    }

    .ks-fab {
        width: 3.25rem;
        height: 3.25rem;
        justify-content: center;
        padding: 0;
    }
}


/* == 19  Motion & print ================================================== */

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .js .ks-reveal.is-pending > * {
        opacity: 1;
        transform: none;
    }

    .ks-btn:hover,
    .ks-fab:hover,
    .ks-totop:hover {
        transform: none;
    }

    .ks-post__link:hover .ks-post__figure img,
    .ks-related a:hover,
    .ks-drawer__nav a:hover,
    .ks-arrowlink:hover i {
        transform: none;
    }
}

@media print {
    .ks-utility,
    .ks-masthead,
    .ks-drawer,
    .ks-fab,
    .ks-totop,
    .ks-cta,
    .ks-search,
    .ks-pager,
    .ks-toc,
    .ks-share,
    .ks-adjacent {
        display: none !important;
    }

    /* One column on paper; the rail's facts lead the article. */
    .ks-article__layout {
        display: block;
        max-width: none;
    }

    .ks-article__rail {
        position: static;
        max-height: none;
        overflow: visible;
        margin-bottom: 1.5rem;
        padding: 0 0 1rem;
        border: 0;
        border-bottom: 1px solid var(--line);
    }

    body::before {
        display: none;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    .ks-band,
    .ks-hero {
        padding-block: 1.5rem;
        background: #fff !important;
        color: #000 !important;
        border-top: 1px solid #ccc;
    }

    .ks-faq__item[open] .ks-faq__a,
    .ks-faq__a {
        display: block !important;
    }

    .ks-faq__item {
        break-inside: avoid;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #555;
    }
}

/* ---------------------------------------------------------------------------
   Photo grid (template-parts/sections/gallery.php)

   Built on the same hairline lattice as .ks-cards: a 1px gap over the rule
   colour, so the gaps read as drawn lines rather than empty space. Photos are
   locked to 3:2 and cropped, which keeps the row baselines true no matter what
   the team uploads.
   ------------------------------------------------------------------------- */
.ks-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--line);
    border: 1px solid var(--line);
}

.ks-gallery--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* The photo grid speaks the same column language as the card grid, so the two
   read as one system down the page rather than two competing rhythms. */
@media (max-width: 62rem) {
    .ks-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 40rem) {
    .ks-gallery,
    .ks-gallery--2 {
        grid-template-columns: minmax(0, 1fr);
    }
}

.ks-gallery__item {
    display: flex;
    background: var(--bg);
}

.ks-gallery__figure {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
}

.ks-gallery__img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    /* The photographs carry more saturation than the rest of the page; a
       fractional desaturation settles them next to the paper ground. */
    filter: saturate(0.92);
    transition: filter var(--fast) var(--ease), transform var(--fast) var(--ease);
}

.ks-gallery__figure:hover .ks-gallery__img {
    filter: saturate(1);
}

.ks-gallery__caption {
    padding: 0.85rem clamp(1rem, 2vw, 1.3rem) 1.05rem;
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--fg-soft);
}

@media (prefers-reduced-motion: reduce) {
    .ks-gallery__img {
        transition: none;
    }
}

/* ---------------------------------------------------------------------------
   Hero background photograph (.ks-hero--photo)

   The hero keeps its light ground and dark type; the photograph is laid under
   a paper scrim that is fully opaque where the headline sits and thins out
   toward the right, so the picture reads as depth behind the block rather than
   as a backdrop the text has to fight. Contrast therefore never depends on
   which photo the team uploads — the worst case is a photo you cannot see
   much of, not a headline you cannot read.
   ------------------------------------------------------------------------- */
.ks-hero--photo::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        /* 1. settles the figures strip at the foot of the block */
        linear-gradient(to bottom,
            rgba(246, 245, 242, 0) 42%,
            rgba(246, 245, 242, 0.55) 80%,
            rgba(246, 245, 242, 0.82) 100%),
        /* 2. the reading scrim, opaque under the headline */
        linear-gradient(95deg,
            rgb(246, 245, 242) 0%,
            rgb(246, 245, 242) 42%,
            rgba(246, 245, 242, 0.94) 54%,
            rgba(246, 245, 242, 0.55) 68%,
            rgba(246, 245, 242, 0.20) 82%,
            rgba(246, 245, 242, 0.12) 100%),
        /* 3. the photograph itself */
        var(--ks-hero-bg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center, center, var(--ks-hero-bg-pos, center);
}

/* Content sits above the photo layer; ::after would otherwise paint over it. */
.ks-hero--photo > .ks-shell {
    z-index: 1;
}

/* The hairline ledger is already a texture — half it so the two do not fight. */
.ks-hero--photo::before {
    opacity: 0.5;
}

/* The copy stops short of the picture, but these two do not: the stamp sits in
   the top-right corner and the figures strip runs the full width. Rather than
   wash the whole photograph out to protect them, each gets its own paper
   backing — so the picture can stay strong where nothing is written over it. */
.ks-hero--photo .ks-hero__stamp {
    padding: 0.6rem 0.85rem;
    background: rgba(246, 245, 242, 0.9);
    border: 1px solid rgba(26, 22, 32, 0.08);
}

.ks-hero--photo .ks-facts {
    padding-inline: clamp(0.75rem, 2vw, 1.15rem);
    margin-inline: clamp(-1.15rem, -2vw, -0.75rem);
    background: rgba(246, 245, 242, 0.92);
}

/* Give the picture room to be a picture. */
@media (min-width: 60rem) {
    .ks-hero--photo {
        min-height: 32rem;
    }
}

/* One column: the copy runs the full width, so the scrim turns near-solid and
   the photograph survives only as a tint. Legibility wins over the picture. */
@media (max-width: 60rem) {
    .ks-hero--photo::after {
        background-image:
            linear-gradient(to bottom,
                rgba(246, 245, 242, 0.94) 0%,
                rgba(246, 245, 242, 0.91) 55%,
                rgba(246, 245, 242, 0.96) 100%),
            var(--ks-hero-bg);
        background-position: center, var(--ks-hero-bg-pos, center);
    }
}

/* Windows-style forced colours drop background images; keep the plain ground. */
@media (forced-colors: active) {
    .ks-hero--photo::after {
        display: none;
    }
}

/* ---------------------------------------------------------------------------
   Short final rows in the card and photo lattices

   .ks-cards and .ks-gallery draw their grid as a 1px gap over the rule colour,
   so an unused cell in the last row is not empty space — it paints as a block
   of rule grey and reads as a hole. Five cards in three columns put that hole
   in the bottom-right corner of the section.

   Rather than constrain how many cards an editor may write, the last item
   stretches across whatever the row has left. The column count changes per
   breakpoint, so each width states its own rule.
   ------------------------------------------------------------------------- */

/* Three columns */
@media (min-width: 62.0625rem) {
    .ks-cards--3 > li:last-child:nth-child(3n + 1),
    .ks-gallery > li:last-child:nth-child(3n + 1) {
        grid-column: span 3;
    }

    .ks-cards--3 > li:last-child:nth-child(3n + 2),
    .ks-gallery > li:last-child:nth-child(3n + 2) {
        grid-column: span 2;
    }
}

/* Two columns: .ks-cards--3 drops to two here, .ks-cards--2 is two throughout */
@media (min-width: 40.0625rem) and (max-width: 62rem) {
    .ks-cards--3 > li:last-child:nth-child(2n + 1),
    .ks-gallery > li:last-child:nth-child(2n + 1) {
        grid-column: span 2;
    }
}

@media (min-width: 40.0625rem) {
    .ks-cards--2 > li:last-child:nth-child(2n + 1),
    .ks-gallery--2 > li:last-child:nth-child(2n + 1) {
        grid-column: span 2;
    }
}


/* ---------------------------------------------------------------------------
   Reading density on the routed pages

   The long-form sections stack paragraphs of 500-800 characters, and the base
   rule gives them `margin: 0 0 1em`. Against a 1.68 line-height that leaves a
   paragraph break barely wider than a line break, so three paragraphs read as
   one grey mass rather than three arguments. These rules separate the units
   and shorten the line slightly; they change no copy and no structure.
   ------------------------------------------------------------------------- */
.ks-split__body > p:not(:last-child),
.ks-rich > p:not(:last-child) {
    margin-bottom: 1.75em;
}

/* 68ch is the top of the comfortable range; the densest blocks on the site
   read better a little shorter. The lead paragraph keeps its own emphasis. */
.ks-split__body > p {
    max-width: 64ch;
}

/* ---------------------------------------------------------------------------
   Vertical cadence

   Every band used the same --band-y, so the page marched at one interval from
   hero to footer however different the sections were. A band whose content is
   already visual — a photo lattice, a card grid — carries its own structure
   and needs less air around it than a wall of prose. Varying the two breaks
   the uniform step without touching section order.

   Guarded by @supports: where :has() is unavailable the base --band-y stands.
   ------------------------------------------------------------------------- */
@supports selector(:has(*)) {
    .ks-band:has(> .ks-shell > .ks-gallery),
    .ks-band:has(> .ks-shell > .ks-cards) {
        padding-block: clamp(3.5rem, 7vw, 6.5rem);
    }
}