/*
 * Steadfast – Information Memorandum.
 *
 * Jewell Projects house identity, translated from the A4 document standard to
 * a document you read in a browser: Poppins, JP blue (#0066FF) reserved for
 * titles and section headings, black body, hairline rules, no decoration.
 *
 * Self-contained on purpose. This folder deploys to Cloudflare Pages with no
 * build step, so nothing here imports from src/ or site/.
 *
 * Fonts are served from this origin rather than fonts.googleapis.com. An
 * investor opening a confidential memorandum should not tell a third party
 * that they did.
 */

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poppins-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/poppins-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/poppins-700.woff2') format('woff2');
}

/* ══ tokens ══ */

:root {
  --font: 'Poppins', 'Helvetica Neue', Arial, sans-serif;

  --jp-blue: #0066ff;
  --jp-blue-deep: #0047b3;

  --c-paper: #ffffff;
  --c-page: #eef0f3;
  --c-ink: #000000;
  --c-ink-soft: #3d4249;
  --c-ink-faint: #666666;
  --c-rule: #d6dae0;
  --c-rule-strong: #000000;
  --c-tint: #f4f6f9;

  --c-tbc: #7a4c00;
  --c-tbc-bg: #fff3d6;
  --c-tbc-edge: #e0a72e;

  --c-good: #1d6b45;
  --c-good-bg: #e8f4ee;
  --c-watch: #7f6212;
  --c-watch-bg: #fbf3dc;
  --c-open: #5c626a;
  --c-open-bg: #eef0f3;

  --measure: 74ch;
  --rail: 268px;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 2.75rem;
  --s8: 4rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --jp-blue: #5f9dff;
    --jp-blue-deep: #8fbaff;
    --c-paper: #14171b;
    --c-page: #0c0e11;
    --c-ink: #eceef0;
    --c-ink-soft: #b4bac1;
    --c-ink-faint: #8b9198;
    --c-rule: #2c3138;
    --c-rule-strong: #6d747c;
    --c-tint: #1b1f24;
    --c-tbc: #f0c46a;
    --c-tbc-bg: #33280f;
    --c-tbc-edge: #7a5f1c;
    --c-good: #85c9a4;
    --c-good-bg: #16281f;
    --c-watch: #d9b46c;
    --c-watch-bg: #2b2411;
    --c-open: #a5abb2;
    --c-open-bg: #1e2227;
  }
}

/* ══ base ══ */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--s6);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--c-page);
  color: var(--c-ink);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

p {
  margin: 0 0 var(--s4);
  max-width: var(--measure);
}

a {
  color: var(--jp-blue);
  text-underline-offset: 0.18em;
}

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

strong {
  font-weight: 600;
}

:focus-visible {
  outline: 2px solid var(--jp-blue);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 40;
  background: var(--jp-blue);
  color: #fff;
  padding: var(--s3) var(--s4);
  font-weight: 600;
}

.skip:focus {
  left: var(--s4);
  top: var(--s4);
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ══ shell ══ */

.sheet {
  max-width: 1240px;
  margin: 0 auto;
  background: var(--c-paper);
  min-height: 100vh;
}

@media (min-width: 1000px) {
  .sheet {
    display: grid;
    grid-template-columns: var(--rail) minmax(0, 1fr);
    align-items: start;
  }
}

.doc {
  padding: var(--s6) var(--s5) var(--s8);
  min-width: 0;
}

@media (min-width: 700px) {
  .doc {
    padding: var(--s8) var(--s7) var(--s8);
  }
}

@media (min-width: 1000px) {
  .doc {
    padding: var(--s8) var(--s8) var(--s8) var(--s7);
    border-left: 1px solid var(--c-rule);
  }
}

/* ══ contents rail ══ */

.rail {
  padding: var(--s5);
  border-bottom: 1px solid var(--c-rule);
}

@media (min-width: 1000px) {
  .rail {
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
    padding: var(--s8) var(--s5) var(--s6) var(--s5);
    border-bottom: none;
    overscroll-behavior: contain;
  }
}

.rail__mark {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--jp-blue);
  margin: 0 0 var(--s2);
}

/*
 * On a phone the document's own brand block is the next thing on screen, so
 * the rail does not repeat it – it carries the contents and the print control
 * and nothing else.
 */
@media (max-width: 999px) {
  .rail__mark,
  .rail__doc {
    display: none;
  }
}

