/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

ul, ol {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* Base styles */

:root {
    /* Colour */
    --inky-black: #0d1b2a;
    --prussian-blue: #1b263b;
    --dusk-blue: #415a77;
    --lav-grey: #778da9;
    --alabaster-grey: #e0e1dd;
    --berry: #a3185e;
    --berry-light: color-mix(in srgb, var(--berry) 50%, var(--alabaster-grey));
    --border-accent: 1px solid var(--lav-grey);

    /* Type */
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --text-s: 0.875rem;
    --text-sm: 1rem;
    --text-m: 1.125rem;
    --text-l: 1.375rem;
    --text-display: clamp(2.5rem, 6vw, 4rem);

    /* Spacing */
    --space-s: 0.5rem;
    --space-m: 1.5rem;
    --space-l: 3rem;

    /* Layout */
    --gutter: clamp(1rem, 5vw, 3rem);
    --page-width: 68rem;
    --radius-pill: 999px;
}

body {
    min-height: 100vh;
    background-color: var(--alabaster-grey);
    font-family: var(--font);
    color: var(--inky-black);
    overflow-x: clip;
}

.container, header, footer {
    padding-inline: var(--gutter);
    margin-inline: auto;
    max-width: var(--page-width);
}

p, ol, ul, li {
    font-size: var(--text-l);
    margin: 0 0 var(--space-m);
    line-height: 1.7;
}

a {
    color: var(--berry);
    text-decoration: underline;
}

a:hover {
    color: var(--prussian-blue);
}



strong {
    font-weight: 700;
}

em {
    font-style: italic;
}

summary {
    cursor: pointer;
    font-weight: 600;
}

/* Keyboard focus: inky ring on light backgrounds, alabaster on dark ones */
:focus-visible {
    outline: 3px solid var(--inky-black);
    outline-offset: 3px;
}

:is(.mock, .panels, .proposal-summary) :focus-visible {
    outline-color: var(--alabaster-grey);
}

/* Hidden visually, still read by screen readers */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Glossary tooltips */

.term {
    position: relative;
}

.term-trigger {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline dotted;
    text-underline-offset: 0.2em;
    cursor: help;
}

.term-tip {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1;
    width: max-content;
    max-width: min(20rem, calc(100vw - 2 * var(--gutter)));
    padding: var(--space-s) var(--space-m);
    border-radius: 0.5rem;
    background: var(--prussian-blue);
    color: var(--alabaster-grey);
    font-size: var(--text-s);
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
}

.term-tip strong {
    display: block;
    margin-bottom: calc(var(--space-s) / 2);
    font-weight: 700;
}

.term:is(:hover, :focus-within):not([data-dismissed]) .term-tip,
.term[data-open] .term-tip {
    display: block;
}

/* Header */

#nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-m);
    align-items: center;
    padding-block: var(--space-m);
}

.nav-list-item {
    margin: 0;
}

.nav-list-item a, .cta {
    text-decoration: none;
    font-weight: 600;
}

.nav-list-item a:hover {
    color: var(--prussian-blue);
}

/* Pill-shaped calls to action */
.cta {
    display: inline-block;
    padding: var(--space-s) var(--space-m);
    border-radius: var(--radius-pill);
    background: var(--berry);
    color: var(--alabaster-grey);
}

.cta:hover {
    background: var(--prussian-blue);
    color: var(--alabaster-grey);
}

.nav-list-item .cta:hover {
    background: var(--prussian-blue);
    color: var(--alabaster-grey);
}

#logo-word-mark {
    width: min-content;
    margin: 0 auto 0 0;
    font-size: var(--text-m);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Small screens: logo on its own row, links below */
@media (max-width: 40rem) {
    #logo-word-mark {
        flex-basis: 100%;
    }

    .nav-list-item {
        font-size: var(--text-m);
    }
}

.logo-letter {
    display: block;
}

/* Headings */

.title, .post h1 {
    font-weight: 800;
    font-size: var(--text-display);
    letter-spacing: -0.02em;
    line-height: 1;
    max-width: 15ch;
    margin: 0 0 var(--space-m);
}

