/* ==========================================================================
   Prune Hill Capital, the RHUL student investment fund

   "Prospectus". The fund's output is documents, so the site is set like one:
   stone paper, a heavy rule opening every section, dotted leaders between a
   label and its value, and figures that line up down a column. Two families,
   one colour, no cards, no shadows, no radius, nothing that moves on scroll.

   The green is the fund's own, taken from the tree mark. It is the only
   colour on the page and it is used structurally, not as decoration.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Tokens */

:root {
    color-scheme: light;

    /* Surfaces. Stone rather than white: a page that is visibly a colour
       reads as a chosen one. */
    --paper: #EFEEE9;
    --raised: #F7F6F2;
    --slab: #1A1A18;
    /* the near-black band; paper on it is 15:1 */

    /* Ink */
    --ink: #1A1A18;
    /* 15.0:1 on paper */
    --ink-muted: #56544E;
    /* 6.5:1 on paper */
    --ink-faint: #6A685F;
    /* 4.8:1 on paper, 5.2:1 on raised */

    /* Rules. Three weights, three jobs: decorative, structural, affordance. */
    --line: #D6D4CC;
    --line-strong: #B6B3A8;
    --line-control: #7A776D;
    /* 3.9:1 */

    /* One colour. Deep green, from the mark. */
    --accent: #1F5C3D;
    /* 6.8:1 on paper */
    --accent-hover: #164630;
    --accent-ink: #F7F6F2;
    /* 7.3:1 on accent */

    /* On the slab */
    --on-slab: #EFEEE9;
    --on-slab-muted: #A8A69D;
    /* 7.1:1 */
    --on-slab-line: rgba(239, 238, 233, 0.16);
    --on-slab-accent: #7FBF97;
    /* 8.1:1 */

    /* Permitted and prohibited. Never the only signal: each is also carried
       by a word and by a glyph. */
    --allow: #1F5C3D;
    --deny: #8E2F1F;

    /* Two families, from different categories, and no third. Archivo carries
       every label, table and figure and has real tabular numerals; Literata
       carries the prose and has an optical-size axis. */
    --font-display: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
    --font-ui: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;
    --font-body: 'Literata', 'Iowan Old Style', Georgia, serif;

    /* Type scale. 16px base, roughly a 1.26 ratio, display clamped. */
    --f-micro: 0.6875rem;
    --f-caption: 0.75rem;
    --f-small: 0.875rem;
    --f-body: 1.0625rem;
    --f-lead: 1.25rem;
    --f-h3: 1.25rem;
    --f-h2: clamp(1.625rem, 3vw, 2rem);
    --f-h1: clamp(2.25rem, 5.6vw, 3.75rem);

    --lh-display: 1.02;
    --lh-heading: 1.16;
    --lh-body: 1.62;

    /* Spacing, 8px baseline */
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2rem;
    --space-5: 3rem;
    --space-6: 4rem;
    --section-pad: clamp(3rem, 6vw, 5.5rem);

    /* Layout */
    --container: 1000px;
    --measure: 64ch;
    --gutter: clamp(1.125rem, 4vw, 2rem);
    --header-h: 3.25rem;

    /* No radius anywhere except the focus ring, where 2px keeps the corner
       from looking like a mistake. No shadows at all: the rules do that job. */
    --r-sm: 2px;

    --hair: 1px solid var(--line);
    --hair-strong: 1px solid var(--line-strong);
    --rule-heavy: 2px solid var(--ink);

    --ease-std: cubic-bezier(0.4, 0, 0.2, 1);
    --dur-fast: 140ms;
}

