/*! fbs-bundle src:66d32829ec548b72dfb70bb921648d6a */
@font-face {
    font-family: "Besley";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/besley-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: "Besley";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/besley-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: "Besley";
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/besley-latin-wght-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: "Schibsted Grotesk";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/schibsted-grotesk-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: "Schibsted Grotesk";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/schibsted-grotesk-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF
}

@font-face {
    font-family: "Schibsted Grotesk";
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url("../fonts/schibsted-grotesk-latin-wght-italic.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
}

@font-face {
    font-family: "Besley Fallback";
    src: local("Georgia");
    size-adjust: 108%;
    ascent-override: 88%;
    descent-override: 24%;
    line-gap-override: 0%
}

@font-face {
    font-family: "Schibsted Fallback";
    src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
    size-adjust: 101%;
    ascent-override: 92%;
    descent-override: 24%;
    line-gap-override: 0%
}

:root {
    --ivory: #F8F6F1;
    --paper: #FFFFFF;
    --sand: #F0ECE2;
    --line: #E4DFD3;
    --line-strong: #CEC8B8;
    --ink: #1E2927;
    --ink-2: #414E4A;
    --ink-3: #5F6B67;
    --copper: #C45F40;
    --copper-deep: #A2462B;
    --copper-wash: #F7E7DE;
    --sage: #748574;
    --sage-deep: #4C5E4F;
    --sage-wash: #E7ECE4;
    --brass: #B5873A;
    --brass-deep: #7C5A1C;
    --brass-wash: #F5EDD9;
    --clay: #DDA58F;
    --moss: #5C7251;
    --mist: #C8D2C6;
    --ok: #2F6B45;
    --ok-wash: #E3F0E6;
    --warn: #8A5A0B;
    --warn-wash: #FAEFD3;
    --bad: #A3301F;
    --bad-wash: #FBE6E1;
    --font-display: "Besley", "Besley Fallback", Georgia, "Times New Roman", serif;
    --font-body: "Schibsted Grotesk", "Schibsted Fallback", "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --step--2: 0.75rem;
    --step--1: 0.875rem;
    --step-0: 1.0625rem;
    --step-1: 1.25rem;
    --step-2: clamp(1.375rem, 1.2rem + 0.7vw, 1.625rem);
    --step-3: clamp(1.625rem, 1.3rem + 1.4vw, 2.25rem);
    --step-4: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
    --step-5: clamp(2.375rem, 1.3rem + 4.6vw, 4.75rem);
    --gutter: clamp(1rem, 0.4rem + 2.6vw, 2.5rem);
    --section: clamp(3.5rem, 2rem + 6vw, 7rem);
    --measure: 68ch;
    --wrap: 78rem;
    --r-tile: 6px;
    --r-control: 10px;
    --r-panel: 14px;
    --r-pill: 999px;
    --shadow-pop: 0 18px 40px -22px rgba(30, 41, 39, 0.38), 0 2px 6px -2px rgba(30, 41, 39, 0.1);
    --ring: 0 0 0 3px var(--ivory), 0 0 0 5px var(--ink);
    --ease-out: cubic-bezier(0.22, 0.8, 0.26, 1);
    --ease-in-out: cubic-bezier(0.6, 0, 0.3, 1);
    --t-fast: 140ms;
    --t-mid: 280ms;
    --t-slow: 620ms;
    --header-h: 4.25rem
}

.accent-copper {
    --a1: var(--copper);
    --a2: var(--ink);
    --a3: var(--clay);
    --a-wash: var(--copper-wash);
    --a-text: var(--copper-deep)
}

.accent-sage {
    --a1: var(--sage);
    --a2: var(--ink);
    --a3: var(--mist);
    --a-wash: var(--sage-wash);
    --a-text: var(--sage-deep)
}

.accent-ink {
    --a1: var(--ink);
    --a2: var(--sage);
    --a3: var(--copper);
    --a-wash: #E9ECE8;
    --a-text: var(--ink)
}

.accent-brass {
    --a1: var(--brass);
    --a2: var(--ink);
    --a3: #E2CC98;
    --a-wash: var(--brass-wash);
    --a-text: var(--brass-deep)
}

.accent-clay {
    --a1: var(--copper-deep);
    --a2: var(--clay);
    --a3: var(--sage);
    --a-wash: #F6E4DB;
    --a-text: var(--copper-deep)
}

.accent-moss {
    --a1: var(--moss);
    --a2: var(--copper);
    --a3: var(--mist);
    --a-wash: #E4EADD;
    --a-text: #44563B
}

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

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 1.5rem);
    background: var(--ivory)
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--ivory);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: 1.6;
    font-weight: 400;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-wrap: break-word
}

main {
    flex: 1 0 auto;
    display: block;
    padding-bottom: var(--section)
}

main:has(>:last-child:is(.section--band, .section--sage)) {
    padding-bottom: 0
}

main:focus {
    outline: none
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
dd,
figure,
blockquote,
pre,
table,
fieldset {
    margin: 0;
    padding: 0
}

ul[class],
ol[class] {
    list-style: none
}

fieldset {
    border: 0;
    min-width: 0
}

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

img {
    height: auto
}

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

button {
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0
}

table {
    border-collapse: collapse
}

[hidden] {
    display: none !important
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 560;
    line-height: 1.12;
    letter-spacing: -0.018em;
    text-wrap: balance
}

h1 {
    font-size: var(--step-4)
}

h2 {
    font-size: var(--step-3)
}

h3 {
    font-size: var(--step-2)
}

h4 {
    font-size: var(--step-1)
}

p {
    text-wrap: pretty
}

a {
    color: inherit;
    text-decoration-thickness: 0.07em;
    text-underline-offset: 0.2em
}

a:hover {
    text-decoration-thickness: 0.12em
}

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

::selection {
    background: var(--copper-wash);
    color: var(--ink)
}

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

.wrap {
    width: min(100% - 2 * var(--gutter), var(--wrap));
    margin-inline: auto
}

.wrap--narrow {
    width: min(100% - 2 * var(--gutter), 46rem)
}

.wrap--reading {
    width: min(100% - 2 * var(--gutter), 76rem)
}

.section {
    padding-block: var(--section)
}

.section--tight {
    padding-block: calc(var(--section) * 0.6)
}

.section--band {
    background: var(--sand)
}

.section--sage {
    background: var(--sage-wash)
}

.section--ruled {
    border-top: 1px solid var(--line)
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    margin-bottom: clamp(1.5rem, 1rem + 2vw, 2.75rem)
}

.section-head__title {
    font-size: var(--step-3);
    max-width: 22ch
}

.section-head__text {
    color: var(--ink-2);
    max-width: 46ch;
    margin-top: 0.6rem
}

.stack>*+* {
    margin-top: var(--stack, 1rem)
}

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

.skip-link {
    position: absolute;
    left: 0.75rem;
    top: 0.75rem;
    z-index: 200;
    padding: 0.7rem 1rem;
    background: var(--ink);
    color: var(--ivory);
    border-radius: var(--r-control);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%)
}

.skip-link:focus {
    transform: none;
    outline-color: var(--copper)
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round
}

.lede {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 58ch
}

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

.small {
    font-size: var(--step--1)
}

.nowrap {
    white-space: nowrap
}

.scroll-sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none
}

.offscreen-field {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 60;
    background: color-mix(in srgb, var(--ivory) 94%, transparent);
    -webkit-backdrop-filter: saturate(1.2) blur(10px);
    backdrop-filter: saturate(1.2) blur(10px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--t-mid) ease, box-shadow var(--t-mid) ease
}

.site-header.is-stuck {
    border-bottom-color: var(--line);
    box-shadow: 0 10px 24px -22px rgba(30, 41, 39, 0.5)
}

.site-header__bar {
    display: flex;
    align-items: center;
    gap: clamp(0.75rem, 2vw, 2rem);
    min-height: var(--header-h)
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    text-decoration: none;
    flex: none;
    padding-block: 0.4rem
}

.brand__mark {
    width: 2rem;
    height: 2rem;
    border-radius: 5px;
    overflow: hidden
}

.brand__mark-img {
    width: 2rem;
    height: 2rem;
    object-fit: contain;
    border-radius: 5px
}

.brand__name {
    font-family: var(--font-display);
    font-weight: 640;
    font-size: 1.35rem;
    letter-spacing: -0.025em;
    line-height: 1
}

.brand:hover .brand__tile--a {
    transform: translate(1px, 1px)
}

.brand:hover .brand__tile--b {
    transform: translate(-1px, -1px)
}

.brand__tile {
    transition: transform var(--t-mid) var(--ease-out)
}

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

