/* ────────────────────────────────────────────────────────────
   tokens — one declaration per token via light-dark().
   A manual override only flips color-scheme; tokens never repeat.
   ──────────────────────────────────────────────────────────── */
:root{
  color-scheme: light dark;

  --bg:      light-dark(#fcfcfd, #15181d);   /* deliberate slate, not a stand-in for black */
  --bg-2:    light-dark(#ffffff, #1b1f26);
  --bg-3:    light-dark(#f4f5f7, #191d23);
  --line:    light-dark(#e4e5e9, #272c34);
  --line-2:  light-dark(#c9ccd3, #39404b);

  --fg:      light-dark(#191a1c, #e8e9eb);
  --fg-2:    light-dark(#5c6066, #99a0aa);
  --fg-3:    light-dark(#80858d, #727a85);

  --acc:     light-dark(#1b5fd9, #7fb0ff);
  --acc-fg:  light-dark(#ffffff, #15181d);
  --acc-dim: light-dark(#eaf1fd, #1a2534);

  --ok:   light-dark(#1a7f45, #5ec98a);
  --warn: light-dark(#8f5d00, #ffb86a);
  --err:  light-dark(#b3261e, #ff8f85);

  /* prop tokens — consumed by kit.css. --paper stays light in dark mode
     on purpose: a document that goes dark stops reading as a document. */
  --paper:    #ffffff;
  --paper-fg: #1a1a18;
  --paper-sh: light-dark(rgba(0,0,0,.10), rgba(0,0,0,.6));
  --term-bg:  #141417;
  --term-fg:  #c8c8c4;
  --tg-bg:    light-dark(#e9eef3, #1b1f24);
  --tg-in:    light-dark(#ffffff, #23282e);
  --tg-out:   light-dark(#d6ebff, #2b4a66);
  --ios-them: light-dark(#ececed, #2a2a2e);
  --ios-me:   light-dark(#1f8bff, #1f6fd0);

  --r: 10px;
  --r-lg: 16px;
  --maxw: 1060px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  /* one shadow, reserved for the simulated screens — they are objects on the page */
  --sh-1: 0 1px 2px light-dark(rgba(0,0,0,.05), rgba(0,0,0,.4));
  --sh-2: 0 2px 10px light-dark(rgba(16,20,28,.07), rgba(0,0,0,.4));
}
html[data-theme="light"]{ color-scheme: light }
html[data-theme="dark"] { color-scheme: dark  }

/* ── base ──────────────────────────────────────────────────── */
*{ box-sizing: border-box }
[hidden]{ display:none !important }   /* .shot carries display:flex and would beat the UA default */
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto } }
body{
  margin:0; background: var(--bg); color: var(--fg);
  font: 16px/1.62 var(--serif);
  padding-inline: 24px;
}
.wrap{ max-width: var(--maxw); margin-inline:auto }
a{ color: var(--acc) }
h1,h2,h3{ line-height:1.2; letter-spacing:-.012em; margin:0; font-weight:600 }
:focus-visible{ outline:2px solid var(--acc); outline-offset:3px; border-radius:4px }
.skip{
  position:absolute; left:-9999px; top:0; background: var(--acc); color: var(--acc-fg);
  padding:10px 14px; border-radius:0 0 var(--r) 0; z-index:50;
}
.skip:focus{ left:0 }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path: inset(50%); white-space:nowrap; border:0;
}

/* ── header ────────────────────────────────────────────────── */
.hd{ padding-block: 72px 8px }
.hd h1{ font-size: clamp(34px, 5vw, 46px) }
.hd__role{ margin:10px 0 0; color: var(--fg-2); font-size:16.5px }
/* the one line on the page that asks for something */
.hd__ask{
  margin-top:10px; font-size:17px; color: var(--fg);
  border-left:2px solid var(--acc); padding-left:12px;
}

.hd__lead{ margin:22px 0 0; max-width:66ch; font-size:19px; line-height:1.58 }
.hd__links{
  list-style:none; display:flex; flex-wrap:wrap; gap:8px 20px;
  margin:24px 0 0; padding:0; font: 14px/1.5 var(--sans);
}
.hd__links a{ text-decoration:none; border-bottom:1px solid var(--line-2) }
.hd__links a:hover{ border-bottom-color: var(--acc) }

/* ── sections ──────────────────────────────────────────────── */
.sec{ padding-block: 56px 0 }
.sec__h{
  font-size: clamp(24px, 3vw, 30px); color: var(--fg);
  padding-bottom:12px; border-bottom:1px solid var(--fg);
}
.sec__note{ margin:16px 0 0; color: var(--fg-2); max-width:64ch; font-size:16px }

/* ── project row: collapsed by default, opens into the card ──
   <details> gives the open/close, keyboard support and a working
   no-JS experience for free, so none of that is in app.js. */
.item{ border-bottom:1px solid var(--line) }
.item__row{
  display:grid; gap:4px 18px; align-items:baseline; cursor:pointer;
  grid-template-columns: 18px minmax(0, 30%) minmax(0, 1fr);
  padding-block: 22px; list-style:none;
}
.item__row::-webkit-details-marker{ display:none }
.item__row:hover .card__name{ color: var(--acc) }
.item__row:hover .item__chev{ color: var(--acc) }
.item__row:focus-visible{ outline-offset:-2px }
.item__head{ grid-column:2; min-width:0 }
.item__sum{
  grid-column:3; color: var(--fg-2); font-size:16px; line-height:1.6; max-width:60ch;
}
.item__chev{
  grid-column:1; grid-row:1; align-self:start; color: var(--fg-3);
  transition: transform .18s ease; line-height:1.45; font-size:15px;
}
.item[open] .item__chev{ transform: rotate(90deg) }
@media (prefers-reduced-motion: reduce){ .item__chev{ transition:none } }
.item[open] .item__row{ padding-bottom:14px }

/* ── card: left text, right screens (the opened panel) ─────── */
.card{
  display:grid; gap:32px; align-items:start;
  grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
  padding-bottom: 40px;
}
.card__name{ font-size:21px; font-weight:600 }
.card__kind{ margin:5px 0 0; color: var(--fg-3); font-size:14.5px; font-style:italic }
.card__wwhi{ list-style:none; margin:0; padding:0; display:grid; gap:11px }
.card__wwhi li{ font-size:15.5px; line-height:1.62; color: var(--fg-2) }
.card__wwhi b{ color: var(--fg); font-weight:600; margin-right:.35em }
.card__wwhi em{ color: var(--fg); font-style:italic; font-weight:inherit }
.card__chips{ list-style:none; display:flex; flex-wrap:wrap; gap:6px; margin:8px 0 0; padding:0 }

/* the gallery. Clicking anywhere that is not a link or a button advances it. */
.card__stage{
  min-width:0; cursor:pointer; padding-left:26px;
  border-left:1px solid var(--line);
}
.card__stage:focus-visible{ outline-offset:2px }
.shot{ margin:0; display:flex; flex-direction:column; gap:12px }

/* Stacking every screen into one grid cell keeps the stage the height of the
   tallest one, so stepping through does not resize the card. visibility
   rather than display, because a display:none sibling contributes no height.
   app.js adds the class, so without JS the screens simply stack and flow. */
.card__stage.is-stepped{ display:grid; grid-template-rows: 1fr auto }
.card__stage.is-stepped .shot{ grid-area:1 / 1; visibility:hidden; justify-content:center }
.card__stage.is-stepped .shot.is-on{ visibility:visible }
.card__stage.is-stepped .card__dots{ grid-area:2 / 1 }
.shot__frame{ display:flex; justify-content:center; min-width:0 }
.shot__cap{
  font-size:14.5px; line-height:1.56; color: var(--fg-2);
  max-width:58ch;
}
.shot__cap b{ color: var(--fg); font-weight:650 }
.card__dots{ display:flex; gap:7px; margin-top:16px }
.card__dots button{
  width:8px; height:8px; padding:0; border:0; border-radius:50%;
  background: var(--line-2); cursor:pointer;
}
.card__dots button[aria-current="true"]{ background: var(--acc) }
.card__dots button:hover{ background: var(--fg-3) }
/* ── chips ─────────────────────────────────────────────────── */
.chip{
  font: 12.5px/1.5 var(--sans); font-weight:500;
  padding:1px 8px; border-radius:3px; border:1px solid var(--line);
  color: var(--fg-3); white-space:nowrap; background: var(--bg-3);
}
.chip--live{ border-color: var(--ok); color: var(--ok); background:transparent }

/* ── investment ────────────────────────────────────────────── */
.invest{ padding-block: 36px 8px }
.invest__top{ display:grid; gap:32px; grid-template-columns: minmax(0,40%) minmax(0,1fr); align-items:start }
.invest__chart{ border-left:1px solid var(--line); padding-left:26px }
.invest__chart figcaption{ margin-top:12px; font-size:14px; color: var(--fg-3) }

.invest__list{ margin-top:34px; display:grid; gap:26px }
.invest__grp h3{ font-size:18px; color: var(--fg); margin-bottom:10px }
.co{ list-style:none; margin:0; padding:0; display:grid; gap:0 }
.co li{
  display:grid; grid-template-columns: minmax(0,200px) minmax(0,1fr); gap:6px 20px;
  padding:9px 2px; border-top:1px solid var(--line); font-size:15px; line-height:1.55;
}
.co b{ font-weight:600 }
.co span{ color: var(--fg-2) }

/* ── additionals ───────────────────────────────────────────── */
.extras{ list-style:none; margin:24px 0 0; padding:0; border-top:1px solid var(--line) }
.extras li{
  display:grid; grid-template-columns: minmax(0,190px) minmax(0,1fr); gap:6px 20px;
  padding:11px 2px; border-bottom:1px solid var(--line); font-size:15px; line-height:1.58;
}
.extras b{ font-weight:600 }
.extras span{ color: var(--fg-2) }
.extras__grp{
  grid-column:1 / -1; padding-top:22px; font-size:17px; font-weight:600;
  color: var(--fg); border:0;
}

/* ── diagrams take their colour from the theme ─────────────── */
.dg{ width:100%; height:auto; max-width:620px; margin-inline:auto; display:block; color: var(--fg-2) }
.dg text{ font-family: var(--sans); font-size:12.5px; fill: var(--fg) }
.dg .dg-box{ fill: light-dark(#e9eaee, #262a31); stroke: var(--line-2); stroke-width:1.2 }
.dg .dg-box--acc{ fill: var(--acc-dim); stroke: var(--acc) }
.dg .dg-line{ stroke: var(--line-2); stroke-width:1.4; fill:none }
.dg .dg-arrow{ fill: var(--line-2) }
.dg .dg-lbl{ fill: var(--fg-3); font-size:11.5px }

/* ── footer ────────────────────────────────────────────────── */
.ft{
  margin-top:64px; padding-block:26px 56px; border-top:1px solid var(--line);
  color: var(--fg-3); font-size:14.5px; line-height:1.6;
}
.ft p{ margin:0 0 8px; max-width:74ch }

/* ── narrow ────────────────────────────────────────────────── */
@media (max-width: 900px){
  body{ padding-inline:18px }
  .hd{ padding-block:48px 4px }
  .card,
  .invest__top{ grid-template-columns:1fr; gap:22px }
  .item__row{ grid-template-columns: 18px minmax(0,1fr) }
  .item__head{ grid-column:2 }
  .item__sum{ grid-column:2 }
  .item__chev{ grid-column:1; grid-row:1 }
  .co li,
  .extras li{ grid-template-columns:1fr; gap:3px }
  .co b, .extras b{ color: var(--fg) }
}

.shot__cap .src{ display:block; margin-top:6px; font-size:13px; color: var(--fg-3) }

/* the company list is the longest block on the page; it opens on request */
.invest__all{ margin-top:30px; border-top:1px solid var(--line) }
.invest__all > summary{
  padding-block:18px; cursor:pointer; list-style:none;
  display:flex; align-items:baseline; gap:12px; font-size:17px; font-weight:600;
}
.invest__all > summary::-webkit-details-marker{ display:none }
.invest__all > summary:hover{ color: var(--acc) }
.invest__all > summary span{ color: var(--fg-3); font-weight:400; font-size:15px }
.invest__all > summary::before{
  content:"\203A"; color: var(--fg-3); transition: transform .18s ease; display:inline-block;
}
.invest__all[open] > summary::before{ transform: rotate(90deg) }
@media (prefers-reduced-motion: reduce){ .invest__all > summary::before{ transition:none } }
.invest__all .invest__list{ margin-top:4px; padding-bottom:28px }