/* Dark counterpart. The media query is the no-JS fallback; the attribute wins
   once the inline head script has run. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --paper: #181815;
        --raised: #201F1B;
        --slab: #0E0E0C;
        --ink: #EDEBE4;
        --ink-muted: #A8A69D;
        --ink-faint: #949289;
        --line: #2C2B26;
        --line-strong: #403E37;
        --line-control: #6A675E;
        --accent: #7FBF97;
        --accent-hover: #9BD4B0;
        --accent-ink: #181815;
        --on-slab: #EDEBE4;
        --on-slab-muted: #A8A69D;
        --on-slab-line: rgba(237, 235, 228, 0.14);
        --on-slab-accent: #7FBF97;
        --allow: #7FBF97;
        --deny: #E0917E;
        --rule-heavy: 2px solid var(--ink);
    }
}

:root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #181815;
    --raised: #201F1B;
    --slab: #0E0E0C;
    --ink: #EDEBE4;
    --ink-muted: #A8A69D;
    --ink-faint: #949289;
    --line: #2C2B26;
    --line-strong: #403E37;
    --line-control: #6A675E;
    --accent: #7FBF97;
    --accent-hover: #9BD4B0;
    --accent-ink: #181815;
    --on-slab: #EDEBE4;
    --on-slab-muted: #A8A69D;
    --on-slab-line: rgba(237, 235, 228, 0.14);
    --on-slab-accent: #7FBF97;
    --allow: #7FBF97;
    --deny: #E0917E;
    --rule-heavy: 2px solid var(--ink);
}

/* ---------------------------------------------------------------- 2. Reset */

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

html {
    -webkit-text-size-adjust: 100%;
}

body {
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--f-body);
    line-height: var(--lh-body);
    /* Literata carries an optical-size axis, so it retunes itself between the
       60px h1 and the 17px body instead of being one drawing scaled. */
    font-optical-sizing: auto;
    font-variant-ligatures: common-ligatures contextual;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Quotes hang into the margin so the left edge of a paragraph is optically
   straight rather than mathematically straight. Safari-only today; elsewhere
   it degrades to no hang, which is the current behaviour anyway. */
.prose,
.lede,
blockquote {
    hanging-punctuation: first last;
}

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

a {
    color: inherit;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

/* ----------------------------------------------------- 3. Base typography */

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

h1 {
    font-size: var(--f-h1);
    line-height: var(--lh-display);
    letter-spacing: -0.032em;
}

h2 {
    font-size: var(--f-h2);
    letter-spacing: -0.024em;
}

h3 {
    font-size: var(--f-h3);
    letter-spacing: -0.014em;
}

h4 {
    font-size: 1rem;
}

p {
    text-wrap: pretty;
}

.lede {
    font-size: var(--f-lead);
    line-height: 1.48;
    color: var(--ink-muted);
    max-width: 54ch;
}

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

.prose+.prose,
.prose+.list,
.list+.prose {
    margin-top: var(--space-2);
}

.prose a,
.footnote a,
.list a,
.ledger a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
    text-decoration-color: color-mix(in srgb, var(--accent) 40%, transparent);
    transition: text-decoration-color var(--dur-fast) var(--ease-std);
}

.prose a:hover,
.footnote a:hover,
.list a:hover,
.ledger a:hover {
    text-decoration-color: currentColor;
}

/* The label voice: Archivo, small, tracked, upper case, tabular figures. It
   replaces the monospace a fund site reaches for and keeps the site to two
   families. */
.tag {
    font-family: var(--font-ui);
    font-size: var(--f-caption);
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
}

/* An inline clause reference. Small, tabular, and never a link, because the
   mandate is not published. */
.ref {
    font-family: var(--font-ui);
    font-size: 0.8em;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    color: var(--ink-faint);
    white-space: nowrap;
}

.num {
    font-family: var(--font-ui);
    font-variant-numeric: tabular-nums;
}

.list {
    list-style: none;
    max-width: var(--measure);
}

.list>li {
    position: relative;
    padding-left: 1.375rem;
}

.list>li+li {
    margin-top: 0.5rem;
}

.list>li::before {
    content: '';
    position: absolute;
    left: 0.0625rem;
    top: 0.7em;
    width: 7px;
    height: 2px;
    background: var(--accent);
}

.list--check>li::before,
.list--cross>li::before {
    content: none;
}

.list--check>li,
.list--cross>li {
    padding-left: 1.75rem;
}

.list--check>li::after,
.list--cross>li::after {
    position: absolute;
    left: 0;
    top: 0.02em;
    font-family: var(--font-ui);
    font-weight: 700;
}

.list--check>li::after {
    content: '\002B';
    /* plus: permitted */
    color: var(--allow);
}

.list--cross>li::after {
    content: '\00D7';
    /* multiplication sign: prohibited */
    color: var(--deny);
}

.footnote {
    font-family: var(--font-ui);
    font-size: var(--f-small);
    line-height: 1.55;
    color: var(--ink-faint);
    max-width: 60ch;
}

/* ------------------------------------------------------- 4. Utility / a11y */

