@font-face {
    font-family: "Montserrat";
    src: url("/fonts/Montserrat-Bold.woff2") format("woff2");
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

:root {
    color-scheme: dark;

    /* Shared brand, interaction and audience tokens. */
    --ds-on-accent: #11100d;
    --ds-font-sans: var(--ds-font-body);
    --ds-control-height: 3rem;
    --ds-control-padding: 0.75rem 1rem;
    --ds-control-weight: 700;
    --ds-section-space: clamp(2.75rem, 6vw, 5.5rem);
    --ds-font-editorial-h1: clamp(2.35rem, 6vw, 4.6rem);
    --ds-font-editorial-h2: clamp(1.45rem, 3vw, 2rem);
    --ds-brand-size: 0.9375rem;
    --ds-brand-tracking: 0.01em;
    --ds-logo-size: 1.75rem;

    --ds-audience-children: #c18a35;
    --ds-audience-children-bright: #dfb263;
    --ds-audience-youth: #b56d81;
    --ds-audience-youth-bright: #d494a5;
    --ds-audience-adults: #6f8794;
    --ds-audience-adults-bright: #9bb0ba;
    --ds-audience-blog: #6f9278;

    --ds-light-bg: #f6f1e9;
    --ds-light-bg-elevated: #fbf8f3;
    --ds-light-surface: #fffdf9;
    --ds-light-surface-2: #eee5d8;
    --ds-light-surface-3: #e4d8c8;
    --ds-light-text: #1d1914;
    --ds-light-text-soft: #51483e;
    --ds-light-text-muted: #6d6256;
    --ds-light-gold: #795617;
    --ds-light-gold-bright: #5f4211;
    --ds-light-gold-deep: #8b6b2e;
    --ds-light-children: #8a570d;
    --ds-light-children-bright: #684006;
    --ds-light-youth: #7c3b4e;
    --ds-light-youth-bright: #5d2938;
    --ds-light-adults: #465e6a;
    --ds-light-adults-bright: #304650;
    --ds-light-blog: #3e6247;

    --ds-bg: #0a0908;
    --ds-bg-elevated: #0f0e0c;
    --ds-surface: #151310;
    --ds-surface-2: #1c1915;
    --ds-surface-3: #242019;

    --ds-text: #f8f3e9;
    --ds-text-soft: #d0c6b7;
    --ds-text-muted: #aaa092;

    --ds-gold: #d9b96f;
    --ds-gold-bright: #f0d28b;
    --ds-gold-deep: #8c6c35;

    --ds-accent: var(--ds-gold);
    --ds-accent-bright: var(--ds-gold-bright);
    --ds-accent-soft: rgba(217, 185, 111, 0.12);

    --ds-border: rgba(217, 185, 111, 0.24);
    --ds-border-strong: rgba(217, 185, 111, 0.48);

    --ds-focus: #ffd98b;
    --ds-danger: #ffb4ab;
    --ds-success: #9fd5b2;

    --ds-shadow-sm: 0 0.55rem 1.6rem rgba(0, 0, 0, 0.22);
    --ds-shadow-md: 0 1.25rem 3.5rem rgba(0, 0, 0, 0.32);
    --ds-shadow-lg: 0 2rem 6rem rgba(0, 0, 0, 0.46);

    --ds-radius-sm: 0.625rem;
    --ds-radius-md: 0.95rem;
    --ds-radius-lg: 1.35rem;
    --ds-radius-pill: 999px;

    --ds-touch: 44px;
    --ds-container: 75rem;
    --ds-reading: 68ch;
    --ds-header-mobile: 3.75rem;
    --ds-header-desktop: 4.25rem;

    --ds-space-1: 0.25rem;
    --ds-space-2: 0.5rem;
    --ds-space-3: 0.75rem;
    --ds-space-4: 1rem;
    --ds-space-5: 1.5rem;
    --ds-space-6: 2rem;
    --ds-space-7: 3rem;
    --ds-space-8: 4rem;
    --ds-space-9: 6rem;

    --ds-font-body:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --ds-font-brand:
        "Montserrat",
        var(--ds-font-body);

    --ds-font-display:
        "Montserrat",
        var(--ds-font-body);

    --ds-font-editorial:
        Georgia,
        "Times New Roman",
        serif;

    --ds-font-display-size: clamp(2.55rem, 7vw, 5.2rem);
    --ds-font-h1: clamp(2rem, 5vw, 3.7rem);
    --ds-font-h2: clamp(1.5rem, 3vw, 2.25rem);
    --ds-font-h3: clamp(1.2rem, 2vw, 1.5rem);
    --ds-font-body-size: 1rem;
    --ds-font-small: 0.875rem;

    --ds-line-display: 1.02;
    --ds-line-heading: 1.12;
    --ds-line-body: 1.65;
    --ds-line-small: 1.5;

    --ds-motion-fast: 120ms;
    --ds-motion-normal: 220ms;
    --ds-motion-slow: 420ms;
    --ds-ease-standard: cubic-bezier(.2, .8, .2, 1);
    --ds-ease-emphasized: cubic-bezier(.2, 0, 0, 1);

    --ds-z-base: 0;
    --ds-z-sticky: 100;
    --ds-z-dropdown: 200;
    --ds-z-backdrop: 300;
    --ds-z-dialog: 400;
    --ds-z-toast: 500;

    --ds-page-gutter: 1rem;
}

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

html {
    min-block-size: 100%;
    background: var(--ds-bg);
    color: var(--ds-text);
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-padding-block-start: calc(var(--ds-header-mobile) + var(--ds-space-4));
    scroll-behavior: smooth;
}

body {
    min-block-size: 100vh;
    min-block-size: 100dvh;
    margin: 0;
    background: var(--ds-bg);
    color: var(--ds-text);
    font-family: var(--ds-font-body);
    font-size: var(--ds-font-body-size);
    line-height: var(--ds-line-body);
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    display: block;
    max-inline-size: 100%;
}

svg {
    flex: none;
}

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

button,
summary,
a {
    -webkit-tap-highlight-color: transparent;
}

button,
summary {
    touch-action: manipulation;
}

button {
    border: 0;
}

a {
    color: inherit;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.18em;
}

[hidden] {
    display: none !important;
}

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

::selection {
    background: var(--ds-accent);
    color: var(--ds-on-accent);
}

.sr-only {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 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;
}

.ds-icon {
    inline-size: 22px;
    block-size: 22px;
    stroke-width: 1.8;
}

.ds-icon--small {
    inline-size: 18px;
    block-size: 18px;
}

.ds-icon--large {
    inline-size: 24px;
    block-size: 24px;
}

.ds-icon-button {
    display: inline-grid;
    inline-size: var(--ds-touch);
    min-inline-size: var(--ds-touch);
    block-size: var(--ds-touch);
    min-block-size: var(--ds-touch);
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--ds-radius-pill);
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition:
        background-color var(--ds-motion-fast) var(--ds-ease-standard),
        border-color var(--ds-motion-fast) var(--ds-ease-standard),
        color var(--ds-motion-fast) var(--ds-ease-standard),
        transform var(--ds-motion-fast) var(--ds-ease-standard);
}