#desc {
    max-width: 60ch;
}

.section-heading, .copyright, .post h2 {
    margin-bottom: var(--space-m);
    font-size: var(--text-m);
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
}

:is(#developers, #funders) .section-heading {
    margin: var(--space-l) 0;
    text-align: center;
}

:is(#developers, #funders) .section-heading::before {
    content: "";
    display: block;
    width: 6rem;
    height: 6px;
    margin: 0 auto var(--space-m);
    border-radius: var(--radius-pill);
    background: var(--inky-black);
}

.copyright {
    font-size: var(--text-s);
    margin-bottom: var(--space-s);
    text-align: center;
}

/* Roadmap */

#plan {
    margin-top: var(--space-l);
}

/* Labels that lead straight into their content */
#plan .section-heading, .panels .section-heading {
    margin: 0 0 var(--space-s);
}

#roadmap {
    counter-reset: step;
    display: grid;
    gap: var(--space-m);
}

@media (min-width: 48rem) {
    #roadmap {
        grid-template-columns: repeat(3, 1fr);
    }
}

#roadmap li {
    counter-increment: step;
}

/* Bordered cards, shared by the roadmap and the proposal */
#roadmap li, .card {
    margin: 0;
    padding: var(--space-m);
    border: var(--border-accent);
    border-radius: 1rem;
    font-size: var(--text-m);
    line-height: 1.6;
}

#roadmap li::before {
    content: counter(step, decimal-leading-zero);
}

#roadmap li::before, .card-number {
    display: block;
    margin-bottom: var(--space-s);
    font-size: var(--text-l);
    font-weight: 700;
    color: var(--dusk-blue);
}

.step-title {
    display: block;
    margin-bottom: var(--space-s);
    font-weight: 700;
}

/* Full-bleed panels whose content lines up with the page */

.panels {
    display: flex;
    flex-direction: column;
    width: 100vw;
    margin: var(--space-l) calc(50% - 50vw);
}

@media (min-width: 48rem) {
    .panels {
        flex-direction: row;
    }
}

.panels > li {
    flex: 1;
    margin: 0;
    padding: var(--space-l) max(var(--gutter), (100vw - var(--page-width)) / 2);
    color: var(--alabaster-grey);
    font-size: var(--text-m);
    line-height: 1.6;
}

.panel-dusk     { background: var(--dusk-blue); }
.panel-prussian { background: var(--prussian-blue); }

.panels h3 {
    margin-bottom: var(--space-s);
    font-size: var(--text-l);
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.panels p {
    font-size: inherit;
    margin: 0 0 var(--space-m);
}

.checklist li {
    margin: 0 0 calc(var(--space-s) / 2);
    font-size: var(--text-m);
}

.checklist li::before {
    content: "✓";
    margin-right: var(--space-s);
    font-weight: 700;
}

/* In-page calls to action are larger than the nav's */
:is(.panels, .proposal-summary) .cta, .proposal-print {
    padding: var(--space-s) var(--space-m);
    font-size: var(--text-l);
}

/* Prussian blue would vanish on the dark panels */
:is(.panels, .proposal-summary) .cta:hover {
    background: var(--berry-light);
    color: var(--inky-black);
}

.panels .panel-prussian p a {
    color: var(--berry-light);
    text-decoration: underline;
}

.panels .panel-prussian p a:hover {
    color: color-mix(in srgb, var(--lav-grey) 60%, var(--alabaster-grey));
}

/* Contributors */

.contributor-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-m) var(--space-l);
}

/* Avatars sit closer together than logos */
.contributor-list:has(.contributor-avatar) {
    gap: var(--space-s);
}

.contributor-logo {
    width: 12em;
    height: auto;
}

#scaled-a11y {
    max-width: 6em;
}

.contributor-avatar {
    width: 3em;
    border-radius: 50%;
}

/* Data preview mock-up */

.mock {
    margin-bottom: var(--space-m);
    padding: var(--space-m);
    border-radius: 1rem;
    background: var(--prussian-blue);
    color: var(--alabaster-grey);
}