.wrap {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

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

.skip-link {
    position: absolute;
    top: var(--space-1);
    left: var(--space-1);
    z-index: 100;
    padding: 0.5rem 0.875rem;
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--font-ui);
    font-size: var(--f-caption);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    border-radius: var(--r-sm);
    transform: translateY(calc(-100% - var(--space-2)));
    transition: transform var(--dur-fast) var(--ease-std);
}

.skip-link:focus {
    transform: translateY(0);
}

:where(a, button, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

#main:focus {
    outline: none;
}

/* ------------------------------------------------------------- 5. Header */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--paper);
    border-bottom: var(--rule-heavy);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--header-h);
}

.wordmark {
    display: flex;
    align-items: center;
    gap: 0.5625rem;
    text-decoration: none;
    color: var(--ink);
    flex-shrink: 0;
}

.wordmark__mark {
    width: 24px;
    height: 24px;
    color: var(--accent);
    flex-shrink: 0;
}

.wordmark__text {
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.1;
    white-space: nowrap;
}

.wordmark__suffix {
    display: block;
    font-size: var(--f-micro);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-top: 2px;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-family: var(--font-ui);
    font-size: var(--f-small);
    font-weight: 500;
    margin-left: auto;
}

.site-nav a {
    text-decoration: none;
    color: var(--ink-muted);
    padding-block: 0.2rem;
    border-bottom: 2px solid transparent;
    transition: color var(--dur-fast) var(--ease-std),
        border-color var(--dur-fast) var(--ease-std);
}

.site-nav a:hover {
    color: var(--ink);
    border-bottom-color: var(--line-control);
}

/* aria-current is the source of truth; the style follows it. */
.site-nav a[aria-current="page"] {
    color: var(--ink);
    border-bottom-color: var(--accent);
}

.theme-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    border: 1px solid var(--line-control);
    color: var(--ink-muted);
    flex-shrink: 0;
    transition: border-color var(--dur-fast) var(--ease-std),
        color var(--dur-fast) var(--ease-std);
}

/* Shown only once script.js has labelled and wired it. A dead, mislabelled
   button is worse than no button. */
.theme-ready .theme-toggle {
    display: flex;
}

.theme-toggle:hover {
    border-color: var(--ink);
    color: var(--ink);
}

.theme-toggle svg {
    width: 14px;
    height: 14px;
}

:root[data-theme="dark"] .icon-moon,
:root:not([data-theme="dark"]) .icon-sun {
    display: none;
}

/* --------------------------------------------------- 6. Section scaffold */

/* Every section opens on a heavy rule with its number and name sitting under
   it, full width. There is no index column down the left margin: the page is
   one column, banded, the way a printed report is. */
.section {
    padding-block: var(--section-pad);
    border-top: var(--rule-heavy);
}

.section--tight {
    padding-block: clamp(2rem, 3.5vw, 3rem);
}

.section--wide {
    padding-block: clamp(4rem, 8vw, 7rem);
}

.section--flush {
    border-top: none;
}

.section--bleed .wrap {
    max-width: 1180px;
}

.section--dark {
    background: var(--slab);
    color: var(--on-slab);
    border-top-color: var(--slab);
}

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4 {
    color: var(--on-slab);
}

.section--dark .lede,
.section--dark .prose {
    color: var(--on-slab-muted);
}

/* Links on the slab. The deep green accent is tuned for stone paper and lands
   at about 1.6:1 against the near-black, so every link context needs the
   lighter one naming here rather than inheriting. */
