
:root {
    --ground:#e9edf1;
    --surface:#dadee3;
    --surface-2:#c7ccd2;
    --line:#a5aaae;
    --ink-soft:#4a4d51;
    --ink:#27292b;
    --accent:#2f7f8a;
    --accent-ink:#fff;
    --accent-hover:#266871;
    --accent-active:#1e525a;
    --accent-focus-ring:rgba(47, 127, 138, 0.45);
    --surface-hover:#d1d6dc;
    --surface-2-hover:#bdc3c9;
    --fumo-8d2:'Syne', 'Syne Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fumo-525:'Archivo', "Archivo Fallback", -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fumo-343:'Space Mono', "Space Mono Fallback", SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --text-xs:clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
    --text-sm:clamp(0.8438rem, 0.81rem + 0.18vw, 0.9375rem);
    --text-base:clamp(0.9688rem, 0.92rem + 0.25vw, 1.0625rem);
    --text-md:clamp(1.0938rem, 1.02rem + 0.38vw, 1.25rem);
    --text-lg:clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --text-xl:clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
    --text-2xl:clamp(1.875rem, 1.62rem + 1.25vw, 2.5rem);
    --text-3xl:clamp(2.25rem, 1.9rem + 1.8vw, 3.25rem);
    --text-display:clamp(2.625rem, 2.1rem + 2.7vw, 4.25rem);
    --text-spread:clamp(3rem, 2.3rem + 3.8vw, 5.5rem);
    --space-2xs:clamp(0.25rem, 0.22rem + 0.15vw, 0.375rem);
    --space-xs:clamp(0.5rem, 0.45rem + 0.25vw, 0.625rem);
    --space-sm:clamp(0.75rem, 0.68rem + 0.35vw, 1rem);
    --space-md:clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
    --space-lg:clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
    --space-xl:clamp(2.5rem, 2rem + 2vw, 4rem);
    --space-2xl:clamp(3.5rem, 2.8rem + 3.2vw, 6rem);
    --space-3xl:clamp(4.5rem, 3.5rem + 4.5vw, 8rem);
    --container-max:1440px;
    --gutter:clamp(1rem, 0.8rem + 1.5vw, 2.5rem);
    --gutter-outer:clamp(1rem, 0.6rem + 2vw, 3.5rem);
    --header-condensed-h:56px;
    --dock-h:64px;
    --dock-safe-h:calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
    --duration-micro:140ms;
    --duration-short:200ms;
    --duration-medium:320ms;
    --duration-slow:480ms;
    --ease-out:cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:cubic-bezier(0.65, 0, 0.35, 1);
    --ease-settle:cubic-bezier(0.25, 1, 0.5, 1);
    --measure-prose:62ch;
    --measure-narrow:46ch;
}

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

html {
    background-color:var(--ground);
    color:var(--ink);
    font-family:var(--fumo-525);
    font-size:16px;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
    scroll-behavior:smooth;
    scroll-padding-top:var(--header-condensed-h);
}

body {
    background-color:var(--ground);
    color:var(--ink);
    font-family:var(--fumo-525);
    font-size:var(--text-base);
    line-height:1.55;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    padding-bottom:var(--dock-safe-h);
    overflow-x:hidden;
}

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

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

button, input, select, textarea {

    font:inherit;
    color:inherit;
    letter-spacing:inherit;
}

h1, h2, h3, h4, h5, h6 {
    font-family:var(--fumo-8d2);
    font-weight:800;
    line-height:1.08;
    color:var(--ink);
    letter-spacing:-0.025em;
    text-wrap:balance;
}

h1 {
    font-size:var(--text-display);
    letter-spacing:-0.035em;
    line-height:1.02;
}

h2 {
    font-size:var(--text-2xl);
    line-height:1.1;
    letter-spacing:-0.03em;
}

h3 {
    font-size:var(--text-xl);
    line-height:1.18;
    letter-spacing:-0.02em;
}

