/* Middle Powers RFP — stylesheet
   Sober, black and white, IBM Plex Sans. One text column three alphabets wide.
   From 1056px the footnotes hang in a right-hand margin as sidenotes; from
   1328px a scroll-tracking list of sections sits in the left margin. On narrow
   screens the notes fold inline when their number is tapped. */

:root {
  --ink: #020202;        /* deep black for text */
  --ink-mid: #0f0f0f;    /* labels, navigation, dateline */
  --ink-soft: #222;      /* sidenotes, numbers, footer */
  --ink-faint: #444;     /* link underlines */
  --rule: #c9c9c9;
  --paper: #fff;

  --measure: 35rem;      /* body column: three lowercase alphabets of 18px Plex Sans (~85 characters) */
  --sn-w-min: 12rem;     /* sidenote column grows with the window … */
  --sn-w-max: 18rem;     /* … up to this */
  --sn-w: var(--sn-w-min);
  --sn-gap: 2.75rem;     /* gutter between body and sidenotes */
  --nav-w: 9rem;         /* section navigation column */
  --nav-gap: 7rem;       /* gutter between navigation and body */
  --gutter: 1rem;        /* page side padding (never below 16px) */
}

/* ---------------------------------------------------------------- base */

html {
  font-size: 125%;                       /* 1rem = 20px: the layout's unit */
  -webkit-text-size-adjust: 100%;
}
@media (max-width: 40em) {
  html { font-size: 112.5%; }            /* 1rem = 18px on phones */
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  container-type: inline-size;   /* lets the sidenote width follow the real page width */
  background: var(--paper);
  color: var(--ink);
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 0.9rem;                     /* 18px body text (16px on phones) */
  line-height: 1.55;
  font-feature-settings: "kern" 1, "liga" 1;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--ink-faint);
  text-underline-offset: 0.14em;
}
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

strong { font-weight: 600; }

sup {
  font-size: 0.68em;
  line-height: 0;
  position: relative;
  top: -0.55em;
  vertical-align: baseline;
  font-variant-numeric: lining-nums;
}

section[id], h2[id], h3[id], details[id], li[id] { scroll-margin-top: 1.5rem; }

/* ---------------------------------------------------------------- layout */

.page {
  box-sizing: border-box;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

@media (min-width: 40em) {
  :root { --gutter: 1.5rem; }
}

/* Sidenotes: widen the page to hold the note column; the text stays in the
   left part and the notes float out to its right. */
@media (min-width: 66em) {
  .page {
    /* the note column takes whatever is left, between its minimum and maximum */
    --sn-w: clamp(var(--sn-w-min),
                  calc(100cqi - 2 * var(--gutter) - var(--measure) - var(--sn-gap)),
                  var(--sn-w-max));
    max-width: calc(var(--measure) + var(--sn-gap) + var(--sn-w-max) + 2 * var(--gutter));
  }
  .masthead, .article, .colophon { width: var(--measure); }
}

/* Section navigation: a grid with a sticky nav column on the left. */
.side-toc { display: none; }
@media (min-width: 86em) {
  .toc { display: none; }   /* the side navigation carries the same list */
  .page {
    --sn-w: clamp(var(--sn-w-min),
                  calc(100cqi - 2 * var(--gutter) - var(--nav-w) - var(--nav-gap) - var(--measure) - var(--sn-gap)),
                  var(--sn-w-max));
    max-width: calc(var(--nav-w) + var(--nav-gap) + var(--measure) + var(--sn-gap) + var(--sn-w-max) + 2 * var(--gutter));
    display: grid;
    grid-template-columns: var(--nav-w) var(--nav-gap) var(--measure) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-items: start;
  }
  .masthead { grid-column: 3; grid-row: 1; }
  .article  { grid-column: 3; grid-row: 2; }
  .colophon { grid-column: 3; grid-row: 3; }
  .side-toc {
    display: block;
    grid-column: 1;
    grid-row: 2 / 4;
    position: sticky;
    top: 2rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
  }
}

/* ---------------------------------------------------------------- masthead */

/* Title through globe is one centred block; the text below is left-aligned. */
.masthead { padding-top: 3.25rem; text-align: center; }

.orgs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  margin: 0 0 1rem;
}
.org { display: inline-flex; align-items: center; text-decoration: none; }
.org img { display: block; width: auto; }
.org-astralis img { height: 1.9rem; }
.org-macroscopic img { height: 0.95rem; }
.orgs-with {
  font-size: 0.75rem;
  color: var(--ink);
  margin: 0 0.75rem;
}
@media (max-width: 40em) {
  .org-astralis img { height: 1.6rem; }
  .org-macroscopic img { height: 0.8rem; }
  .orgs-with { margin: 0 0.6rem; }
}