.rail__doc {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--c-ink);
  margin: 0 0 var(--s5);
  line-height: 1.35;
}

.rail__label,
.toc__summary {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin: 0 0 var(--s3);
}

/*
 * Twenty sections is a whole phone screen of contents before the document
 * starts, so on narrow viewports the list collapses. It ships open, and only
 * closes if the script runs – an unopenable list beats an invisible one.
 */
.toc {
  margin: 0;
}

.toc__summary {
  cursor: pointer;
  list-style: none;
  padding: var(--s2) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 34px;
}

.toc__summary::-webkit-details-marker {
  display: none;
}

.toc__summary::after {
  content: '';
  width: 0.5rem;
  height: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform 0.15s ease;
}

.toc[open] > .toc__summary::after {
  transform: rotate(225deg) translate(-1px, -1px);
}

@media (prefers-reduced-motion: reduce) {
  .toc__summary::after {
    transition: none;
  }
}

@media (min-width: 1000px) {
  .toc__summary {
    cursor: default;
    pointer-events: none;
  }

  .toc__summary::after {
    display: none;
  }
}

.rail ol {
  list-style: none;
  margin: 0 0 var(--s5);
  padding: 0;
  counter-reset: toc;
}

.rail li {
  counter-increment: toc;
  margin: 0;
}

.rail li a {
  display: grid;
  grid-template-columns: 2.1em 1fr;
  gap: var(--s1);
  padding: 0.3rem 0;
  font-size: 0.85rem;
  line-height: 1.35;
  color: var(--c-ink-soft);
  text-decoration: none;
}

.rail li a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--c-ink-faint);
  font-variant-numeric: tabular-nums;
  font-size: 0.76rem;
  padding-top: 0.1em;
}

.rail li a:hover {
  color: var(--jp-blue);
}

.rail li a[aria-current='true'] {
  color: var(--jp-blue);
  font-weight: 600;
}

.rail li a[aria-current='true']::before {
  color: var(--jp-blue);
}

.rail__actions {
  border-top: 1px solid var(--c-rule);
  padding-top: var(--s4);
}

.rail__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 42px;
  padding: 0 var(--s4);
  border: 1px solid var(--jp-blue);
  background: transparent;
  color: var(--jp-blue);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
}

.rail__btn:hover {
  background: var(--jp-blue);
  color: #fff;
}

.rail__btn--deck {
  margin-bottom: var(--s2);
  text-decoration: none;
  background: var(--jp-blue);
  color: #fff;
  border-color: var(--jp-blue);
}

.rail__btn--deck:hover {
  background: var(--jp-blue-deep);
  border-color: var(--jp-blue-deep);
  color: #fff;
}

.rail__note {
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--c-ink-faint);
  margin: var(--s3) 0 0;
}

/* ══ brand block ══ */

.brand__mark {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--jp-blue);
  margin: 0 0 var(--s4);
}

.brand__title {
  font-size: clamp(2rem, 5.4vw, 3.05rem);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--jp-blue);
  margin: 0 0 var(--s3);
  max-width: 18ch;
}

.brand__sub {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--jp-blue);
  margin: 0 0 var(--s6);
  max-width: 30ch;
}

/* ══ metadata ══ */

.meta {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 var(--s5);
  font-size: 0.88rem;
}

.meta th,
.meta td {
  text-align: left;
  vertical-align: top;
  padding: 0.42rem 0;
  border: none;
}

.meta th {
  width: 11.5rem;
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-ink);
  padding-right: var(--s4);
  padding-top: 0.62rem;
}

.meta td {
  color: var(--c-ink);
}

@media (max-width: 520px) {
  .meta th,
  .meta td {
    display: block;
    width: auto;
    padding: 0;
  }
  .meta th {
    padding-top: var(--s3);
  }
  .meta td {
    padding-bottom: var(--s2);
  }
}

.rule {
  border: none;
  border-top: 0.75pt solid var(--c-rule-strong);
  margin: 0 0 var(--s6);
}

/* ══ sections ══ */

.sec {
  margin: 0 0 var(--s8);
  scroll-margin-top: var(--s5);
}

.sec > h2 {
  display: grid;
  grid-template-columns: 2.5em 1fr;
  gap: var(--s2);
  align-items: baseline;
  font-size: 1.32rem;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--jp-blue);
  margin: 0 0 var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--c-rule);
}

.sec > h2 .num {
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--jp-blue);
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
}