.site-nav__list {
    display: flex;
    align-items: center;
    gap: clamp(0.1rem, 0.9vw, 0.75rem)
}

.site-nav__item {
    position: relative
}

.site-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.55rem 0.5rem;
    font-size: 0.95rem;
    font-weight: 520;
    line-height: 1.2;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
    border-radius: 6px
}

.site-nav__link::after {
    content: "";
    position: absolute;
    left: 0.5rem;
    right: 0.5rem;
    bottom: 0.2rem;
    height: 2px;
    background: var(--copper);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-mid) var(--ease-out)
}

.site-nav__link:hover::after,
.site-nav__link[aria-current]::after,
.site-nav__link[aria-expanded="true"]::after {
    transform: scaleX(1)
}

.site-nav__link[aria-current] {
    font-weight: 640
}

.site-nav__link .icon {
    width: 0.95em;
    height: 0.95em;
    transition: transform var(--t-mid) var(--ease-out)
}

.site-nav__link[aria-expanded="true"] .icon {
    transform: rotate(180deg)
}

.menu {
    position: absolute;
    top: calc(100% + 0.55rem);
    left: -0.75rem;
    z-index: 70;
    width: min(21rem, 86vw);
    padding: 0.5rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    box-shadow: var(--shadow-pop);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--t-mid) ease, transform var(--t-mid) var(--ease-out), visibility 0s linear var(--t-mid)
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.site-nav__item:last-child>.menu,
.menu.menu--end {
    left: auto;
    right: -0.75rem
}

.site-nav__item.is-open>.menu,
html:not(.js) .site-nav__item:hover>.menu,
html:not(.js) .site-nav__item:focus-within>.menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s
}

.menu__link {
    display: grid;
    gap: 0.1rem;
    padding: 0.7rem 0.85rem;
    border-radius: 9px;
    text-decoration: none;
    transition: background-color var(--t-fast) ease
}

.menu__link:hover,
.menu__link:focus-visible {
    background: var(--sage-wash)
}

.menu__label {
    font-weight: 620;
    font-size: 0.97rem
}

.menu__desc {
    font-size: var(--step--1);
    color: var(--ink-3);
    line-height: 1.4
}

.site-search {
    position: relative;
    flex: none
}

.site-search__input {
    width: 11.5rem;
    height: 2.6rem;
    padding: 0 2.6rem 0 0.95rem;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    font-size: 0.95rem;
    transition: width var(--t-mid) var(--ease-out), border-color var(--t-fast) ease, box-shadow var(--t-fast) ease
}

.site-search__input::placeholder {
    color: var(--ink-3);
    opacity: 1
}

.site-search__input:focus {
    width: 15rem;
    border-color: var(--ink);
    outline: none;
    box-shadow: 0 0 0 3px var(--sage-wash)
}

.site-search__button {
    position: absolute;
    right: 0.2rem;
    top: 0.2rem;
    width: 2.2rem;
    height: 2.2rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--ink);
    transition: background-color var(--t-fast) ease
}

.site-search__button:hover {
    background: var(--sage-wash)
}

.nav-toggle {
    display: none;
    align-items: center;
    gap: 0.5rem;
    margin-left: auto;
    height: 2.75rem;
    padding: 0 0.95rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--paper);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    color: var(--ink)
}

.nav-toggle__bars {
    position: relative;
    width: 1.1rem;
    height: 0.75rem
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--t-mid) var(--ease-out), top var(--t-mid) var(--ease-out), bottom var(--t-mid) var(--ease-out)
}

.nav-toggle__bars::before {
    top: 0
}

.nav-toggle__bars::after {
    bottom: 0
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
    top: calc(50% - 1px);
    transform: rotate(45deg)
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
    bottom: calc(50% - 1px);
    transform: rotate(-45deg)
}

@media (min-width:66.01rem) and (max-width:79.99rem) {
    .site-search {
        width: 2.6rem;
        height: 2.6rem
    }

    .site-search__input {
        position: absolute;
        top: 0;
        right: 0;
        width: 2.6rem;
        padding-left: 0;
        color: transparent;
        cursor: pointer
    }

    .site-search__input::placeholder {
        color: transparent
    }

    .site-search:focus-within .site-search__input {
        width: 15rem;
        padding-left: 0.95rem;
        color: var(--ink);
        cursor: text;
        z-index: 1
    }

    .site-search:focus-within .site-search__input::placeholder {
        color: var(--ink-3)
    }

    .site-search__button {
        z-index: 2
    }
}

@media (min-width:66.01rem) and (max-width:70rem) {
    .site-nav__link {
        padding-inline: 0.35rem;
        font-size: 0.9rem
    }

    .site-nav__link::after {
        left: 0.35rem;
        right: 0.35rem
    }
}

@media (max-width:66rem) {
    .nav-toggle {
        display: inline-flex
    }

    .site-header__panel {
        position: absolute;
        left: 0;
        right: 0;
        top: 100%;
        max-height: calc(100vh - var(--header-h));
        max-height: calc(100dvh - var(--header-h));
        overflow-y: auto;
        overscroll-behavior: contain;
        background: var(--ivory);
        border-bottom: 1px solid var(--line);
        box-shadow: 0 30px 40px -30px rgba(30, 41, 39, 0.45);
        padding: 0.5rem var(--gutter) 1.75rem;
        visibility: hidden;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity var(--t-mid) ease, transform var(--t-mid) var(--ease-out), visibility 0s linear var(--t-mid)
    }

    .site-header.is-nav-open .site-header__panel {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition-delay: 0s
    }

    .site-nav__list {
        flex-direction: column;
        align-items: stretch;
        gap: 0
    }

    .site-nav__item {
        border-bottom: 1px solid var(--line)
    }

    .site-nav__link {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0.95rem 0.1rem;
        font-size: 1.1rem;
        font-family: var(--font-display);
        font-weight: 540;
        border-radius: 0;
        white-space: normal;
        text-align: left
    }

    .site-nav__link::after {
        display: none
    }

    .site-nav__link[aria-current] {
        color: var(--copper-deep)
    }

    .menu {
        position: static;
        width: auto;
        padding: 0 0 0.6rem;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        background: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none
    }

    .site-nav__item.is-open>.menu,
    html:not(.js) .site-nav__item>.menu {
        display: block
    }

    .menu__link {
        padding: 0.6rem 0.75rem
    }

    .site-search {
        margin-top: 1.1rem
    }

    .site-search__input,
    .site-search__input:focus {
        width: 100%;
        height: 3rem
    }

    .site-search__button {
        top: 0.4rem;
        right: 0.4rem
    }
}

@media (min-width:66.01rem) {
    .site-header__panel {
        display: flex;
        align-items: center;
        flex: 1 1 auto;
        gap: clamp(0.75rem, 2vw, 2rem);
        min-width: 0
    }
}

.site-footer {
    background: var(--sand);
    border-top: 1px solid var(--line);
    padding-block: clamp(2.5rem, 2rem + 3vw, 4.5rem) 1.75rem
}

.site-footer__grid {
    display: grid;
    gap: 2.25rem clamp(1.5rem, 4vw, 4rem);
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr))
}

.site-footer__about {
    max-width: 30rem
}

.site-footer__about p {
    margin-top: 1rem;
    color: var(--ink-2);
    font-size: 0.98rem
}

.site-footer__heading {
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 680;
    letter-spacing: 0;
    color: var(--ink-3);
    margin-bottom: 0.85rem
}

.site-footer__links {
    display: grid;
    gap: 0.5rem
}

.site-footer__links a {
    text-decoration: none;
    font-weight: 500;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
    transition: background-size var(--t-mid) var(--ease-out);
    padding-bottom: 1px
}

.site-footer__links a:hover {
    background-size: 100% 1.5px
}

.site-footer__social {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.25rem
}

.site-footer__social a {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    background: var(--ivory);
    transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease, transform var(--t-mid) var(--ease-out)
}

.site-footer__social a:hover {
    background: var(--paper);
    border-color: var(--ink);
    transform: translateY(-2px)
}

.site-footer__base {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 2rem;
    margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    padding-top: 1.25rem;
    border-top: 1px solid var(--line-strong);
    font-size: var(--step--1);
    color: var(--ink-2)
}

.site-footer__legal {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.4rem
}

.site-footer__legal a {
    text-decoration: none
}

.site-footer__legal a:hover {
    text-decoration: underline
}

@media (max-width:52rem) {
    .site-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }

    .site-footer__about {
        grid-column: 1 / -1
    }
}

@media (max-width:26rem) {
    .site-footer__grid {
        grid-template-columns: minmax(0, 1fr)
    }
}

.btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.9rem;
    padding: 0.65rem 1.2rem;
    border: 1.5px solid var(--ink);
    border-radius: var(--r-control);
    background: transparent;
    color: var(--ink);
    font-weight: 620;
    font-size: 0.98rem;
    line-height: 1.2;
    text-decoration: none;
    overflow: hidden;
    isolation: isolate;
    transition: color var(--t-mid) ease, border-color var(--t-mid) ease, transform var(--t-fast) ease
}

.btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--ink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--t-mid) var(--ease-out)
}

.btn:hover {
    color: var(--ivory)
}

.btn:hover::before {
    transform: scaleX(1)
}

.btn:active {
    transform: translateY(1px)
}

.btn .icon {
    transition: transform var(--t-mid) var(--ease-out)
}

.btn:hover .icon--nudge {
    transform: translateX(3px)
}

.btn--primary {
    background: var(--copper-deep);
    border-color: var(--copper-deep);
    color: #fff
}

.btn--primary::before {
    background: var(--ink)
}

.btn--primary:hover {
    border-color: var(--ink);
    color: #fff
}

.btn--quiet {
    border-color: var(--line-strong);
    background: var(--paper)
}

.btn--quiet::before {
    background: var(--sage-wash)
}

.btn--quiet:hover {
    color: var(--ink);
    border-color: var(--ink)
}

.btn--small {
    min-height: 2.35rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.9rem
}

.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed
}

.btn[disabled]::before {
    display: none
}

.btn[disabled]:hover {
    color: inherit
}

.btn.is-done {
    border-color: var(--ok);
    color: var(--ok)
}

.btn.is-done::before {
    display: none
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 620;
    text-decoration: none;
    background: linear-gradient(var(--copper), var(--copper)) 0 100% / 100% 2px no-repeat;
    padding-bottom: 3px;
    transition: background-size var(--t-mid) var(--ease-out), color var(--t-fast) ease
}

.text-link:hover {
    background-size: 0 2px;
    background-position: 100% 100%;
    color: var(--copper-deep)
}

.text-link .icon {
    width: 1em;
    height: 1em;
    transition: transform var(--t-mid) var(--ease-out)
}

.text-link:hover .icon {
    transform: translateX(3px)
}

.label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: var(--step--1);
    font-weight: 660;
    line-height: 1.2;
    color: var(--a-text, var(--ink));
    text-decoration: none
}

.label::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    background: var(--a1, var(--copper));
    border-radius: 2px 2px 2px 0.6rem;
    flex: none;
    transition: border-radius var(--t-mid) var(--ease-out), transform var(--t-mid) var(--ease-out)
}

a.label {
    width: fit-content;
    max-width: 100%;
    min-height: 1.5rem;
    margin-block: -0.225rem
}

a.label:hover::before {
    border-radius: 2px;
    transform: rotate(90deg)
}

a.label:hover {
    text-decoration: underline
}

.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.22rem 0.65rem;
    border-radius: var(--r-pill);
    background: var(--sage-wash);
    color: var(--sage-deep);
    font-size: var(--step--2);
    font-weight: 640;
    line-height: 1.4;
    white-space: nowrap
}

.pill--copper {
    background: var(--copper-wash);
    color: var(--copper-deep)
}

.pill--brass {
    background: var(--brass-wash);
    color: var(--brass-deep)
}

.pill--plain {
    background: var(--sand);
    color: var(--ink-2)
}

.cover {
    position: relative;
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    border-radius: var(--r-tile);
    background: var(--a-wash, var(--sand))
}

.cover--wide {
    aspect-ratio: 16 / 9
}

.cover--square {
    aspect-ratio: 1
}

.cover img,
.cover .cover-art {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--t-slow) var(--ease-out)
}

.cover-art .c1 {
    fill: var(--a1, var(--copper))
}

.cover-art .c2 {
    fill: var(--a2, var(--ink))
}

.cover-art .c3 {
    fill: var(--a3, var(--sage))
}

.card {
    position: relative;
    display: grid;
    gap: 0.9rem;
    align-content: start
}

.card__body {
    display: grid;
    gap: 0.5rem;
    align-content: start
}

.card__title {
    font-size: var(--step-1);
    line-height: 1.2;
    letter-spacing: -0.012em
}

.card__title a {
    text-decoration: none;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
    transition: background-size var(--t-mid) var(--ease-out);
    padding-bottom: 1px
}

.card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1
}

.card:hover .card__title a,
.card__title a:focus-visible {
    background-size: 100% 1.5px
}

.card:hover .cover img,
.card:hover .cover .cover-art {
    transform: scale(1.045)
}

.card .label,
.card__meta a {
    position: relative;
    z-index: 2
}

.card__excerpt {
    color: var(--ink-2);
    font-size: 0.98rem;
    line-height: 1.5
}

.card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 0.9rem;
    color: var(--ink-3);
    font-size: var(--step--1)
}

.card__meta>*+*::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.8em;
    margin-right: 0.9rem;
    background: var(--line-strong);
    vertical-align: -0.05em
}

.card--row {
    grid-template-columns: minmax(5.5rem, 9rem) minmax(0, 1fr);
    gap: 1.1rem;
    align-items: start
}

.card--row .card__title {
    font-size: 1.12rem
}

.card--wide {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: clamp(1rem, 3vw, 2rem);
    align-items: center
}

.card--wide .card__title {
    font-size: var(--step-2)
}

.card--feature {
    gap: 1.25rem
}

.card--feature .card__title {
    font-size: var(--step-3);
    line-height: 1.1
}

.card--feature .card__excerpt {
    font-size: var(--step-0);
    max-width: 56ch
}

@media (max-width:34rem) {
    .card--wide {
        grid-template-columns: minmax(0, 1fr)
    }

    .card--row {
        grid-template-columns: 5.5rem minmax(0, 1fr);
        gap: 0.85rem
    }
}

.card-grid {
    display: grid;
    gap: clamp(2rem, 1.5rem + 2vw, 3rem) clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr))
}

.card-grid--2 {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr))
}

.crumbs {
    font-size: var(--step--1);
    color: var(--ink-3)
}

.crumbs ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0;
    list-style: none
}

.crumbs li {
    display: inline-flex;
    align-items: center
}

.crumbs li+li::before {
    content: "/";
    margin-inline: 0.55rem;
    color: var(--line-strong)
}

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

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

.crumbs [aria-current] {
    color: var(--ink-3)
}

.pagination {
    margin-top: clamp(2.5rem, 2rem + 2vw, 4rem)
}

.pagination ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem
}

.pagination a,
.pagination span {
    display: grid;
    place-items: center;
    min-width: 2.75rem;
    height: 2.75rem;
    padding: 0 0.7rem;
    border-radius: var(--r-control);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent
}

.pagination a {
    border-color: var(--line-strong);
    background: var(--paper);
    transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease
}

.pagination a:hover {
    border-color: var(--ink);
    background: var(--sage-wash)
}

.pagination [aria-current] {
    background: var(--ink);
    color: var(--ivory)
}

.pagination .pagination__gap {
    color: var(--ink-3);
    min-width: 1.5rem;
    padding: 0
}

.field {
    display: grid;
    gap: 0.4rem
}

.field+.field {
    margin-top: 1.15rem
}

.field__label {
    font-weight: 620;
    font-size: 0.97rem
}

.field__hint {
    font-size: var(--step--1);
    color: var(--ink-3)
}

.field__error {
    font-size: var(--step--1);
    color: var(--bad);
    font-weight: 560
}

.input,
.textarea,
.select {
    width: 100%;
    min-height: 2.9rem;
    padding: 0.6rem 0.85rem;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease
}

.textarea {
    min-height: 9rem;
    resize: vertical;
    line-height: 1.5
}

.select {
    appearance: none;
    padding-right: 2.4rem;
    background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
    background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.8rem) 50%;
    background-size: 0.36rem 0.36rem;
    background-repeat: no-repeat
}

.input:hover,
.textarea:hover,
.select:hover {
    border-color: var(--ink-3)
}

.input:focus,
.textarea:focus,
.select:focus {
    border-color: var(--ink);
    outline: none;
    box-shadow: 0 0 0 3px var(--sage-wash)
}

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

.input--mono,
.textarea--mono {
    font-family: var(--font-mono);
    font-size: 0.92rem
}

.check {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    cursor: pointer
}

.check input {
    width: 1.2rem;
    height: 1.2rem;
    margin: 0.2rem 0 0;
    accent-color: var(--copper-deep);
    flex: none
}

