/* The Wolf Book — page typography (bs00, DESIGN.md §1).
 * The page looks like a well-set printed page that happens to live in
 * a browser: white ground, black serif text, one measure, no chrome. */

html {
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--serif);
    /* Body size defaults to the browser's (16px-class); the book does
       not shrink text to look dense. */
    font-size: 100%;
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
}

body {
    margin: 0;
    overflow-x: hidden;
    line-height: var(--leading);
}

.hidden {
    display: none !important;
}

/* ---- The measure ---- */

main {
    display: block;
    max-width: var(--measure);
    margin: 0 auto;
    padding: 0 0.5rem;
}

/* ---- Headings: same serif, weight and size, never color ---- */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--serif);
    color: var(--fg);
    font-weight: 700;
    line-height: 1.25;
    margin-block-start: 1.6em;
    margin-block-end: 0.6em;
}

h1 { font-size: 1.9em; margin-block-start: 1.2em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.15em; }
h4, h5, h6 { font-size: 1em; }

/* Anchor targets breathe under the sticky bar. */
h1, h2, h3, h4, h5, h6 { scroll-margin-top: calc(var(--menu-bar-height) + 0.5em); }

p, ul, ol, dl, table, blockquote, pre {
    margin-block-start: 0;
    margin-block-end: 1em;
}

/* ---- Links: underlined, color for meaning only ---- */

a {
    color: var(--link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
a:hover { text-decoration-thickness: 2px; }

/* Heading self-links stay ink-colored until hovered. */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
    color: inherit;
    text-decoration: none;
}
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
    text-decoration: underline;
}

/* ---- Epigraphs (DESIGN.md §1, TONE.md §4) ---- */

.epigraph {
    font-style: italic;
    margin: 1.5em 0 2em;
}
.epigraph .attribution {
    display: block;
    text-align: right;
    font-style: normal;
}

/* ---- Blockquotes (admonitions use these; STYLE.md) ---- */

blockquote {
    margin-inline: 0;
    padding-inline-start: 1em;
    border-inline-start: 2px solid var(--rule);
}

/* ---- Code ---- */

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

/* Inline code: same ink, mono face, no pill. */
:not(pre) > code {
    font-size: var(--code-font-size);
    background: none;
    padding: 0;
}

/* Code blocks: very light warm gray ground, no border, slight inset,
   same measure as prose (DESIGN.md §2). */
pre {
    background-color: var(--code-bg);
    padding: 0.8em 1em;
    overflow-x: auto;
    line-height: 1.45;
}
pre > code {
    font-size: var(--code-font-size);
    background: none;
    padding: 0;
    display: block;
}

/* The five dialects are visually distinguishable (DESIGN.md §2):
   transcripts and console runs keep their prompts (content-level),
   diagnostics keep the compiler's exact layout. The classes mark the
   kind for print and for subtle presentation differences. */
pre.dialect-repl, pre.dialect-console {
    background-color: #f6f6f6;
}
pre.dialect-diagnostic {
    background-color: #fdf7f7;
}

/* ---- Tables: bookish rules, no zebra ---- */

table {
    border-collapse: collapse;
    width: 100%;
}
th, td {
    text-align: left;
    padding: 0.3em 0.75em 0.3em 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: top;
}
thead th {
    border-bottom: 2px solid var(--fg);
    font-weight: 700;
}

/* ---- Solutions collapse (DESIGN.md §3, no JS) ---- */

details {
    margin-block-end: 1em;
}
details > summary {
    cursor: pointer;
    font-style: italic;
}

hr {
    border: none;
    border-top: 1px solid var(--rule);
    margin: 2em auto;
    width: 33%;
}

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