/* Base font size. Using a percentage rather than an absolute pt value means a
   visitor who has set a larger default in their browser still gets it scaled
   up -- `font-size: 14pt` overrode that preference outright. 118% lands at
   roughly the same size (~18.9px) on a default 16px browser. */
html {
    font-size: 118%;
}

:root {
    /* Body text uses the Claude desktop app's own font stack. "Anthropic Sans"
       is bundled inside the app rather than installed system-wide, so it will
       not resolve for visitors; the stack then falls through to system-ui,
       which is the same fallback the app itself declares. */
    --body: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Headings stay Georgia so they echo the business-card banner. */
    --heading: "Anthropic Sans", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

}

/* The theme drops `background_image` into an inline style without running it
   through mkdocs' `url` filter, so a relative path resolves only on the home
   page and 404s on every other one. Setting it here fixes that: url() in a
   stylesheet resolves against the stylesheet's own location, not the page, so
   a single relative path works site-wide and still survives being served from
   a subpath. `background_image` is left empty in mkdocs.yml. */
body#background {
    background-image: url("../assets/longleaf-pine_001.webp");
}


/** Business-card banner **/

/* Proportions are measured off the card artwork (1500x900): the title occupies
   85.7% of the card's width and sits in 7.15% side margins, which works out to
   a title size of 0.0815 x the banner width once a little slack is left for
   rounding. Every other size is a ratio of that. `cqw` measures the banner
   itself, so this holds at any width and doesn't drift when a scrollbar eats
   part of the viewport; the min() above it is the fallback for browsers with
   no container-query support. Change these two font sizes together to scale
   the whole banner. */
/* No gold panel -- the masthead sits straight on the content box, the way the
   theme's header did. It keeps the card's layout, Georgia type and proportions.
   The card's olive green is left off with it: it reads fine on white but drops
   to 1.8:1 against the dark-mode box, so the text follows the theme instead. */
header#site-banner {
    position: relative;
    container-type: inline-size;
    /* still bleeds sideways past the content box padding so the title keeps the
       card's width relationship; the theme's generic `header` rule would
       otherwise add 4rem top and bottom */
    margin: 0 -3rem 2.5rem;
    padding: 0;
}
header#site-banner .card-inner {
    padding: 0.95em 0.863em 0.85em;
    color: var(--text);
    font-family: var(--heading);
    text-align: center;
    font-size: min(7.9vw, 4.24rem);
}
@supports (font-size: 1cqw) {
    header#site-banner .card-inner {
        font-size: 8.15cqw;
    }
}
header#site-banner p {
    margin: 0;
    line-height: 1.05;
}
header#site-banner a {
    color: inherit;
    text-decoration: none;
}
header#site-banner a:hover {
    text-decoration: underline;
}
/* Sizes and gaps below are in ems of the line they sit on, converted from the
   card's ratios: title 1, owner 0.603, contact 0.533. The card's outer padding
   and the gap above the contact block are halved -- at full card proportions a
   masthead this tall would push the page content off the first screen. */
header#site-banner .card-title {
    font-size: 1em;
}
header#site-banner .card-owner {
    font-size: 0.603em;
    margin-top: 0.50em;
}
header#site-banner .card-contact {
    font-size: 0.533em;
    margin-top: 0.79em;
    line-height: 1.36;
}


/** Layout **/

/* The theme sets `padding: 0 3rem` on the content box, so text butts up against
   the header and footer. Add vertical breathing room. */
content#content {
    padding: 2rem 3rem 3rem;
}

/* Nav sits in the left of the content column and the page text fills the rest
   of it, out to the right edge of the box. */
main#page {
    display: grid;
    grid-template-columns: fit-content(11rem) minmax(0, 1fr);
    column-gap: 2.5rem;
    align-items: start;
}
nav#toc {
    /* The theme parks this outside the content box and hides it below 80rem. */
    visibility: visible;
    position: sticky;
    top: 2rem;
    width: auto;
    height: auto;
    margin-left: 0;
    text-align: left;
}
#page-body > :first-child {
    margin-top: 0;
}

/* Two columns stop making sense once the box is only as wide as the screen;
   below that the nav reflows into a wrapping row above the text. */
@media screen and (max-width: 48rem) {
    main#page {
        display: block;
    }
    nav#toc {
        position: static;
        margin-bottom: 2rem;
    }
    nav#toc ul {
        display: flex;
        flex-flow: row wrap;
        gap: 0.5rem 1.5rem;
    }
}


/** Headings **/

/* Section headings ran together with the paragraphs above them. Give them a
   clear top margin so pages read as distinct sections. */
#page h2 {
    margin-top: 2.5em;
    margin-bottom: 0.4em;
}
#page h2:first-of-type {
    margin-top: 1em;
}