.section--dark :where(.prose, .footnote, .list, .ledger, .note, .sidenote) a {
    color: var(--on-slab-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
    text-decoration-color: color-mix(in srgb, var(--on-slab-accent) 45%, transparent);
}

.section--dark :where(.prose, .footnote, .list, .ledger, .note, .sidenote) a:hover {
    text-decoration-color: currentColor;
}

.section--dark .list>li::before {
    background: var(--on-slab-accent);
}

.section--dark .list--check>li::after {
    color: var(--on-slab-accent);
}

.section--dark .list--cross>li::after {
    color: #E0917E;
}

.section--dark .footnote,
.section--dark .ref,
.section--dark .tag {
    color: var(--on-slab-muted);
}

.section--dark :where(a, button, summary, [tabindex]):focus-visible {
    outline-color: var(--on-slab-accent);
}

.section__index {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-family: var(--font-ui);
    font-size: var(--f-caption);
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: var(--space-3);
}

.section__num {
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    letter-spacing: 0.06em;
}

.section__num::after {
    content: '';
    display: inline-block;
    width: 1.75rem;
    height: 1px;
    background: var(--line-strong);
    margin-left: 0.75rem;
    vertical-align: 0.28em;
}

.section--dark .section__index {
    color: var(--on-slab-muted);
}

.section--dark .section__num {
    color: var(--on-slab-accent);
}

.section--dark .section__num::after {
    background: var(--on-slab-line);
}

.section__head {
    margin-bottom: var(--space-4);
}

.section__head .lede {
    margin-top: var(--space-2);
}

/* ---------------------------------------------------------------- 7. Hero */

.hero {
    padding-block: clamp(2.75rem, 7vw, 5rem) clamp(1.75rem, 3.5vw, 2.75rem);
}

.hero__kicker {
    margin-bottom: var(--space-3);
}

.hero__lede {
    max-width: 52ch;
    margin-top: var(--space-3);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.75rem;
    margin-top: var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--f-small);
    font-weight: 500;
}

/* Four checkable facts on a band of their own, so the first thing after the
   claim is something a reader can verify. */
.grounding {
    border-block: var(--hair-strong);
    background: var(--raised);
    padding-block: 0.8125rem;
}

.grounding__inner {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 2rem;
    font-size: var(--f-micro);
}

.page-head {
    padding-block: clamp(2.25rem, 5vw, 3.75rem) var(--space-4);
}

.page-head__kicker {
    margin-bottom: var(--space-2);
}

.page-head h1 {
    font-size: clamp(1.875rem, 4.4vw, 2.875rem);
}

.page-head .lede {
    margin-top: var(--space-3);
}

/* ---------------------------------------------------------------- 8. Links */

.link-arrow {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    text-decoration: none;
    color: var(--ink);
    border-bottom: 2px solid var(--accent);
    padding-bottom: 1px;
    transition: color var(--dur-fast) var(--ease-std),
        border-color var(--dur-fast) var(--ease-std);
}

.link-arrow:hover {
    color: var(--accent);
    border-bottom-color: var(--line-control);
}

.link-arrow .arrow {
    color: var(--accent);
}

.section--dark .link-arrow {
    color: var(--on-slab);
    border-bottom-color: var(--on-slab-accent);
}

.section--dark .link-arrow .arrow {
    color: var(--on-slab-accent);
}

/* The one large control on the site. A rectangle: a pill would borrow a shape
   from software this fund is not. */
.button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6875rem 1.25rem;
    background: var(--accent);
    color: var(--accent-ink);
    font-family: var(--font-ui);
    font-size: var(--f-small);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--dur-fast) var(--ease-std);
}

.button:hover {
    background: var(--accent-hover);
}

/* --------------------------------------------------- 9. Ledgers & leaders */

/* The key/value primitive, set the way a contents page sets it: label left,
   value right, a dotted leader carrying the eye across the gap. Where the
   value is a sentence rather than a figure the leader is suppressed, because
   a leader running into prose is noise. */
.ledger {
    border-top: var(--hair-strong);
    max-width: 46rem;
}

.ledger__row {
    display: grid;
    grid-template-columns: minmax(8rem, 30%) minmax(0, 1fr);
    gap: var(--space-2);
    padding-block: 0.8125rem;
    border-bottom: var(--hair);
}

/* The key and its leader are two flex items, so the dots always start where
   the label ends and always stop at the column edge. An absolutely positioned
   leader had to guess both, and sat below the baseline when the label wrapped. */
.ledger__key {
    display: flex;
    align-items: baseline;
    font-family: var(--font-ui);
    font-size: var(--f-micro);
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-top: 0.35em;
}

.ledger__key::after {
    content: '';
    flex: 1 0 1.25rem;
    margin-left: 0.5rem;
    align-self: baseline;
    border-bottom: 1px dotted var(--line-control);
    transform: translateY(-0.28em);
}

.ledger__val {
    font-family: var(--font-ui);
    font-size: var(--f-small);
    line-height: 1.5;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}

.section--dark .ledger {
    border-top-color: var(--on-slab-line);
}

.section--dark .ledger__row {
    border-bottom-color: var(--on-slab-line);
}