.label, .toc-title {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
  font-variant-numeric: lining-nums;
}

h1.title {
  font-size: 1.9rem;                     /* 38px: the widest one-line fit in the column */
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.015em;
  text-wrap: balance;
  margin: 0 0 0.45rem;
}

.subtitle {
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--ink);
  margin: 0 0 1.75rem;
}

.dateline {
  font-size: 0.8rem;
  color: var(--ink-mid);
  margin: 0 0 2.25rem;
}

/* The globe (drawn by globe.js; an empty box without scripts). */
.globe {
  display: block;
  width: 230px;
  height: 230px;
  margin: 0 auto 3rem;
}
@media (max-width: 40em) {
  .globe { width: 184px; height: 184px; margin-bottom: 2.5rem; }
}

/* ---------------------------------------------------------------- text */

p { margin: 0 0 0.8rem; }

.lede p {
  font-size: 1.15rem;
  line-height: 1.45;
  margin-bottom: 1rem;
  hyphens: manual;
  -webkit-hyphens: manual;
}

h2, h3 {
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  page-break-after: avoid;
}
h2 { font-size: 1.4rem; margin: 3.25rem 0 1rem; }
h3 { font-size: 1.05rem; line-height: 1.3; margin: 2rem 0 0.6rem; }

.article > section.level2 { margin-top: 3.5rem; }
.article > section.level2 > h2 { margin-top: 0; }

h2 .num, h3 .num {
  display: inline-block;
  text-indent: 0;
  font-weight: 400;
  color: var(--ink-soft);
  font-variant-numeric: lining-nums;
}

/* Section and item numbers are links: clicking one copies the URL of that
   section (with JavaScript) or simply jumps to it (without). */
a.num {
  position: relative;
  text-decoration: none;
  color: var(--ink-soft);
}
a.num:hover, a.num:focus-visible { color: var(--ink); }
a.num.copied::after {
  content: "Link copied";
  position: absolute;
  left: 0;
  bottom: 100%;
  margin-bottom: 0.15rem;
  font-size: 0.6rem;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  text-indent: 0;
  font-weight: 400;
  color: var(--ink);
}
/* Numbered headings hang their number: a wrapped title aligns under its own
   first word, not under the number. */
h2:has(> .num) { padding-left: 1.15em; text-indent: -1.15em; }
h2 > .num { min-width: 1.15em; }
h3:has(> .num) { padding-left: 1.9em; text-indent: -1.9em; }
h3 > .num { min-width: 1.9em; }

em { font-style: italic; }

/* FAQ: each question folds open. */
details.faq { margin: 0 0 0.6rem; }
details.faq > summary {
  list-style: none;
  cursor: pointer;
  font-weight: 600;
  position: relative;
  padding-left: 1.3rem;
}
details.faq > summary::-webkit-details-marker { display: none; }
details.faq > summary::before {
  content: "+";
  position: absolute;
  left: 0;
  width: 1rem;
  text-align: center;
  font-weight: 400;
  color: var(--ink-soft);
}
details.faq[open] > summary::before { content: "–"; }
details.faq > summary:hover::before { color: var(--ink); }
details.faq[open] > summary { margin-bottom: 0.45rem; }
details.faq > :not(summary) { margin-left: 1.3rem; }
details.faq > :last-child { margin-bottom: 0.3rem; }
details.advisor { margin: 0 0 0.75rem; }
details.advisor > summary { font-weight: 600; }

/* Lists. Ordered lists keep their numbers; bullets are en dashes. */
ol, ul { margin: 0 0 0.8rem; padding-left: 1.5rem; }
li { margin: 0; }
li + li { margin-top: 0.4rem; }
li > p { margin: 0 0 0.4rem; }
li > p:last-child { margin-bottom: 0; }
li > ul, li > ol { margin: 0.45rem 0 0.15rem; }

ol { list-style: decimal; }
ol > li::marker { color: var(--ink-soft); font-variant-numeric: lining-nums; }