.field--trap {
    position: absolute !important;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.notice {
    display: flex;
    gap: 0.75rem;
    padding: 0.9rem 1.1rem;
    border-radius: var(--r-control);
    background: var(--sage-wash);
    border: 1px solid var(--mist);
    color: var(--ink)
}

.notice--success {
    background: var(--ok-wash);
    border-color: #B9D8C1
}

.notice--error {
    background: var(--bad-wash);
    border-color: #EDB9AE
}

.notice--warning {
    background: var(--warn-wash);
    border-color: #E6CF94
}

.notice .icon {
    margin-top: 0.15em
}

.notice ul {
    margin: 0.35rem 0 0 1.1rem
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem
}

.tag {
    display: inline-flex;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    background: var(--paper);
    font-size: var(--step--1);
    font-weight: 560;
    text-decoration: none;
    transition: background-color var(--t-fast) ease, border-color var(--t-fast) ease
}

.tag:hover {
    background: var(--sage-wash);
    border-color: var(--sage)
}

.empty {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: clamp(1.25rem, 4vw, 3rem);
    align-items: center;
    padding: clamp(1.5rem, 1rem + 3vw, 3rem);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-panel)
}

.empty__art {
    border-radius: var(--r-tile);
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--sage-wash)
}

.empty__art .cover-art {
    width: 100%;
    height: 100%
}

.empty__title {
    font-size: var(--step-2)
}

.empty__text {
    margin-top: 0.6rem;
    color: var(--ink-2);
    max-width: 52ch
}

.empty__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem
}

@media (max-width:36rem) {
    .empty {
        grid-template-columns: minmax(0, 1fr)
    }

    .empty__art {
        max-width: 8rem
    }
}

.prose {
    font-size: 1.125rem;
    line-height: 1.72;
    color: var(--ink)
}

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

.prose h2 {
    font-size: var(--step-3);
}

.prose h3 {
    font-size: var(--step-2);
    margin-top: 1.8em
}

.prose h4 {
    font-size: var(--step-1);
    margin-top: 1.6em
}

.prose h5,
.prose h6 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 700;
    margin-top: 1.5em
}

.prose h2+*,
.prose h3+*,
.prose h4+* {
    margin-top: 0.7em
}

.prose>:first-child {
    margin-top: 0
}

.prose a {
    color: var(--copper-deep);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, var(--copper) 55%, transparent);
    text-decoration-thickness: 0.08em;
    transition: text-decoration-color var(--t-fast) ease, color var(--t-fast) ease
}

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

.prose ul,
.prose ol {
    padding-left: 1.35em
}

.prose li+li {
    margin-top: 0.45em
}

.prose li::marker {
    color: var(--copper-deep);
    font-weight: 600
}

.prose strong,
.prose b {
    font-weight: 680
}

.prose blockquote {
    padding: 0.2rem 0 0.2rem 1.35rem;
    border-left: 3px solid var(--copper);
    font-family: var(--font-display);
    font-size: 1.22em;
    line-height: 1.45;
    color: var(--ink)
}

.prose blockquote>*+* {
    margin-top: 0.7em
}

.prose hr {
    border: 0;
    height: 1px;
    background: var(--line-strong);
    margin-block: 2.5em
}

.prose img {
    border-radius: var(--r-tile)
}

.prose figure {
    margin-block: 2em
}

.prose figcaption {
    margin-top: 0.6rem;
    font-size: var(--step--1);
    color: var(--ink-3);
    line-height: 1.5
}

.prose :not(pre)>code {
    padding: 0.12em 0.4em;
    background: var(--sand);
    border: 1px solid var(--line);
    border-radius: 5px;
    font-size: 0.86em;
    overflow-wrap: anywhere
}

.prose kbd {
    padding: 0.1em 0.4em;
    border: 1px solid var(--line-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    background: var(--paper);
    font-size: 0.82em
}

.prose pre {
    position: relative;
    padding: 1.1rem 1.25rem;
    background: var(--paper);
    border: 1px solid var(--line);
    border-left: 3px solid var(--sage);
    border-radius: var(--r-tile);
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.6;
    tab-size: 2
}

.prose pre code {
    font-size: inherit
}

.prose dt {
    font-weight: 680
}

.prose dd {
    margin: 0.2em 0 0.9em 1.25em
}

.table-scroll {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: var(--r-tile);
    background: var(--paper)
}

.table-scroll:focus-visible {
    outline-offset: 2px
}

.prose table {
    width: 100%;
    min-width: 30rem;
    font-size: 0.97rem;
    line-height: 1.45
}

.prose caption {
    caption-side: top;
    text-align: left;
    padding: 0.8rem 1rem 0.5rem;
    font-weight: 660;
    font-size: var(--step--1);
    color: var(--ink-2)
}

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

.prose thead th {
    background: var(--sand);
    font-weight: 680;
    white-space: nowrap
}

.prose tbody tr:last-child>* {
    border-bottom: 0
}

.prose tbody th {
    font-weight: 640
}

.faq {
    border-top: 1px solid var(--line-strong)
}

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

.faq__q {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 0;
    font-family: var(--font-display);
    font-weight: 560;
    font-size: var(--step-1);
    line-height: 1.3;
    cursor: pointer;
    list-style: none
}

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

.faq__q::after {
    content: "";
    flex: none;
    width: 0.7rem;
    height: 0.7rem;
    margin-top: 0.3rem;
    border-right: 2px solid var(--copper-deep);
    border-bottom: 2px solid var(--copper-deep);
    transform: rotate(45deg);
    transition: transform var(--t-mid) var(--ease-out)
}

.faq__item[open]>.faq__q::after {
    transform: rotate(-135deg) translate(-3px, -3px)
}

.faq__a {
    padding: 0 0 1.3rem;
    color: var(--ink-2);
    max-width: var(--measure)
}

.page-head {
    padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(1.5rem, 1rem + 2vw, 2.5rem)
}

.page-head__title {
    margin-top: 1rem;
    font-size: var(--step-4);
    max-width: 20ch
}

.page-head__text {
    margin-top: 1rem
}

.page-head__meta {
    margin-top: 1rem;
    color: var(--ink-3);
    font-size: var(--step--1)
}

.hero {
    padding-block: clamp(2rem, 1rem + 5vw, 5.5rem) clamp(2.5rem, 1.5rem + 5vw, 6rem)
}

.hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: center
}

.hero__title {
    font-size: var(--step-5);
    font-weight: 520;
    line-height: 1.02;
    letter-spacing: -0.032em;
    max-width: 15ch
}

.hero__text {
    margin-top: clamp(1.1rem, 0.8rem + 1vw, 1.75rem);
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--ink-2);
    max-width: 46ch
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: clamp(1.5rem, 1rem + 1.5vw, 2.25rem)
}

.hero__lead .card__title {
    font-size: var(--step-2);
    line-height: 1.16
}

.hero__lead .cover {
    box-shadow: var(--shadow-pop)
}

.hero__art {
    aspect-ratio: 6 / 5;
    border-radius: var(--r-tile);
    overflow: hidden;
    background: var(--sand);
    box-shadow: var(--shadow-pop)
}

.hero__art .cover-art {
    width: 100%;
    height: 100%
}

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

    .hero__title {
        max-width: 18ch
    }

    .hero__art {
        aspect-ratio: 16 / 9
    }
}

.picks__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2rem, 1rem + 4vw, 4.5rem);
    align-items: start
}

.picks__grid--single {
    grid-template-columns: minmax(0, 46rem)
}

.picks__list {
    display: grid
}

.picks__list>li {
    padding-block: 1.4rem;
    border-top: 1px solid var(--line)
}

.picks__list>li:first-child {
    padding-top: 0;
    border-top: 0
}

.picks__list>li:last-child {
    padding-bottom: 0
}

.picks__list .card__excerpt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.94rem
}

@media (max-width:54rem) {
    .picks__grid {
        grid-template-columns: minmax(0, 1fr)
    }
}

.bento {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem)
}

.bento__demo,
.bento__tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: clamp(1.25rem, 1rem + 1vw, 1.9rem);
    background: var(--paper);
    border: 1px solid color-mix(in srgb, var(--sage) 28%, transparent);
    border-radius: var(--r-panel)
}

.bento__demo {
    grid-column: span 6;
    grid-row: span 2;
    gap: 1rem;
    background: var(--ivory)
}

.bento__tile {
    grid-column: span 3;
    min-height: 11.5rem;
    text-decoration: none;
    transition: transform var(--t-mid) var(--ease-out), border-color var(--t-mid) ease, box-shadow var(--t-mid) ease
}

.bento__tile:nth-of-type(1) {
    grid-column: span 6
}

.bento__tile:nth-of-type(4) {
    grid-column: span 5
}