.sec h3 {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--c-ink);
  margin: var(--s6) 0 var(--s3);
  max-width: var(--measure);
}

.sec h3:first-of-type {
  margin-top: var(--s5);
}

.lede {
  font-size: 1.09rem;
  line-height: 1.55;
  color: var(--c-ink);
  max-width: 64ch;
}

.faint {
  color: var(--c-ink-faint);
  font-size: 0.86rem;
  line-height: 1.5;
}

ul,
ol {
  max-width: var(--measure);
  margin: 0 0 var(--s4);
  padding-left: 1.35rem;
}

li {
  margin: 0 0 var(--s2);
}

li > ul,
li > ol {
  margin-top: var(--s2);
}

/* ══ pull quote ══ */

.pull {
  margin: var(--s5) 0;
  padding: 0 0 0 var(--s4);
  border-left: 3px solid var(--jp-blue);
  max-width: 58ch;
}

.pull p {
  font-style: italic;
  font-size: 1.06rem;
  line-height: 1.5;
  margin: 0;
  color: var(--c-ink);
}

.pull cite {
  display: block;
  margin-top: var(--s2);
  font-style: normal;
  font-size: 0.8rem;
  color: var(--c-ink-faint);
}

/* ══ tables ══ */

.tw {
  overflow-x: auto;
  margin: 0 0 var(--s5);
  -webkit-overflow-scrolling: touch;
}

table.t {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.86rem;
  line-height: 1.45;
}

table.t caption {
  text-align: left;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  padding: 0 0 var(--s3);
}

table.t th,
table.t td {
  border: 1px solid var(--c-rule);
  padding: 0.55rem 0.7rem;
  text-align: left;
  vertical-align: top;
  color: var(--c-ink);
}

table.t thead th {
  background: var(--c-tint);
  font-weight: 600;
  font-size: 0.8rem;
}

table.t tbody th {
  font-weight: 500;
  width: 30%;
}

table.t td p:last-child,
table.t th p:last-child {
  margin-bottom: 0;
}

/* ══ status pills ══ */

.pill {
  display: inline-block;
  padding: 0.08rem 0.42rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  border: 1px solid transparent;
}

.pill--built {
  color: var(--c-good);
  background: var(--c-good-bg);
  border-color: var(--c-good);
}

.pill--partial {
  color: var(--c-watch);
  background: var(--c-watch-bg);
  border-color: var(--c-watch);
}

.pill--open {
  color: var(--c-open);
  background: var(--c-open-bg);
  border-color: var(--c-open);
}

/* ══ to-confirm marker ══ */

.tbc {
  display: inline;
  padding: 0.04rem 0.34rem;
  background: var(--c-tbc-bg);
  color: var(--c-tbc);
  border-bottom: 2px solid var(--c-tbc-edge);
  font-size: 0.9em;
  font-weight: 600;
  font-style: normal;
}

.tbc::before {
  content: '[';
}

.tbc::after {
  content: ']';
}

/* ══ callouts ══ */

.box {
  border: 1px solid var(--c-rule);
  padding: var(--s4) var(--s5);
  margin: 0 0 var(--s5);
  background: var(--c-tint);
  max-width: 78ch;
}

.box--edge {
  border-left: 3px solid var(--jp-blue);
}

.box--notice {
  background: var(--c-tint);
  border-color: var(--c-rule);
  border-left: 3px solid var(--jp-blue);
}

.box--notice > h3 {
  color: var(--jp-blue);
}

/* Amber means one thing only: this figure is not settled. */
.box--warn {
  background: var(--c-tbc-bg);
  border-color: var(--c-tbc-edge);
  border-left: 3px solid var(--c-tbc-edge);
  color: var(--c-tbc);
}

.box--warn a {
  color: inherit;
}

.box h3,
.box h4 {
  margin-top: 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: inherit;
  margin-bottom: var(--s3);
}

.box p:last-child,
.box ul:last-child,
.box ol:last-child {
  margin-bottom: 0;
}

.box--warn strong {
  font-weight: 700;
}

/* ══ figure / diagram ══ */

figure {
  margin: 0 0 var(--s5);
}

/*
 * Photographic plates. Full column width, square corners, no frame – the
 * photograph does the work and a border would only argue with the hairline
 * rules everywhere else. Each one carries a provenance line, because these
 * are generated concept images in a document an investor will read as
 * evidence, and the difference has to be visible without hunting for it.
 */