.mock-label {
    display: inline-block;
    margin-bottom: var(--space-s);
    font-size: var(--text-s);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Inline code chips */
.mock-label code, .post code {
    padding: 0 calc(var(--space-s) / 2);
    border-radius: 0.35em;
    background: var(--dusk-blue);
    color: var(--alabaster-grey);
    font-family: var(--mono);
    font-size: 0.9em;
}

.table-scroll {
    overflow-x: auto;
}

.mock table {
    width: 100%;
    min-width: 32rem;
}

.mock th,
.mock td {
    padding: var(--space-s);
    font-size: var(--text-m);
    text-align: left;
    border-bottom: 1px solid var(--lav-grey);
}

.mock td {
    vertical-align: top;
}

.mock thead th {
    font-weight: 700;
}

.mock .cell-note {
    display: block;
    margin-top: calc(var(--space-s) / 2);
    font-size: var(--text-s);
    line-height: 1.4;
}

.status {
    display: inline-block;
    padding: calc(var(--space-s) / 2) var(--space-s);
    border-radius: var(--radius-pill);
    font-size: var(--text-s);
    font-weight: 600;
    white-space: nowrap;
}

.status::before {
    margin-right: calc(var(--space-s) / 2);
}

.status-yes                 { background: #DCF2E3; color: #0B5A2A; }
.status-yes::before         { content: "✓"; }
.status-partial             { background: #FFF1CC; color: #6B4A00; }
.status-partial::before     { content: "◐"; }
.status-no                  { background: #FBE0E0; color: #8A1C1C; }
.status-no::before          { content: "✕"; }
.status-untested            { color: var(--alabaster-grey); border: 1px dashed var(--lav-grey); }
.status-untested::before    { content: "–"; }
.status-seeking             { color: var(--dusk-blue); border: 1px solid var(--dusk-blue); }

.mock-note {
    margin: var(--space-m) 0 0;
    font-size: var(--text-s);
    line-height: 1.5;
}

.mock-json {
    margin-top: var(--space-m);
}

.mock-json pre {
    margin-top: var(--space-s);
    overflow-x: auto;
    font-size: var(--text-m);
    line-height: 1.5;
}

/* Updates index: each post is a card, its title the link */

.update-list {
    display: grid;
    gap: var(--space-m);
    max-width: 46rem;
    margin-bottom: var(--space-l);
}

.update-list .update-date {
    margin: 0 0 var(--space-s);
    font-size: var(--text-s);
}

.card > :last-child {
    margin-bottom: 0;
}

.pagination-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-s) var(--space-m);
    margin-bottom: var(--space-l);
}

.pagination-list li {
    margin: 0;
    font-size: var(--text-m);
}

.pagination-list [aria-current] {
    font-weight: 700;
}

/* Update posts: the same type scale and patterns as the home and proposal pages */

.post {
    margin-bottom: var(--space-l);
}

.post .post-date {
    margin: 0 0 var(--space-s);
}

/* Section labels, as on the home page */
.post h2 {
    margin: var(--space-l) 0 var(--space-s);
}

.post h3 {
    margin: var(--space-m) 0 var(--space-s);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
}

.post :is(p, ol, ul, li), .proposal p {
    max-width: 60ch;
    font-size: var(--text-m);
}

.post p {
    margin: 0 0 var(--space-m);
}

.post :is(ol, ul) {
    margin: 0 0 var(--space-m);
    padding-left: var(--space-m);
}

.post ol {
    list-style: decimal;
}

.post ul {
    list-style: disc;
}

.post li {
    margin: 0 0 var(--space-s);
}

.post li > :is(ol, ul) {
    margin: var(--space-s) 0 0;
}

.post blockquote, .quote blockquote {
    margin: var(--space-m) 0;
    padding-left: var(--space-m);
    border-left: 6px solid var(--dusk-blue);
}

/* Funding proposal */

/* Type scale: 14px labels, 18px body, 22px lead and card headings */
.proposal #desc {
    font-size: var(--text-l);
}

.card-grid .step-title, .profiles h3, .update-list .step-title {
    font-size: var(--text-l);
    font-weight: 700;
    line-height: 1.3;
}

/* Card paragraphs inherit the card's size, except status pills */
.card .status {
    font-size: var(--text-s);
}

.proposal section > .section-heading {
    margin: var(--space-l) 0 var(--space-s);
}

/* Full-bleed band; --edge is the distance from the screen edge to the page content */
.proposal-summary {
    --edge: calc(max(0px, (100vw - var(--page-width) - 2 * var(--gutter)) / 2) + var(--gutter));
    box-sizing: border-box;
    width: 100vw;
    margin-left: calc(-1 * var(--edge));
    padding: var(--space-l) var(--edge);
    background: var(--prussian-blue);
    color: var(--alabaster-grey);
}

.proposal-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: var(--space-m);
}