.bento__tile:nth-of-type(5) {
    grid-column: span 7
}

.bento--plain .bento__tile {
    grid-column: span 4
}

.bento__tile:hover {
    transform: translateY(-3px);
    border-color: var(--sage-deep);
    box-shadow: var(--shadow-pop)
}

.bento__icon {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 9px 9px 9px 1.4rem;
    background: var(--sage-wash);
    color: var(--sage-deep);
    transition: border-radius var(--t-mid) var(--ease-out), background-color var(--t-mid) ease, color var(--t-mid) ease
}

.bento__icon .icon {
    width: 1.4rem;
    height: 1.4rem
}

.bento__tile:hover .bento__icon {
    border-radius: 9px;
    background: var(--copper-deep);
    color: #fff
}

.bento__name {
    font-size: var(--step-1);
    line-height: 1.2
}

.bento__summary {
    color: var(--ink-2);
    font-size: 0.96rem;
    line-height: 1.5;
    max-width: 44ch
}

.bento__go {
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    color: var(--ink-3);
    transition: transform var(--t-mid) var(--ease-out), color var(--t-mid) ease
}

.bento__tile:hover .bento__go {
    transform: translate(2px, -2px);
    color: var(--copper-deep)
}

.bento__demo-head {
    display: flex;
    align-items: center;
    gap: 0.85rem
}

.bento__demo .bento__icon {
    background: var(--copper-wash);
    color: var(--copper-deep)
}

.bento__output {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    min-height: 4.25rem;
    padding: 0.9rem 1.1rem;
    background: var(--paper);
    border: 1px dashed var(--line-strong);
    border-radius: var(--r-control);
    font-family: var(--font-mono);
    font-size: clamp(0.95rem, 0.8rem + 0.7vw, 1.25rem);
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
    color: var(--ink-3)
}

.bento__output.is-filled {
    color: var(--ink);
    border-style: solid;
    border-color: var(--sage)
}

.bento__demo-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    margin-top: auto
}

.bento__demo-actions .text-link {
    margin-left: auto
}

@media (max-width:62rem) {
    .bento__demo {
        grid-column: 1 / -1;
        grid-row: auto
    }

    .bento__tile,
    .bento__tile:nth-of-type(n),
    .bento--plain .bento__tile {
        grid-column: span 6;
        min-height: 0
    }
}

@media (max-width:36rem) {

    .bento__tile,
    .bento__tile:nth-of-type(n),
    .bento--plain .bento__tile {
        grid-column: 1 / -1
    }

    .bento__demo-actions .text-link {
        margin-left: 0
    }
}

.latest {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(1.5rem, 1rem + 4vw, 5rem);
    align-items: start
}

.latest__head {
    position: sticky;
    top: calc(var(--header-h) + 2rem)
}

.latest__all {
    margin-top: 1.5rem
}

.ledger {
    border-top: 2px solid var(--ink)
}

.ledger__row {
    display: grid;
    grid-template-columns: 4.75rem minmax(0, 1fr) auto;
    gap: clamp(0.9rem, 2vw, 1.75rem);
    align-items: start;
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--line-strong);
    transition: background-color var(--t-mid) ease
}

.ledger__date {
    display: grid;
    line-height: 1.1
}

.ledger__day {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 520;
    letter-spacing: -0.03em
}

.ledger__month {
    margin-top: 0.3rem;
    font-size: var(--step--2);
    font-weight: 620;
    color: var(--ink-3)
}

.ledger__body {
    display: grid;
    gap: 0.45rem
}

.ledger__read {
    font-size: var(--step--1);
    color: var(--ink-3);
    white-space: nowrap;
    padding-top: 0.15rem
}

@media (max-width:54rem) {
    .latest {
        grid-template-columns: minmax(0, 1fr)
    }

    .latest__head {
        position: static
    }
}

@media (max-width:34rem) {
    .ledger__row {
        grid-template-columns: 3.4rem minmax(0, 1fr)
    }

    .ledger__read {
        grid-column: 2;
        padding-top: 0
    }

    .ledger__day {
        font-size: var(--step-2)
    }
}

.guides {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 0.5rem + 1.5vw, 1.75rem)
}

.guide {
    grid-template-rows: 1fr auto;
    gap: 1.5rem;
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    background: var(--paper);
    border-radius: var(--r-panel);
    border: 1px solid var(--line);
    transition: border-color var(--t-mid) ease, transform var(--t-mid) var(--ease-out)
}

.guide:hover {
    border-color: var(--a1);
    transform: translateY(-3px)
}

.guide__text {
    display: grid;
    gap: 0.6rem;
    align-content: start
}

.guide .card__title {
    font-size: var(--step-2);
    line-height: 1.15
}

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

    .guide {
        grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
        grid-template-rows: auto;
        align-items: center
    }
}

@media (max-width:36rem) {
    .guide {
        grid-template-columns: minmax(0, 1fr)
    }
}

.topics {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(1.5rem, 1rem + 4vw, 5rem);
    align-items: start
}

.topics__list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 clamp(1rem, 3vw, 2.5rem);
    border-top: 1px solid var(--line-strong)
}

.topic {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr);
    gap: 0.35rem 1rem;
    align-items: start;
    height: 100%;
    padding: 1.35rem 0.5rem 1.35rem 0;
    border-bottom: 1px solid var(--line-strong);
    text-decoration: none
}

.topic__glyph {
    grid-row: span 2;
    width: 3rem;
    height: 3rem;
    border-radius: var(--r-tile);
    overflow: hidden;
    background: var(--a-wash);
    transition: transform var(--t-mid) var(--ease-out)
}

.topic__glyph .cover-art {
    width: 100%;
    height: 100%
}

.topic:hover .topic__glyph {
    transform: rotate(90deg)
}

.topic__text {
    display: grid;
    gap: 0.25rem
}

.topic__name {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 560;
    letter-spacing: -0.012em;
    line-height: 1.2;
    background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
    transition: background-size var(--t-mid) var(--ease-out);
    justify-self: start;
    padding-bottom: 1px
}

.topic:hover .topic__name {
    background-size: 100% 1.5px
}

.topic__desc {
    color: var(--ink-2);
    font-size: 0.95rem;
    line-height: 1.45
}

.topic__count {
    grid-column: 2;
    font-size: var(--step--1);
    color: var(--a-text);
    font-weight: 620
}

@media (max-width:54rem) {
    .topics {
        grid-template-columns: minmax(0, 1fr)
    }
}

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

.read-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 3px;
    z-index: 80;
    pointer-events: none
}

.read-progress__bar {
    display: block;
    height: 100%;
    background: var(--copper);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform
}

.preview-bar {
    background: var(--warn-wash);
    border-bottom: 1px solid #E6CF94;
    padding-block: 0.7rem;
    font-size: 0.95rem
}

.preview-bar a {
    font-weight: 620;
    margin-left: 0.5rem
}

.article-head {
    padding-block: clamp(1.75rem, 1rem + 3vw, 3.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem)
}

.article-head__label {
    margin-top: 1.5rem
}

.article-head__title {
    margin-top: 0.9rem;
    font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.75rem);
    font-weight: 540;
    line-height: 1.05;
    letter-spacing: -0.028em;
}

.article-head__standfirst {
    margin-top: 1.25rem;
    font-size: var(--step-2);
    line-height: 1.4;
    color: var(--ink-2);
}

.byline {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-top: 1.75rem
}

.byline__avatar,
.author-card__avatar,
.profile__avatar {
    display: grid;
    place-items: center;
    flex: none;
    overflow: hidden;
    background: var(--a-wash, var(--sage-wash));
    color: var(--a-text, var(--sage-deep));
    font-family: var(--font-display);
    font-weight: 600;
    border-radius: 12px 12px 12px 50%
}

.byline__avatar {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.2rem
}

.byline__avatar img,
.author-card__avatar img,
.profile__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.byline__author {
    font-weight: 620;
    line-height: 1.3
}

.byline__author a {
    text-decoration-color: var(--line-strong)
}

.byline__author a:hover {
    text-decoration-color: currentColor
}

.byline__dates {
    display: flex;
    flex-wrap: wrap;
    gap: 0.1rem 0.9rem;
    color: var(--ink-3);
    font-size: var(--step--1);
    line-height: 1.5
}

.byline__dates>*+*::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 0.8em;
    margin-right: 0.9rem;
    background: var(--line-strong);
    vertical-align: -0.05em
}

.article-figure {
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem)
}

.article-figure .cover {
    border-radius: var(--r-tile)
}

.cover--banner {
    aspect-ratio: 4 / 1
}