.plate {
  margin: 0 0 var(--s6);
}

.plate img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--c-tint);
}

.plate figcaption {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--s2) var(--s5);
  align-items: baseline;
  margin-top: var(--s3);
  max-width: none;
}

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

.figcredit {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  white-space: nowrap;
}

/* A cover plate sits between the title block and the metadata table. */
.plate--cover {
  margin-top: var(--s5);
}

figure svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 780px;
}

figcaption {
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--c-ink-faint);
  margin-top: var(--s3);
  max-width: 62ch;
}

/* ══ key-figure strip ══ */

.figs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1px;
  background: var(--c-rule);
  border: 1px solid var(--c-rule);
  margin: 0 0 var(--s5);
}

.fig {
  background: var(--c-paper);
  padding: var(--s4);
}

.fig__n {
  display: block;
  font-size: 1.62rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--jp-blue);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s2);
}

.fig__l {
  display: block;
  font-size: 0.76rem;
  line-height: 1.4;
  color: var(--c-ink-soft);
}

/* ══ definition rows ══ */

.rows {
  border-top: 1px solid var(--c-rule);
  margin: 0 0 var(--s5);
  max-width: 78ch;
}

.row {
  display: grid;
  gap: var(--s1) var(--s5);
  padding: var(--s4) 0;
  border-bottom: 1px solid var(--c-rule);
}

@media (min-width: 680px) {
  .row {
    grid-template-columns: 13rem 1fr;
  }
}

.row__k {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--c-ink);
}

.row__v {
  font-size: 0.92rem;
  color: var(--c-ink-soft);
}

.row__v p:last-child {
  margin-bottom: 0;
}

/* ══ example exchange ══ */

.swap {
  display: grid;
  gap: 1px;
  background: var(--c-rule);
  border: 1px solid var(--c-rule);
  margin: 0 0 var(--s4);
}

@media (min-width: 680px) {
  .swap {
    grid-template-columns: 1fr 1fr;
  }
}

.swap__side {
  background: var(--c-paper);
  padding: var(--s4);
}

.swap__l {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-ink-faint);
  margin-bottom: var(--s3);
}

.swap__side p {
  font-size: 0.9rem;
  line-height: 1.55;
  margin: 0;
}

/* ══ footer ══ */

.foot {
  border-top: 0.5pt solid var(--c-rule-strong);
  margin-top: var(--s8);
  padding-top: var(--s4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s5);
  justify-content: space-between;
  font-size: 0.72rem;
  color: var(--c-ink-faint);
}

.foot span {
  white-space: nowrap;
}

/* ══ 404 ══ */

.mini {
  max-width: 42rem;
  margin: 0 auto;
  padding: var(--s8) var(--s5);
}

/* ══ print / PDF ══ */

@media print {
  :root {
    --c-paper: #fff;
    --c-page: #fff;
    --c-ink: #000;
    --c-ink-soft: #000;
    --c-ink-faint: #444;
    --c-rule: #bbb;
    --c-rule-strong: #000;
    --c-tint: #f2f2f2;
  }

  @page {
    size: A4;
    margin: 18mm 16mm 16mm;
  }

  body {
    background: #fff;
    font-size: 10.5pt;
    line-height: 1.45;
  }

  .rail,
  .skip {
    display: none !important;
  }

  .box--notice {
    border: 1pt solid #000;
    background: #fff;
  }

  .sheet {
    display: block;
    max-width: none;
  }

  .doc {
    padding: 0;
    border-left: none;
  }

  .sec {
    break-inside: auto;
    margin-bottom: 1.6rem;
  }

  .sec > h2 {
    break-after: avoid;
    font-size: 13pt;
  }

  .sec h3 {
    break-after: avoid;
  }

  table.t {
    min-width: 0;
    font-size: 8.6pt;
    break-inside: auto;
  }

  .tw {
    overflow: visible;
  }

  tr,
  .box,
  .pull,
  figure,
  .row {
    break-inside: avoid;
  }

  .figs {
    break-inside: avoid;
  }

  .plate {
    break-inside: avoid;
  }

  .plate img {
    max-height: 88mm;
    width: auto;
  }

  a {
    color: #000;
    text-decoration: none;
  }

  .tbc {
    background: #fff;
    border-bottom: 1.5pt solid #000;
    color: #000;
  }

  .foot {
    break-inside: avoid;
  }
}