.section--dark .ledger__key {
    color: var(--on-slab-muted);
}

.section--dark .ledger__key::after {
    border-bottom-color: var(--on-slab-line);
}

.section--dark .ledger__val {
    color: var(--on-slab);
}

/* ------------------------------------------------------------- 10. Tables */

/* Real tables, because these are real numbers and a reader may want to
   compare down a column.

   The label is a <figcaption> outside the scroller rather than a <caption>
   inside it: a caption inherits the table's min-width, so on a phone it laid
   out to 544px and half of it was unreachable. The table keeps the same
   accessible name through aria-labelledby. The scroller is tabindex="0"
   because a keyboard-only user otherwise cannot scroll it (WCAG 2.1.1);
   Chrome does this on its own now, Safari and Firefox do not. */
.table-figure {
    margin-top: var(--space-3);
}

.table-caption {
    font-family: var(--font-ui);
    font-size: var(--f-micro);
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.625rem;
    max-width: 60ch;
}

.section--dark .table-caption {
    color: var(--on-slab-muted);
}

.table-scroll {
    overflow-x: auto;
    /* Scroll shadows: two cover layers pinned to the content (attachment
       local) and two shade layers pinned to the box, so a shadow shows at
       whichever edge still has table beyond it. The cover has to match the
       band it sits on, not the page. */
    --scroll-cover: var(--paper);
    --scroll-shade: rgba(26, 26, 24, 0.16);
    background:
        linear-gradient(to right, var(--scroll-cover) 30%, transparent),
        linear-gradient(to left, var(--scroll-cover) 30%, transparent) 100% 0,
        radial-gradient(farthest-side at 0 50%, var(--scroll-shade), transparent),
        radial-gradient(farthest-side at 100% 50%, var(--scroll-shade), transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
}

.table-scroll:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
}

.section--dark .table-scroll {
    --scroll-cover: var(--slab);
    --scroll-shade: rgba(0, 0, 0, 0.5);
}

.section--dark .table-scroll:focus-visible {
    outline-color: var(--on-slab-accent);
}

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 34rem;
    font-family: var(--font-ui);
    font-size: var(--f-small);
    line-height: 1.5;
}

th,
td {
    text-align: left;
    padding: 0.6875rem 1rem 0.6875rem 0;
    border-bottom: var(--hair);
    vertical-align: top;
}

thead th {
    font-size: var(--f-micro);
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-faint);
    border-bottom: var(--rule-heavy);
    white-space: nowrap;
}

tbody th {
    font-weight: 600;
    color: var(--ink);
}

td:last-child,
th:last-child {
    padding-right: 0;
}

.cell-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.cell-deny {
    color: var(--deny);
}

.cell-allow {
    color: var(--allow);
}

tbody tr:last-child td,
tbody tr:last-child th {
    border-bottom: none;
}

/* Tables on the slab. Without this the row headers inherit --ink and land at
   about 1.1:1 against the near-black. */
.section--dark thead th {
    color: var(--on-slab-muted);
    border-bottom-color: var(--on-slab);
}

.section--dark th,
.section--dark td {
    color: var(--on-slab);
    border-bottom-color: var(--on-slab-line);
}

.section--dark .cell-allow {
    color: var(--on-slab-accent);
}

.section--dark .cell-deny {
    color: #E0917E;
}

/* ---------------------------------------------------------- 11. Standfirst */

/* For the standing disclaimers and the document-status notices. Deliberately
   not a tinted box with a coloured left border: that combination has become a
   reliable signature of generated design. It is a rule above and below with
   the label hung in the margin, which is how a printed document does it. */
.note {
    border-block: var(--hair-strong);
    padding-block: var(--space-2);
    display: grid;
    grid-template-columns: 8rem minmax(0, 1fr);
    gap: var(--space-1) var(--space-3);
    max-width: 48rem;
}

.note__title {
    font-family: var(--font-ui);
    font-size: var(--f-micro);
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-faint);
    padding-top: 0.2em;
}

.note__body>*+* {
    margin-top: 0.5rem;
}

.note p {
    font-family: var(--font-ui);
    font-size: var(--f-small);
    line-height: 1.55;
    color: var(--ink-muted);
}

.section--dark .note {
    border-block-color: var(--on-slab-line);
}

.section--dark .note__title {
    color: var(--on-slab-muted);
}