.article-figure figcaption {
    margin-top: 0.65rem;
    font-size: var(--step--1);
    color: var(--ink-3)
}

@media (max-width:40rem) {
    .cover--banner {
        aspect-ratio: 5 / 2
    }
}

.article-layout {
    display: grid;
    grid-template-columns: 15rem minmax(0, 85ch);
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: start
}

.article-layout--plain {
    grid-template-columns: minmax(0, var(--measure));
    justify-content: center
}

.article-main>*+* {
    margin-top: clamp(2rem, 1.5rem + 1.5vw, 3rem)
}

.toc {
    position: sticky;
    top: calc(var(--header-h) + 1.5rem);
    max-height: calc(100vh - var(--header-h) - 3rem);
    overflow-y: auto;
    font-size: 0.94rem
}

.toc__title {
    font-family: var(--font-body);
    font-weight: 680;
    font-size: var(--step--1);
    color: var(--ink-3);
    padding-bottom: 0.75rem;
    list-style: none
}

.toc__title::-webkit-details-marker {
    display: none
}

.toc__list {
    border-left: 1px solid var(--line-strong)
}

.toc__item a {
    display: block;
    padding: 0.38rem 0 0.38rem 1rem;
    margin-left: -1px;
    border-left: 2px solid transparent;
    color: var(--ink-2);
    text-decoration: none;
    line-height: 1.35;
    transition: color var(--t-fast) ease, border-color var(--t-fast) ease
}

.toc__item--3 a {
    padding-left: 1.9rem;
    font-size: 0.9rem
}

.toc__item a:hover {
    color: var(--ink)
}

.toc__item a.is-active {
    color: var(--ink);
    font-weight: 620;
    border-left-color: var(--copper)
}

@media (min-width:62.01rem) {
    .toc__title {
        pointer-events: none
    }
}

@media (max-width:62rem) {
    .article-layout {
        grid-template-columns: minmax(0, var(--measure));
        justify-content: center
    }

    .toc {
        position: static;
        max-height: none;
        padding: 1rem 1.15rem;
        background: var(--paper);
        border: 1px solid var(--line);
        border-radius: var(--r-control)
    }

    .toc__title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 0;
        cursor: pointer;
        color: var(--ink);
        font-size: 1rem
    }

    .toc__title::after {
        content: "";
        width: 0.55rem;
        height: 0.55rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(45deg);
        transition: transform var(--t-mid) var(--ease-out)
    }

    .toc__details[open]>.toc__title {
        padding-bottom: 0.75rem
    }

    .toc__details[open]>.toc__title::after {
        transform: rotate(-135deg)
    }
}

.code-wrap {
    position: relative
}

.code-copy {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: var(--ivory);
    font-family: var(--font-body);
    font-size: var(--step--2);
    font-weight: 620;
    opacity: 0;
    transition: opacity var(--t-fast) ease, background-color var(--t-fast) ease
}

.code-wrap:hover .code-copy,
.code-copy:focus-visible,
.code-copy.is-done {
    opacity: 1
}

.code-copy:hover {
    background: var(--sage-wash)
}

.code-copy.is-done {
    color: var(--ok);
    border-color: var(--ok)
}

@media (hover:none) {
    .code-copy {
        opacity: 1
    }
}

.share {
    padding-top: 1.75rem;
    border-top: 1px solid var(--line-strong)
}

.share__title {
    font-family: var(--font-body);
    font-size: var(--step--1);
    font-weight: 680;
    color: var(--ink-3);
    letter-spacing: 0;
    margin-bottom: 0.85rem
}

.share__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem
}

.share__list .icon {
    width: 1.05em;
    height: 1.05em
}

.author-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.25rem;
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-panel)
}

.author-card__avatar {
    width: 4.5rem;
    height: 4.5rem;
    font-size: 1.9rem
}

.author-card__name {
    font-family: var(--font-display);
    font-size: var(--step-1);
    font-weight: 560
}

.author-card__name a {
    text-decoration: none
}

.author-card__name a:hover {
    text-decoration: underline
}

.author-card__role {
    color: var(--ink-3);
    font-size: var(--step--1)
}

.author-card__bio {
    margin-block: 0.6rem 0.85rem;
    color: var(--ink-2);
    font-size: 0.98rem
}

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

.post-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem
}

.post-nav__link {
    display: grid;
    gap: 0.4rem;
    align-content: start;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    text-decoration: none;
    transition: border-color var(--t-fast) ease, background-color var(--t-fast) ease
}

.post-nav__link:hover {
    border-color: var(--ink);
    background: var(--paper)
}

.post-nav__link--next {
    text-align: right;
    grid-column: 2
}

.post-nav__dir {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: var(--step--1);
    font-weight: 640;
    color: var(--ink-3)
}

.post-nav__link--next .post-nav__dir {
    justify-content: flex-end
}

.post-nav__dir .icon {
    width: 1em;
    height: 1em;
    transition: transform var(--t-mid) var(--ease-out)
}

.post-nav__link:hover .post-nav__dir .icon {
    transform: translateX(-3px)
}

.post-nav__link--next:hover .post-nav__dir .icon {
    transform: translateX(3px)
}

.post-nav__title {
    font-family: var(--font-display);
    font-weight: 540;
    line-height: 1.25
}

@media (max-width:34rem) {
    .post-nav {
        grid-template-columns: minmax(0, 1fr)
    }

    .post-nav__link--next {
        grid-column: 1
    }
}

@media print {

    .site-header,
    .site-footer,
    .read-progress,
    .toc,
    .share,
    .post-nav,
    .section--band,
    .skip-link,
    .preview-bar {
        display: none !important
    }

    body {
        background: #fff
    }

    .article-layout {
        display: block
    }

    .prose a {
        color: inherit
    }

    .prose a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 0.85em
    }
}

.page-head--band {
    background: var(--a-wash, var(--sand));
    border-bottom: 1px solid var(--line)
}

.page-head__split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 17rem);
    gap: clamp(1.5rem, 4vw, 4rem);
    align-items: center
}

.page-head__art {
    aspect-ratio: 4 / 3;
    border-radius: var(--r-tile);
    overflow: hidden;
    background: color-mix(in srgb, var(--paper) 55%, transparent)
}

.page-head__art .cover-art {
    width: 100%;
    height: 100%
}

.page-head__page {
    font-size: 0.45em;
    font-family: var(--font-body);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--ink-3);
    white-space: nowrap;
    vertical-align: middle
}

@media (max-width:46rem) {
    .page-head__split {
        grid-template-columns: minmax(0, 1fr)
    }

    .page-head__art {
        display: none
    }
}

.archive-lead {
    padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    border-bottom: 1px solid var(--line-strong)
}

.archive-lead .card--wide {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr)
}

.archive-lead .card__title {
    font-size: var(--step-3);
    line-height: 1.1
}

@media (max-width:44rem) {
    .archive-lead .card--wide {
        grid-template-columns: minmax(0, 1fr)
    }
}

.page-body {
    padding-bottom: 1rem
}

.page-updated {
    margin-top: 2.5rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line-strong);
    font-size: var(--step--1);
    color: var(--ink-3)
}

.contact {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(2rem, 1rem + 5vw, 6rem);
    align-items: start
}

.contact__notes {
    display: grid;
    gap: 0.85rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line-strong);
    color: var(--ink-2);
    font-size: 0.98rem
}

.contact__notes li {
    display: flex;
    gap: 0.75rem
}

.contact__notes .icon {
    margin-top: 0.2em;
    color: var(--sage-deep)
}

.contact__form {
    padding: clamp(1.25rem, 1rem + 2vw, 2.25rem);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    scroll-margin-top: calc(var(--header-h) + 1.5rem)
}

.contact__form .notice {
    margin-bottom: 1.25rem
}

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

.search-form {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.5rem;
    max-width: 40rem
}

.search-form__input {
    flex: 1 1 auto;
    min-width: 0;
    height: 3.2rem;
    font-size: 1.05rem
}

.search-form .btn {
    flex: none
}

@media (max-width:30rem) {
    .search-form {
        flex-direction: column
    }
}

.results {
    border-top: 2px solid var(--ink)
}

.result {
    padding-block: 1.6rem;
    border-bottom: 1px solid var(--line-strong);
    gap: 0.5rem
}

.result .card__title {
    font-size: var(--step-2)
}

.result .card__excerpt {
    max-width: 62ch
}

.profile {
    display: flex;
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: flex-start;
    margin-top: 1.5rem
}

.profile__avatar {
    width: 7rem;
    height: 7rem;
    font-size: 3rem;
    border-radius: 20px 20px 20px 50%;
    background: var(--paper)
}