.ds-icon-button:hover {
    border-color: var(--ds-border);
    background: var(--ds-accent-soft);
}

.ds-icon-button:active {
    transform: translateY(1px);
}

.ds-inline-link {
    display: inline-flex;
    min-block-size: var(--ds-touch);
    align-items: center;
    gap: var(--ds-space-2);
}

@view-transition {
    navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 220ms;
    animation-timing-function: var(--ds-ease-standard);
}

@media (min-width: 24.5rem) {
    :root {
        --ds-page-gutter: 1.25rem;
    }
}

@media (min-width: 48rem) {
    :root {
        --ds-page-gutter: 2rem;
    }

    html {
        scroll-padding-block-start: calc(var(--ds-header-desktop) + var(--ds-space-4));
    }
}

@media (min-width: 80rem) {
    :root {
        --ds-page-gutter: clamp(2rem, 5vw, 5rem);
    }
}

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

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

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation-duration: 0.001ms !important;
    }
}

:where(button, .button-link, .public-book-offer) {
    transition: background-color var(--ds-motion-fast) var(--ds-ease-standard),
        border-color var(--ds-motion-fast) var(--ds-ease-standard),
        color var(--ds-motion-fast) var(--ds-ease-standard);
}

:where(button, input, select, textarea):disabled {
    cursor: not-allowed;
    opacity: 0.65;
}

.author-note { display:grid; gap:1.75rem; max-inline-size:65rem; margin:clamp(3rem,7vw,6rem) auto 2rem; padding:clamp(1.5rem,4vw,3rem); border:1px solid var(--ds-border); border-radius:var(--ds-radius-lg); background:var(--ds-surface); color:var(--ds-text); text-align:start; }
.author-note>img { inline-size:10rem; block-size:10rem; object-fit:cover; object-position:center 25%; border-radius:50%; border:1px solid var(--ds-border-strong); }
.author-note .author-note__label { font:700 .75rem/1.4 var(--ds-font-body); letter-spacing:.12em; text-transform:uppercase; color:var(--ds-gold-bright); margin:0 0 .75rem; }
.author-note h2 { font:400 clamp(1.7rem,3vw,2.5rem)/1.2 var(--ds-font-editorial); margin:0 0 1rem; }
.author-note p { color:var(--ds-text-soft); line-height:1.75; max-inline-size:65ch; margin:0; }
@media (min-width:48rem) { .author-note { grid-template-columns:10rem minmax(0,1fr); align-items:center; gap:2.5rem; } }