ul { list-style: none; padding-left: 1.25rem; }
ul > li { position: relative; }
ul > li::before {
  content: "–";
  position: absolute;
  left: -1.15rem;
  color: var(--ink-soft);
}

/* Example-project lists sit one step down in size as well as indentation. */
.article li li { font-size: 0.85rem; }
.article li li li { font-size: inherit; }

/* Numbered focus areas: the number is a copy-link anchor in the marker's place,
   and items breathe more than ordinary list items. */
ol.numbered { list-style: none; padding-left: 1.5rem; }
ol.numbered > li { position: relative; }
ol.numbered > li + li { margin-top: 1.1rem; }
ol.numbered > li > a.num {
  position: absolute;
  left: -1.5rem;
  top: 0;
  width: 1.2rem;
  text-align: right;
  font-variant-numeric: lining-nums;
}

/* ---------------------------------------------------------------- tables */

/* Hairline tables (privacy notice). Header row set like the labels; the
   wrapper scrolls sideways on phones rather than breaking the column. */
.table-scroll { overflow-x: auto; margin: 1.25rem 0 1.5rem; }
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  line-height: 1.45;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.55rem 1rem 0.6rem 0;
  border-top: 1px solid var(--rule);
}
th {
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
  border-top: none;
  padding-top: 0.45rem;
}
th:last-child, td:last-child { padding-right: 0; }
tbody tr:first-child td { border-top: 1px solid var(--ink-faint); }
td:first-child { width: 45%; }
@media (max-width: 40em) {
  table { font-size: 0.8rem; min-width: 26rem; }
}

/* ---------------------------------------------------------------- apply strip */

/* Deadline above, a large centred button below, between the page's only 1px
   black rules. */
.apply {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  margin: 2rem 0;
  padding: 1.35rem 0 1.5rem;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.apply p { margin: 0; }
.apply .label { margin-right: 0.5em; }

.button {
  display: inline-block;
  box-sizing: border-box;
  border: 1px solid var(--ink);
  padding: 0.3em 1.1em 0.35em;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease;
}
.button:hover, .button:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
.apply .button {
  font-size: 1.1rem;
  padding: 0.55em 2.6em 0.6em;
  min-width: 12rem;
  background: var(--ink);
  color: var(--paper);
}
.apply .button:hover, .apply .button:focus-visible {
  background: var(--paper);
  color: var(--ink);
}

@media (max-width: 40em) {
  .apply .apply-action { align-self: stretch; }
  .apply .button { display: block; width: 100%; }
}

/* ---------------------------------------------------------------- advisors (in the intro) */

.advisors {
  clear: both;
  margin: 2.75rem 0 0;
  padding: 1.1rem 0 1.25rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.advisors .label { margin: 0 0 0.6rem; }
.advisor-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.advisor-list > li { position: static; margin: 0; }
.advisor-list > li + li { margin-top: 0.35rem; }
.advisor-list > li::before { content: none; }
.advisor-list a {
  display: inline-block;
  font-size: 1.15rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
}
.advisor-list a:hover, .advisor-list a:focus-visible { text-decoration: underline; }

/* ---------------------------------------------------------------- contents (in the text) */

.toc { margin: 2.5rem 0 0; }
.toc-title { margin: 0 0 0.5rem; }
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc li { margin: 0; padding-left: 1.5em; text-indent: -1.5em; }
.toc li + li { margin-top: 0.15rem; }
.toc a { text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.toc .num {
  display: inline-block;
  text-indent: 0;
  min-width: 1.5em;
  color: var(--ink-soft);
  font-variant-numeric: lining-nums tabular-nums;
}
/* Subsections share one text offset whether or not they carry a number. */
.toc ol ol { margin: 0.15rem 0 0.45rem; }
.toc ol ol li { padding-left: 2em; text-indent: 0; font-size: 0.85rem; }
.toc ol ol li:has(> a > .num) { text-indent: -2em; }
.toc ol ol .num { min-width: 2em; }

/* ---------------------------------------------------------------- section navigation (wide screens) */

.side-toc {
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--ink-mid);
}
.side-toc .toc-title { margin: 0 0 0.6rem; }
.side-toc ol { list-style: none; margin: 0; padding: 0; }
.side-toc > ol {
  --indent: 0.9rem;
  border-left: 1px solid var(--rule);
  padding-left: var(--indent);
}
.side-toc li {
  position: relative;
  margin: 0;
  padding-left: 1.4em;
  text-indent: -1.4em;
  --rule-offset: var(--indent);
}
.side-toc li + li { margin-top: 0.2rem; }
.side-toc ol ol { margin: 0.2rem 0 0.35rem; }
/* Subsections share one text offset whether or not they carry a number. */
.side-toc ol ol li {
  padding-left: 1.9em;
  text-indent: 0;
  --rule-offset: calc(var(--indent) + 1.4em);
}
.side-toc ol ol li:has(> a > .num) { text-indent: -1.9em; }
.side-toc a {
  display: block;
  color: inherit;
  text-decoration: none;
}
.side-toc a:hover { color: var(--ink); }
.side-toc .num {
  display: inline-block;
  text-indent: 0;
  min-width: 1.4em;
  font-variant-numeric: lining-nums tabular-nums;
}
.side-toc ol ol .num { min-width: 1.9em; }
.side-toc li.is-active > a,
.side-toc li.is-parent > a { color: var(--ink); }
.side-toc li.is-active::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--rule-offset) - 1px);
  top: 0.2em;
  bottom: 0.2em;
  width: 1px;
  background: var(--ink);
}
.side-toc .side-apply { margin: 1.5rem 0 0; }
.side-toc .button {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  padding: 0.4em 1em 0.45em;
  color: var(--ink);
}
.side-toc .button:hover, .side-toc .button:focus-visible { color: var(--paper); }

