/* OSHUP theme */

/* ---------- Tokens ---------- */
:root {
  --ink: #1b1f23;
  --ink-muted: #555d66;
  --rule: #d8dbdf;
  --bg: #ffffff;
  --bg-alt: #f5f6f7;
  --accent: #1f3a5f;        /* deep navy: the only colour on the page */
  --accent-hover: #142840;
  --serif: var(--gh-font-heading, Georgia, "Times New Roman", serif);
  --sans: var(--gh-font-body, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
  --measure: 68ch;
  --wrap: 1080px;
  --content: 720px;
  --wide: 1000px;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
}
h1, h2, h3, h4 { font-family: var(--serif); font-weight: normal; line-height: 1.25; margin: 0 0 .5em; }
h1 { font-size: clamp(1.75rem, 3.5vw, 2.375rem); }
h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.1875rem; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-hover); }
img { max-width: 100%; height: auto; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 32px; } }
.muted { color: var(--ink-muted); }
.lede { font-size: 1.1875rem; max-width: var(--measure); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; background: var(--bg); color: var(--accent); padding: 8px 12px; border: 2px solid var(--accent); z-index: 10; }

/* Keyboard focus: always visible, never removed */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
main:focus { outline: none; }

/* ---------- Header ---------- */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px 32px; padding-top: 20px; padding-bottom: 20px;
}
.brand { flex: none; text-decoration: none; color: var(--ink); display: flex; align-items: center; gap: 12px; }
.brand-logo { max-height: 48px; width: auto; }
.brand-mark {
  height: 40px; padding: 0 9px; flex: none; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-family: var(--serif); font-size: .9375rem; letter-spacing: .06em;
}
.brand-name { font-family: var(--serif); font-size: 1.1875rem; line-height: 1.2; max-width: 11em; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
/* From tablet width up the nav stays beside the brand; its links wrap inside their own column, right-aligned */
@media (min-width: 720px) {
  .site-header .wrap { flex-wrap: nowrap; }
  .site-nav { flex: 1 1 auto; min-width: 0; }
  .site-nav ul { justify-content: flex-end; }
}
.site-nav a { color: var(--ink); text-decoration: none; font-size: 1.0625rem; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--accent); text-decoration: underline; }

/* ---------- Sections ---------- */
section { padding: 48px 0; border-bottom: 1px solid var(--rule); }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.section-head h2 { margin: 0; }
.section-head a { font-size: .9375rem; white-space: nowrap; }
.list-page { border-bottom: 0; }
.list-page h1 { margin-bottom: 24px; }

/* Position statement */
.position { background: var(--bg-alt); }
/* Current issues sit inside the full-bleed position band, as cards */
.home-issues-head { margin-top: 40px; }
.issue-cards { display: grid; gap: 24px; }
@media (min-width: 720px) { .issue-cards { grid-template-columns: repeat(3, 1fr); } }
.issues.issue-cards > li, .issues.issue-cards > li:last-child { border: 0; border-top: 3px solid var(--accent); padding: 16px 0 0; }
.issue-cards h3 { margin-bottom: .5em; }
.issue-cards p { font-size: .9375rem; }

/* Our priorities / Our principles on the homepage: page bodies, stacked, left-aligned */
.statement .gh-content { font-size: 1.0625rem; line-height: 1.6; }
.statement .gh-content > * { margin-left: 0; max-width: var(--measure); }

/* Priorities and principles as headed paragraphs, on the homepage and on their own pages */
:is(.statement, .page-priorities, .page-principles) .gh-content h3 { margin-top: 1.75em; }
:is(.statement, .page-priorities, .page-principles) .gh-content > h3:first-child { margin-top: 0; }
:is(.statement, .page-priorities, .page-principles) .gh-content h3 + p { margin-top: .5em; }