.profile__name {
    margin-top: 0
}

.profile__role {
    margin-top: 0.4rem;
    font-weight: 620;
    color: var(--a-text)
}

.profile__bio {
    margin-top: 0.9rem;
    color: var(--ink-2);
    max-width: 60ch
}

.profile__link {
    margin-top: 1rem
}

@media (max-width:34rem) {
    .profile {
        flex-direction: column
    }

    .profile__avatar {
        width: 5rem;
        height: 5rem;
        font-size: 2.2rem
    }
}

.error-page {
    padding-block: clamp(3rem, 2rem + 6vw, 7rem)
}

.error-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
    gap: clamp(2rem, 1rem + 5vw, 6rem);
    align-items: center
}

.error-page__art {
    aspect-ratio: 1;
    border-radius: var(--r-tile);
    overflow: hidden;
    background: var(--a-wash)
}

.error-page__art .cover-art {
    width: 100%;
    height: 100%
}

.error-page__code {
    font-weight: 660;
    color: var(--copper-deep);
    font-size: var(--step--1)
}

.error-page__title {
    margin-block: 0.75rem 1rem;
    font-size: var(--step-4);
    max-width: 18ch
}

.error-page .search-form {
    margin-top: 2rem
}

.error-page .empty__actions {
    margin-top: 1.75rem
}

.error-page__topics {
    margin-top: 2rem
}

@media (max-width:46rem) {
    .error-page__grid {
        grid-template-columns: minmax(0, 1fr)
    }

    .error-page__art {
        max-width: 9rem
    }
}

.tools-index {
    padding-top: clamp(1.5rem, 1rem + 2vw, 3rem)
}

.tool-group+.tool-group {
    margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem)
}

.tool-group__title {
    font-size: var(--step-2);
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 2px solid var(--ink)
}

.tool-group__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
    gap: clamp(0.75rem, 0.5rem + 1vw, 1.25rem)
}

.tool-group__list>li {
    display: grid
}

.tool-card {
    min-height: 10.5rem
}

.tool-private {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 1.1rem;
    padding: 0.45rem 0.9rem 0.45rem 0.7rem;
    background: var(--ok-wash);
    color: var(--ok);
    border-radius: var(--r-pill);
    font-size: var(--step--1);
    font-weight: 600;
    line-height: 1.4
}

.tool-private .icon {
    margin-top: 0.1em
}

.tool-panel {
    padding: clamp(1rem, 0.6rem + 2vw, 2.25rem);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    box-shadow: 0 24px 50px -40px rgba(30, 41, 39, 0.45)
}

.tool-panel noscript .notice {
    margin-bottom: 1.25rem
}

.tool {
    display: grid;
    gap: 1.25rem
}

.tool--split {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: clamp(1.25rem, 1rem + 2vw, 2.5rem);
    align-items: start
}

.tool__main,
.tool__side {
    display: grid;
    gap: 1.1rem;
    align-content: start;
    min-width: 0
}

.tool__textarea {
    min-height: 14rem
}

.tool__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem
}

.tool__note {
    font-size: var(--step--1);
    color: var(--ink-3);
    margin-left: 0.25rem
}

.tool__toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem
}

.tool__spacer {
    flex: 1 1 0
}

.tool__inline-field {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    font-weight: 600
}

.tool__inline-field .select {
    min-height: 2.35rem;
    padding-block: 0.3rem;
    width: auto
}

.tool__cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    align-items: start
}

.tool__cols .field+.field {
    margin-top: 0
}

.tool__subhead {
    font-family: var(--font-body);
    font-size: 0.97rem;
    font-weight: 660;
    letter-spacing: 0;
    margin-top: 0.5rem
}

.tool__choices {
    display: grid;
    gap: 0.6rem
}

.tool__choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem
}

.tool__options {
    display: grid;
    gap: 1.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line)
}

.tool__options .field+.field {
    margin-top: 0
}

.tool__status {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.75rem 1rem;
    border-radius: var(--r-control);
    background: var(--sand);
    color: var(--ink-2);
    font-size: 0.97rem;
    line-height: 1.45;
    overflow-wrap: anywhere
}

.tool__status .icon {
    margin-top: 0.12em
}

.tool__status[data-state="ok"] {
    background: var(--ok-wash);
    color: var(--ok)
}

.tool__status[data-state="error"] {
    background: var(--bad-wash);
    color: var(--bad)
}

.tool__status[data-state="warn"] {
    background: var(--warn-wash);
    color: var(--warn)
}

.tool__status strong {
    font-weight: 680
}

@media (max-width:54rem) {

    .tool--split,
    .tool__cols {
        grid-template-columns: minmax(0, 1fr)
    }
}

.stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem
}

.stat {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    grid-column: 1 / -1;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--line)
}

.stat dt {
    color: var(--ink-2);
    font-size: 0.97rem
}

.stat dd {
    margin: 0;
    font-weight: 660;
    font-variant-numeric: tabular-nums;
    text-align: right
}

.stat--lead {
    grid-column: auto;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 0.1rem;
    padding: 1rem 1.1rem;
    background: var(--sage-wash);
    border: 0;
    border-radius: var(--r-control)
}

.stat--lead dt {
    font-size: var(--step--1);
    font-weight: 620;
    color: var(--sage-deep)
}

.stat--lead dd {
    font-family: var(--font-display);
    font-size: var(--step-3);
    font-weight: 540;
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-align: left
}

.input-suffix {
    display: flex;
    align-items: center;
    gap: 0.6rem
}

.input-suffix .input {
    width: 6.5rem;
    flex: none
}

.input-suffix span {
    color: var(--ink-2);
    font-size: 0.95rem
}

.pw {
    display: grid;
    gap: 0.85rem
}

.pw__output {
    display: flex;
    align-items: center;
    min-height: 5rem;
    padding: 1rem 1.25rem;
    background: var(--ivory);
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    font-family: var(--font-mono);
    font-size: clamp(1.05rem, 0.8rem + 1.4vw, 1.6rem);
    letter-spacing: 0.03em;
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-all;
    user-select: all
}

.pw__meter {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.35rem
}

.pw__meter span {
    height: 0.4rem;
    border-radius: var(--r-pill);
    background: var(--line);
    transition: background-color var(--t-mid) ease
}

.pw__meter[data-level="1"] span:nth-child(-n + 1) {
    background: var(--bad)
}

.pw__meter[data-level="2"] span:nth-child(-n + 2) {
    background: var(--brass)
}

.pw__meter[data-level="3"] span:nth-child(-n + 3) {
    background: var(--sage)
}

.pw__meter[data-level="4"] span {
    background: var(--ok)
}

.pw__strength {
    font-size: 0.97rem;
    color: var(--ink-2)
}

.pw__strength strong {
    color: var(--ink)
}

.range-row {
    display: flex;
    align-items: center;
    gap: 1rem
}

.range-row__number {
    width: 5.5rem;
    flex: none
}

.range {
    flex: 1 1 auto;
    min-width: 0;
    height: 2.9rem;
    accent-color: var(--copper-deep);
    cursor: pointer
}

.check-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem 1.5rem
}

@media (max-width:34rem) {
    .check-grid {
        grid-template-columns: minmax(0, 1fr)
    }
}

.color-fields {
    display: grid;
    gap: 1.1rem
}

.color-fields .field+.field {
    margin-top: 0
}

.color-hex {
    display: flex;
    gap: 0.6rem
}

.color-hex__picker {
    width: 2.9rem;
    height: 2.9rem;
    flex: none;
    padding: 0;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    background: var(--paper);
    cursor: pointer
}

.color-hex__picker::-webkit-color-swatch-wrapper {
    padding: 3px
}

.color-hex__picker::-webkit-color-swatch {
    border: 0;
    border-radius: 6px
}

.color-hex__picker::-moz-color-swatch {
    border: 0;
    border-radius: 6px
}

.rgb-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.6rem;
    margin-top: 0.4rem
}

.rgb-row__item {
    display: grid;
    gap: 0.25rem;
    font-size: var(--step--1);
    color: var(--ink-2);
    font-weight: 560
}

.copy-list {
    display: grid
}

.copy-list li {
    display: grid;
    grid-template-columns: 3rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.55rem 0;
    border-top: 1px solid var(--line)
}

.copy-list li:last-child {
    border-bottom: 1px solid var(--line)
}

.copy-list__label {
    font-size: var(--step--1);
    font-weight: 660;
    color: var(--ink-3)
}

.copy-list code {
    font-size: 0.98rem;
    overflow-wrap: anywhere
}