@media (max-width: 480px) {
    .card-title,
    .held-title,
    .spine-stage-title,
    .format-card-title {
        font-size:clamp(1.125rem, 5vw, 1.35rem);
        hyphens:manual;
        word-break:normal;
    }
}

h4 {
    font-size:var(--text-lg);
    line-height:1.25;
}

h5 {
    font-size:var(--text-md);
    font-weight:700;
    line-height:1.3;
}

h6 {
    font-size:var(--text-base);
    font-weight:700;
    line-height:1.35;
}

p {
    max-width:var(--measure-prose);
    color:var(--ink);
}

p.lede, .lede {
    font-size:var(--text-lg);
    line-height:1.45;
    color:var(--ink);
    max-width:54ch;
    font-weight:400;
}

p.standfirst, .standfirst {
    font-size:var(--text-md);
    line-height:1.5;
    color:var(--ink-soft);
    max-width:52ch;
}

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

.mono {
    font-family:var(--fumo-343);
    font-variant-numeric:tabular-nums;
    letter-spacing:-0.01em;
}

.numeral, .price, .figure, .tabular {
    font-family:var(--fumo-343);
    font-variant-numeric:tabular-nums;
}

a {
    color:var(--ink);
    text-decoration:underline;
    text-decoration-thickness:1px;
    text-underline-offset:3px;
    transition:color var(--duration-micro) var(--ease-out), text-decoration-color var(--duration-micro) var(--ease-out);

}

a:hover {
    color:var(--accent);
    text-decoration-color:var(--accent);
}

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

ul, ol {
    padding-left:1.25rem;
}

li {
    max-width:var(--measure-prose);
}

hr {
    border:0;
    border-top:1px solid var(--line);
    margin:var(--space-lg) 0;
}

blockquote {
    border-left:2px solid var(--ink);
    padding-left:var(--space-md);
    font-size:var(--text-md);
    line-height:1.45;
    color:var(--ink);
    max-width:var(--measure-prose);
}

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

.skip-link {
    position:absolute;
    top:-120px;
    left:1rem;
    z-index:1000;
    background:var(--ink);
    color:var(--accent-ink);
    padding:0.75rem 1.25rem;
    font-weight:600;
    font-size:var(--text-sm);
    text-decoration:none;
    border:1px solid var(--line);
    transition:top var(--duration-micro) var(--ease-out);
}

.skip-link:focus {
    top:1rem;
    outline:2px solid var(--accent);
    outline-offset:2px;
}

.site-wrap {
    width:100%;
    max-width:var(--container-max);
    margin-left:auto;
    margin-right:auto;
    padding-left:var(--gutter-outer);
    padding-right:var(--gutter-outer);
}

.site-wrap-bleed {
    width:100%;
    padding-left:0;
    padding-right:0;
}

.grid-modular {
    display:grid;
    grid-template-columns:repeat(12, minmax(0, 1fr));
    gap:var(--gutter);
}

.held-layout {
    display:grid;
    grid-template-columns:1fr;
    gap:var(--space-lg);
    border-top:1px solid var(--line);
    padding-top:var(--space-xl);
    padding-bottom:var(--space-2xl);
}

@media (min-width: 900px) {
    .held-layout {
        grid-template-columns:minmax(320px, 4.5fr) minmax(360px, 7.5fr);
        gap:var(--gutter-outer);
        align-items:start;
    }

    .held-column {
        position:sticky;
        top:calc(var(--header-condensed-h) + var(--space-lg));
        align-self:start;
        padding-right:var(--space-md);
        min-width:0;
    }
}

.scrolling-body {
    min-width:0;
    display:flex;
    flex-direction:column;
    gap:var(--space-xl);
}

.icon {
    width:1.25rem;
    height:1.25rem;
    fill:none;
    stroke:currentColor;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    display:inline-block;
    vertical-align:middle;
    flex-shrink:0;
}

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

    white-space:nowrap !important;
    border:0 !important;
}

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