/* Homepage priorities: each heading is a button that opens its paragraphs (site.js) */
.accordion { border-top: 1px solid var(--rule); max-width: var(--measure); }
.accordion:last-child { border-bottom: 1px solid var(--rule); }
.gh-content > .accordion, .statement .gh-content > .accordion + .accordion { margin-top: 0; }
.statement .gh-content .accordion h3 { margin: 0; font-size: 1.1875rem; }
.accordion button { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; width: 100%; padding: 16px 0; border: 0; background: none; font: inherit; color: var(--accent); text-align: left; cursor: pointer; }
.accordion button:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; }
.accordion button::after { content: "+"; flex: none; font-family: var(--sans); font-size: 1.5rem; line-height: 1; }
.accordion button[aria-expanded="true"]::after { content: "−"; }
.accordion-panel { padding-bottom: 20px; }
.accordion-panel > * + * { margin-top: 1em; }

/* Resource Library: one paragraph and a link, under In the news */
.resource-library p { max-width: var(--measure); margin: 0; font-size: 1.0625rem; }
.resource-library .library-link { margin-top: 12px; font-size: 1rem; font-weight: 600; }

/* Partner logo bar, last thing on the homepage before the footer */
.partners h2 { font-size: 1.1875rem; text-align: center; margin-bottom: 24px; }
.partner-logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 24px 48px; }
.partner-logos a { display: block; text-decoration: none; }
.partner-logos img { display: block; max-height: 56px; max-width: 180px; width: auto; height: auto; }
.partner-logos a:hover img { opacity: .8; }
.partner-name { display: block; font-family: var(--serif); font-size: 1.125rem; line-height: 1.3; max-width: 16em; text-align: center; }
.partner-logos li > .partner-name { color: var(--ink); }

/* Press releases */
.releases { list-style: none; margin: 0; padding: 0; }
.releases li { padding: 20px 0; border-top: 1px solid var(--rule); display: grid; gap: 4px 32px; }
.releases li:last-child { border-bottom: 1px solid var(--rule); }
@media (min-width: 720px) { .releases li { grid-template-columns: 9rem 1fr; } }
.releases time { font-size: .9375rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.releases h2, .releases h3 { margin: 0 0 4px; }
.releases :is(h2, h3) a { color: var(--ink); text-decoration: none; }
.releases :is(h2, h3) a:hover { color: var(--accent); text-decoration: underline; }
.releases p { margin: 0; color: var(--ink-muted); max-width: var(--measure); }

/* Current issues: like releases, without the date column */
.issues { list-style: none; margin: 0; padding: 0; }
.issues > li { padding: 20px 0; border-top: 1px solid var(--rule); }
.issues > li:last-child { border-bottom: 1px solid var(--rule); }
.issues h2, .issues h3 { margin: 0 0 4px; }
.issues :is(h2, h3) a { color: var(--accent); text-decoration: none; }
.issues p { margin: 0; color: var(--ink-muted); max-width: var(--measure); }
/* The whole item is clickable: the title link stretches over it, with a "Read more" cue below */
.issue-item { position: relative; }
.issue-item :is(h2, h3) a::after { content: ""; position: absolute; inset: 0; }
/* Keyboard focus outlines the whole item, the area the link covers, instead of just the title */
.issue-item:has(a:focus-visible) { outline: 3px solid var(--accent); outline-offset: 4px; }
.issue-item:has(a:focus-visible) a { outline: none; }
.issue-item .read-more { display: inline-block; margin-top: 8px; font-size: .9375rem; font-weight: 600; color: var(--accent); }
.issue-item:hover :is(h2, h3) a, .issue-item:hover .read-more { color: var(--accent-hover); text-decoration: underline; }


/* In the news: like publications, unnumbered */
.coverage { list-style: none; margin: 0; padding: 0; max-width: 80ch; }
.coverage li { margin-bottom: 16px; }
.coverage .pub-citation { display: block; color: var(--ink-muted); font-size: .9375rem; }

/* Publications */
.pubs { margin: 0; padding: 0 0 0 1.25em; max-width: 80ch; }
.pubs li { margin-bottom: 16px; padding-left: 4px; }
.pub-title { font-weight: 600; }
.pubs .pub-citation { display: block; color: var(--ink-muted); font-size: .9375rem; }

/* Media + newsletter */
.two-col { display: grid; gap: 48px; }
@media (min-width: 820px) { .two-col { grid-template-columns: 1fr 1fr; } }
.contact-card { border: 1px solid var(--rule); padding: 24px; }
.contact-card dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; }
.contact-card dt { color: var(--ink-muted); font-size: .9375rem; }
.contact-card dd { margin: 0; }