.proposal-stats dt {
    margin-bottom: calc(var(--space-s) / 2);
    font-size: var(--text-s);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.proposal-stats dd {
    font-size: var(--text-l);
    font-weight: 800;
    line-height: 1.3;
}

.proposal-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-s) var(--space-m);
    margin-top: var(--space-m);
}

.proposal-print {
    border: 1px solid currentColor;
    border-radius: var(--radius-pill);
    background: none;
    color: inherit;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
}

.proposal-print:hover {
    background: var(--alabaster-grey);
    color: var(--inky-black);
}

.proposal-toc {
    margin-top: var(--space-l);
}

.proposal-toc .section-heading {
    margin: 0 0 var(--space-s);
}

.proposal-toc li {
    margin: 0 0 calc(var(--space-s) / 2);
    font-size: var(--text-m);
}

/* Drop cap: the figure sits beside the first lines of its sentence */
.proposal-stat strong {
    float: left;
    margin: 0 var(--space-s) 0 0;
    font-size: var(--text-display);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 0.95;
}

.proposal-stat::after {
    content: "";
    display: block;
    clear: both;
}

/* Grids of cards: quotes, team, deliverables */
.card-grid {
    display: grid;
    gap: var(--space-m);
    margin-bottom: var(--space-m);
}

@media (min-width: 48rem) {
    .card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.card p {
    margin: 0 0 var(--space-s);
    font-size: inherit;
}

/* Quotes share the update posts' blockquote style */
.quote figcaption {
    margin-bottom: var(--space-m);
    font-size: var(--text-m);
    line-height: 1.5;
}

/* Team: solid profiles, distinct from the bordered deliverable cards */
.profiles {
    display: grid;
    gap: var(--space-m);
    margin-bottom: var(--space-m);
}

@media (min-width: 48rem) {
    .profiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.profiles > li {
    margin: 0;
    padding: var(--space-m);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--lav-grey) 50%, var(--alabaster-grey));
    font-size: var(--text-m);
    line-height: 1.6;
}

.proposal .profile-role {
    margin-bottom: var(--space-s);
    font-size: var(--text-s);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.profiles p {
    margin: 0;
    font-size: inherit;
}

.proposal details {
    margin-bottom: var(--space-s);
    font-size: var(--text-m);
}

.proposal details[open] summary {
    margin-bottom: var(--space-s);
}

.proposal details :is(li, p) {
    margin: 0 0 var(--space-s);
    font-size: var(--text-m);
    line-height: 1.6;
}

.proposal details h4 {
    margin: var(--space-m) 0 var(--space-s);
    font-size: var(--text-m);
    font-weight: 700;
}

@media print {
    header, footer, .proposal-actions, .proposal-toc, .panels .cta {
        display: none;
    }

    body, .proposal-summary, .panels > li {
        background: none;
        color: #000;
    }

    .proposal-summary, .panels, .panels > li {
        width: auto;
        margin: 0;
        padding: 0;
    }

    .term-trigger {
        text-decoration: none;
    }

    .card {
        break-inside: avoid;
    }
}

/* Bulleted lists in the scope section */
#scope ul {
    padding-left: var(--space-m);
    list-style: disc;
}

#scope details, #scope details :is(li, p) {
    font-size: var(--text-l);
}