.section--dark .note p {
    color: var(--on-slab-muted);
}

@media (max-width: 680px) {
    .note {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ------------------------------------------- 11b. Quotes & margin notes */

/* A line lifted from the fund's own documents, set large in the display face.
   It is a quotation, so it is marked up as one and it names its source. */
blockquote.pull {
    max-width: 32ch;
    font-family: var(--font-display);
    font-size: clamp(1.25rem, 2.3vw, 1.5rem);
    font-weight: 600;
    line-height: 1.24;
    letter-spacing: -0.022em;
    color: var(--ink);
    border-left: none;
    padding-left: 0;
}

blockquote.pull p::before {
    content: '';
    display: block;
    width: 2.5rem;
    height: 3px;
    background: var(--accent);
    margin-bottom: var(--space-2);
}

blockquote.pull cite {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-ui);
    font-size: var(--f-micro);
    font-weight: 600;
    font-style: normal;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.section--dark blockquote.pull {
    color: var(--on-slab);
}

.section--dark blockquote.pull p::before {
    background: var(--on-slab-accent);
}

.section--dark blockquote.pull cite {
    color: var(--on-slab-muted);
}

/* Margin notes sit beside the text that references them rather than sending
   the reader to the foot of the page. Below the breakpoint they fall back
   inline, still directly after the paragraph they belong to. */
.with-notes {
    display: grid;
    grid-template-columns: minmax(0, var(--measure)) minmax(0, 14rem);
    gap: var(--space-3) var(--space-5);
    align-items: start;
}

.sidenote {
    font-family: var(--font-ui);
    font-size: var(--f-caption);
    line-height: 1.6;
    color: var(--ink-faint);
    border-top: 2px solid var(--line-strong);
    padding-top: 0.625rem;
}

.sidenote b {
    display: block;
    font-size: var(--f-micro);
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-bottom: 0.3rem;
}

.section--dark .sidenote {
    color: var(--on-slab-muted);
    border-top-color: var(--on-slab-line);
}

.section--dark .sidenote b {
    color: var(--on-slab);
}

@media (max-width: 900px) {
    .with-notes {
        grid-template-columns: minmax(0, 1fr);
    }

    .sidenote {
        max-width: var(--measure);
    }
}

/* ------------------------------------------------------------ 12. Entries */

/* Not a card. A numbered row in a list that happens to carry a heading, with
   a hairline instead of a border-and-shadow. */
.entries {
    border-top: var(--rule-heavy);
    list-style: none;
}

.entry {
    display: grid;
    grid-template-columns: 2.75rem minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
    padding-block: var(--space-3);
    border-bottom: var(--hair);
}

.entry__num {
    font-family: var(--font-ui);
    font-size: var(--f-caption);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    padding-top: 0.3rem;
    letter-spacing: 0.04em;
}

.entry__body>*+* {
    margin-top: 0.5rem;
}

.entry__meta {
    font-family: var(--font-ui);
    font-size: var(--f-micro);
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--ink-faint);
}

.entry p {
    font-family: var(--font-ui);
    font-size: var(--f-small);
    line-height: 1.6;
    color: var(--ink-muted);
    max-width: 60ch;
}

.section--dark .entries {
    border-top-color: var(--on-slab);
}

.section--dark .entry {
    border-bottom-color: var(--on-slab-line);
}

.section--dark .entry p,
.section--dark .entry__meta {
    color: var(--on-slab-muted);
}

.section--dark .entry__num {
    color: var(--on-slab-accent);
}

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

.stack>*+* {
    margin-top: var(--space-3);
}

.stack--tight>*+* {
    margin-top: var(--space-2);
}

/* --------------------------------------------------------- 13. Disclosure */

/* <details> for the long-form detail, so the page stays skimmable and the
   content is still in the DOM for search and for print. */
details {
    border-bottom: var(--hair);
}

details:first-of-type {
    border-top: var(--rule-heavy);
}

summary {
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    padding-block: 0.9375rem;
    cursor: pointer;
    font-family: var(--font-ui);
    font-size: var(--f-small);
    font-weight: 600;
    list-style: none;
}

summary::-webkit-details-marker {
    display: none;
}

summary::after {
    content: '+';
    margin-left: auto;
    font-family: var(--font-ui);
    font-weight: 600;
    color: var(--accent);
    font-size: 1.125rem;
    line-height: 1;
}

details[open] summary::after {
    content: '\2212';
    /* minus */
}

.summary__num {
    font-family: var(--font-ui);
    font-size: var(--f-micro);
    font-weight: 600;
    letter-spacing: 0.09em;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
}

.details__body {
    padding-bottom: var(--space-3);
    max-width: var(--measure);
}

.details__body>*+* {
    margin-top: var(--space-2);
}

.details__body p {
    font-family: var(--font-ui);
    font-size: var(--f-small);
    line-height: 1.65;
    color: var(--ink-muted);
}

.section--dark details {
    border-bottom-color: var(--on-slab-line);
}

.section--dark details:first-of-type {
    border-top-color: var(--on-slab);
}

.section--dark summary::after {
    color: var(--on-slab-accent);
}

.section--dark .summary__num,
.section--dark .details__body p {
    color: var(--on-slab-muted);
}

/* ------------------------------------------------------------ 14. Contact */

/* A ruled block, not a card: one heavy rule on top and the content hanging
   off it. No border on four sides, no fill, no shadow, no radius. */
.contact-panel {
    border-top: var(--rule-heavy);
    padding-top: var(--space-3);
    max-width: 34rem;
}

.contact-panel h3 {
    margin-bottom: var(--space-2);
}

.contact-panel .ledger {
    margin-top: var(--space-3);
}

.section--dark .contact-panel {
    border-top-color: var(--on-slab);
}

/* ------------------------------------------------------------- 15. Footer */

.site-footer {
    border-top: var(--rule-heavy);
    padding-block: var(--space-5) var(--space-4);
    font-family: var(--font-ui);
    font-size: var(--f-small);
    color: var(--ink-faint);
}

.site-footer__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.site-footer h2 {
    font-family: var(--font-ui);
    font-size: var(--f-micro);
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 0.75rem;
}

.footer-nav {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4375rem;
}

.footer-nav a {
    text-decoration: none;
    color: var(--ink-muted);
    transition: color var(--dur-fast) var(--ease-std);
}

.footer-nav a:hover {
    color: var(--accent);
}

.site-footer__legal {
    border-top: var(--hair);
    padding-top: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    justify-content: space-between;
    font-size: var(--f-caption);
    line-height: 1.6;
}

.site-footer__legal p {
    max-width: 62ch;
}

/* --------------------------------------------------------- 16. Responsive */

@media (max-width: 900px) {
    .split {
        grid-template-columns: minmax(0, 1fr);
    }

    .site-footer__grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 680px) {
    :root {
        --header-h: 3rem;
        --f-body: 1rem;
    }

    .wordmark__suffix {
        display: none;
    }

    .ledger__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.25rem;
    }

    /* The leader has nothing to lead to once the value wraps underneath. */
    .ledger__key::after {
        content: none;
    }

    .entry {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.5rem;
    }

    .site-footer__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }
}