.signup { display: grid; gap: 12px; max-width: 28rem; }
.signup label { font-size: .9375rem; font-weight: 600; }
.signup .row { display: flex; gap: 8px; flex-wrap: wrap; }
.signup input[type="email"] {
  flex: 1 1 14rem; font: inherit; padding: 10px 12px;
  border: 1px solid #8a9199; border-radius: 0; background: #fff; color: var(--ink);
}
.signup input[type="email"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.form-status { margin: 0; font-size: .9375rem; }
.form-status:empty { display: none; }
.signup.error .form-status { color: #9b1c1c; }
.signup.loading .btn { opacity: .6; pointer-events: none; }

.btn {
  display: inline-block; font: inherit; font-size: .9375rem; font-weight: 600; padding: 10px 20px; cursor: pointer;
  background: var(--accent); color: #fff; border: 1px solid var(--accent); border-radius: 0; text-decoration: none;
}
.btn:hover { background: var(--accent-hover); color: #fff; }

/* Pagination (Ghost's default {{pagination}} markup) */
.pagination { display: flex; justify-content: space-between; align-items: center; margin-top: 32px; font-size: .9375rem; color: var(--ink-muted); }

/* ---------- Articles ---------- */
.article { padding: 48px 16px 64px; }
.article-head, .article-foot, .gh-content > * { max-width: var(--content); margin-left: auto; margin-right: auto; }
.article-head { margin-bottom: 32px; padding-bottom: 24px; border-bottom: 1px solid var(--rule); }
.kicker { font-size: .8125rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; }
.article-head .meta, .article-head .pub-citation { color: var(--ink-muted); margin: 0; }
.article-image { max-width: var(--wide); margin: 0 auto 32px; }
.article-image figcaption { font-size: .875rem; color: var(--ink-muted); margin-top: 8px; }
.article-foot { margin-top: 40px; }
.end-mark { text-align: center; color: var(--ink-muted); margin: 0 0 40px; }

/* Post content, including whatever arrives pasted from Word */
.gh-content { font-size: 1.125rem; }
.gh-content > * + * { margin-top: 1em; }
.gh-content p, .gh-content ul, .gh-content ol { margin-bottom: 0; }
.gh-content h2 { margin-top: 1.75em; }
.gh-content h3 { margin-top: 1.5em; }
.gh-content li + li { margin-top: .25em; }
.gh-content blockquote { margin-top: 1.5em; padding-left: 20px; border-left: 3px solid var(--accent); font-family: var(--serif); font-size: 1.25rem; }
.gh-content hr { border: 0; border-top: 1px solid var(--rule); margin: 2em auto; }
.gh-content figure { margin-top: 1.5em; margin-bottom: 0; }
.gh-content figcaption { font-size: .875rem; color: var(--ink-muted); margin-top: 8px; text-align: center; }
.gh-content table { border-collapse: collapse; width: 100%; font-size: 1rem; }
.gh-content th, .gh-content td { border: 1px solid var(--rule); padding: 8px 12px; text-align: left; vertical-align: top; }
.gh-content th { background: var(--bg-alt); }

/* Required by Ghost for editor cards */
.gh-content > .kg-width-wide { max-width: var(--wide); }
.gh-content > .kg-width-full { max-width: none; margin-left: -16px; margin-right: -16px; }
.kg-width-full img { width: 100%; }

/* ---------- Footer ---------- */
.site-footer { padding: 32px 0 48px; font-size: .875rem; color: var(--ink-muted); border-top: 1px solid var(--rule); }
.home-template .site-footer { border-top: 0; }
.site-footer .wrap { display: grid; gap: 16px; }
@media (min-width: 720px) { .site-footer .wrap { grid-template-columns: 2fr 1fr; } }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { padding: 2px 0; }   /* keeps links at least 24px tall (WCAG 2.5.8) */
.site-footer a { color: var(--ink-muted); }
.site-footer .land { max-width: var(--measure); }
.site-footer .copyright { margin: 0; }
.site-footer .social { margin-top: 12px; }

/* ---------- Windows High Contrast / forced colours ---------- */
@media (forced-colors: active) {
  .brand-mark, .btn, .asks li { border: 1px solid CanvasText; }
}