/* ---------------------------------------------------------------- sidenotes */

.sn-toggle { display: none; }

.sn-ref {
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
.sn-ref sup { padding: 0 0.05em; }

.sidenote {
  color: var(--ink-soft);
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 8 4 4;
}
.sidenote a { text-decoration-color: var(--rule); }
.sidenote a:hover { text-decoration-color: var(--ink); }
.sidenote .sn-p { display: block; }
.sidenote .sn-p + .sn-p { margin-top: 0.4em; }

/* Wide: hang in the right margin, stacked without overlap. */
@media (min-width: 66em) {
  .sidenote {
    float: right;
    clear: right;
    width: var(--sn-w);
    margin-right: calc(-1 * (var(--sn-w) + var(--sn-gap)));
    margin-top: 0.2rem;
    margin-bottom: 0.9rem;
    text-align: left;
    font-size: 0.75rem;
    line-height: 1.45;
  }
  .sidenote .sn-num { margin-right: 0.1em; }
}

/* Narrow: hidden until the reader taps the number, then folds in below. */
@media (max-width: 65.99em) {
  .sidenote { display: none; }
  .sn-toggle:checked + .sidenote {
    display: block;
    margin: 0.55rem 0 0.8rem 0.75rem;
    padding-left: 0.85rem;
    border-left: 1px solid var(--rule);
    font-size: 0.8rem;
    line-height: 1.5;
  }
  .sn-ref { cursor: pointer; }
  .sn-ref sup {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-decoration-color: var(--ink-faint);
    text-underline-offset: 0.12em;
    padding: 0 0.15em;
  }
  .sn-toggle:checked ~ .sn-ref sup { text-decoration-color: var(--ink); }
}

@media (max-width: 40em) {
  p, li { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 4 4; }
}

/* ---------------------------------------------------------------- footer */

.colophon {
  margin-top: 4rem;
  padding-bottom: 3.5rem;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.colophon .apply { margin: 0 0 1.5rem; color: var(--ink); font-size: 0.9rem; }
.colophon p { margin: 0 0 0.4rem; }
.colophon .sep { color: var(--ink-faint); margin: 0 0.15em; }

/* ---------------------------------------------------------------- print */

@media print {
  @page { margin: 2cm; }
  html { font-size: 11pt; }
  .page, .masthead, .article, .colophon { width: auto; max-width: none; padding: 0; display: block; }
  .sidenote {
    display: block;
    float: none;
    width: auto;
    margin: 0.3em 0 0.6em 1.5em;
    text-align: left;
    font-size: 0.85em;
  }
  .sn-toggle, .toc, .side-toc, .globe { display: none; }
  .apply { display: block; }
  .apply p + p { margin-top: 0.4em; }
  .button { border: none; padding: 0; font-weight: 400; text-decoration: underline; }
  .button::after { content: " " attr(href); word-break: break-all; }
  a { text-decoration-color: var(--ink); }
}