.swatch {
    display: grid;
    grid-template-rows: 1fr 1fr;
    min-height: 12rem;
    border-radius: var(--r-control);
    overflow: hidden;
    border: 1px solid var(--line-strong);
    background: var(--copper);
    transition: background-color var(--t-mid) ease
}

.swatch__sample {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 560
}

.swatch__sample--white {
    color: #fff
}

.swatch__sample--black {
    color: #000
}

.contrast-list {
    display: grid;
    margin-top: 0.85rem
}

.contrast-list>div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.2rem 1rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--line)
}

.contrast-list>div:last-child {
    border-bottom: 1px solid var(--line)
}

.contrast-list dt {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--ink-2)
}

.contrast-list dd {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    color: var(--ink)
}

.meta-count {
    display: flex;
    align-items: center;
    gap: 0.6rem
}

.pill[data-state="good"] {
    background: var(--ok-wash);
    color: var(--ok)
}

.pill[data-state="warn"] {
    background: var(--warn-wash);
    color: var(--warn)
}

.segmented {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem
}

.segmented legend {
    float: left;
    margin-right: 0.25rem
}

.segmented label {
    position: relative;
    cursor: pointer
}

.segmented input {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer
}

.segmented label span {
    display: inline-flex;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-pill);
    font-size: 0.92rem;
    font-weight: 600;
    transition: background-color var(--t-fast) ease, color var(--t-fast) ease, border-color var(--t-fast) ease
}

.segmented input:checked+span {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--ivory)
}

.segmented input:focus-visible+span {
    outline: 2px solid var(--ink);
    outline-offset: 3px
}

.serp {
    padding: 1.1rem 1.25rem;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: var(--r-control);
    font-family: Arial, Helvetica, sans-serif;
    max-width: 100%;
    overflow: hidden
}

.serp__source {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.45rem
}

.serp__favicon {
    width: 1.75rem;
    height: 1.75rem;
    flex: none;
    border-radius: 50%;
    background: var(--sand);
    border: 1px solid var(--line)
}

.serp__site {
    display: grid;
    min-width: 0;
    line-height: 1.3
}

.serp__name {
    font-size: 0.875rem;
    color: #202124
}

.serp__url {
    font-size: 0.75rem;
    color: #4d5156;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.serp__title {
    font-size: 1.25rem;
    line-height: 1.3;
    color: #1a0dab;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.serp__description {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    line-height: 1.58;
    color: #4d5156;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden
}

.serp[data-device="mobile"] {
    max-width: 23rem
}

.serp[data-device="mobile"] .serp__title {
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 1.125rem
}

.serp[data-device="mobile"] .serp__description {
    -webkit-line-clamp: 3
}

.serp .is-placeholder {
    color: #5f6368;
    font-style: italic
}

.code-out {
    padding: 0.9rem 1rem;
    background: var(--ivory);
    border: 1px solid var(--line);
    border-left: 3px solid var(--sage);
    border-radius: var(--r-tile);
    overflow-x: auto;
    font-size: 0.85rem;
    line-height: 1.6;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    min-height: 4.5rem
}

.tool-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(2rem, 1rem + 4vw, 5rem);
    align-items: start;
    padding-block: var(--section)
}

.tool-info__block>h2 {
    font-size: var(--step-2);
    margin-bottom: 1.25rem
}

.tool-info__block .prose {
    font-size: 1.05rem
}

@media (max-width:54rem) {
    .tool-info {
        grid-template-columns: minmax(0, 1fr)
    }
}

.suite-tool__form {
    align-content: start
}

.suite-tool__form .field+.field {
    margin-top: 0
}

.suite-tool__form .field {
    min-width: 0
}

.suite-tool__form .field__label {
    display: block;
    margin-bottom: 0.35rem
}

.suite-tool__input {
    width: 100%;
    max-width: 100%
}

.suite-tool__form .suite-tool__input[type="number"] {
    max-width: 15rem
}

.suite-tool__form .suite-tool__input[type="password"] {
    font-family: var(--font-mono)
}

.suite-tool__check {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    cursor: pointer;
    color: var(--ink-2);
    line-height: 1.45;
    font-size: 0.96rem
}

.suite-tool__check input {
    margin-top: 0.33em;
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--copper-deep);
    flex: none
}

.suite-tool__result {
    min-height: 16rem;
    width: 100%;
    font-family: var(--font-mono);
    font-size: 0.87rem;
    line-height: 1.65;
    white-space: pre;
    overflow: auto
}

.suite-tool__preview {
    overflow: hidden;
    background: var(--ivory);
    border: 1px solid var(--line);
    padding: 1rem;
    border-radius: var(--r-control)
}

.suite-tool__preview[hidden] {
    display: none
}

.suite-tool__palette {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.4rem
}

.suite-tool__palette>div {
    display: grid;
    gap: 0.4rem;
    min-width: 0;
    text-align: center
}

.suite-tool__swatch {
    display: block;
    height: 6rem;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 0.35rem
}

.suite-tool__palette code {
    font-size: clamp(0.58rem, 0.8vw, 0.8rem);
    white-space: normal;
    overflow-wrap: anywhere
}

.suite-tool__sample {
    font-weight: 650;
    font-size: 1.7rem;
    padding: 2rem 1rem;
    border-radius: var(--r-control);
    text-align: center
}

.suite-tool__gradient {
    height: 9rem;
    border-radius: var(--r-control)
}

.suite-tool__shadow {
    margin: 1.8rem auto;
    max-width: 12rem;
    min-height: 7rem;
    display: grid;
    place-items: center;
    background: var(--paper);
    border-radius: var(--r-control);
    color: var(--ink)
}

@media (max-width:39rem) {
    .suite-tool__palette {
        grid-template-columns: repeat(5, minmax(0, 1fr))
    }

    .suite-tool__swatch {
        height: 3.5rem
    }
}

@keyframes rise {
    from {
        opacity: 0;
        transform: translateY(18px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes tile-in {
    from {
        opacity: 0;
        transform: scale(0.9)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes pop {
    0% {
        transform: scale(1)
    }

    45% {
        transform: scale(1.06)
    }

    100% {
        transform: scale(1)
    }
}

.hero__title,
.hero__text,
.hero__actions,
.hero__lead .cover,
.hero__lead .card__body,
.hero__art {
    animation: rise var(--t-slow) var(--ease-out) both
}

.hero__text {
    animation-delay: 80ms
}

.hero__actions {
    animation-delay: 160ms
}

.hero__lead .cover,
.hero__art {
    animation-delay: 120ms
}

.hero__lead .card__body {
    animation-delay: 240ms
}

.hero .cover-art path {
    animation: tile-in 760ms var(--ease-out) both;
    transform-box: fill-box;
    transform-origin: center
}

.hero .cover-art .c1 {
    animation-delay: 280ms
}

.hero .cover-art .c2 {
    animation-delay: 400ms
}

.hero .cover-art .c3 {
    animation-delay: 520ms
}

.page-head>.wrap>*,
.article-head>.wrap>* {
    animation: rise 520ms var(--ease-out) both
}

.page-head>.wrap>:nth-child(2),
.article-head>.wrap>:nth-child(2) {
    animation-delay: 60ms
}

.page-head>.wrap>:nth-child(3),
.article-head>.wrap>:nth-child(3) {
    animation-delay: 120ms
}

.page-head>.wrap>:nth-child(n + 4),
.article-head>.wrap>:nth-child(n + 4) {
    animation-delay: 180ms
}

.reveal-ready,
.reveal-ready[data-reveal="group"]>* {
    opacity: 0;
    transform: translateY(22px)
}

.reveal-ready[data-reveal="group"] {
    opacity: 1;
    transform: none
}

.reveal-ready.is-revealed,
.reveal-ready.is-revealed[data-reveal="group"]>* {
    opacity: 1;
    transform: none;
    transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out)
}

.reveal-ready.is-revealed[data-reveal="group"]>:nth-child(2) {
    transition-delay: 70ms
}

.reveal-ready.is-revealed[data-reveal="group"]>:nth-child(3) {
    transition-delay: 140ms
}

.reveal-ready.is-revealed[data-reveal="group"]>:nth-child(4) {
    transition-delay: 210ms
}

.reveal-ready.is-revealed[data-reveal="group"]>:nth-child(5) {
    transition-delay: 280ms
}

.reveal-ready.is-revealed[data-reveal="group"]>:nth-child(n + 6) {
    transition-delay: 350ms
}

.is-popped {
    animation: pop 320ms var(--ease-out)
}

.flash-value {
    animation: rise 260ms var(--ease-out)
}

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

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0s !important
    }

    .reveal-ready,
    .reveal-ready[data-reveal="group"]>* {
        opacity: 1;
        transform: none
    }
}