/* Below this the wordmark text and four nav links stop fitting together. */
@media (max-width: 560px) {
    .wordmark__text {
        display: none;
    }

    .site-nav {
        gap: 0.9rem;
        font-size: var(--f-caption);
    }
}

/* ------------------------------------------------------ 17. Reduced motion */

/* There is no scroll animation on this site to disable. What is left is the
   nav underline, the link colour and the theme toggle, so this block stops
   those transitions and nothing has to arrive at a state it was animating
   towards. */
@media (prefers-reduced-motion: reduce) {

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

/* --------------------------------------------------------------- 18. Print */

/* The mandate and research pages are the kind of thing people print. */
@media print {

    .site-header,
    .theme-toggle,
    .skip-link {
        display: none !important;
    }

    body {
        background: #fff;
        color: #000;
        font-size: 10.5pt;
    }

    .section--dark {
        background: #fff;
        color: #000;
    }

    .section--dark h2,
    .section--dark h3,
    .section--dark .prose,
    .section--dark .lede,
    .section--dark .ledger__val,
    .section--dark th,
    .section--dark td {
        color: #000;
    }

    details {
        border: none;
    }

    details>summary {
        display: none;
    }

    table,
    .ledger,
    .note,
    .entry {
        break-inside: avoid;
    }

    a[href^="http"]::after {
        content: ' (' attr(href) ')';
        font-size: 8pt;
        color: #444;
    }
}