/* A plain portfolio grid: three cells to a row (two on phones), no rules, square corners. The fourth holds a question mark for the next company.
   Each company keeps its own wordmark type at the weight its own site uses:
   Arcus in Marcellus, Gridlync in Familjen Grotesk, Atlaris in Geist with its stepped mark. */
:root {
  --bg: #0e0f11;
  --ink: #fff;
  --dim: rgba(255, 255, 255, .58);
  --cell: rgba(255, 255, 255, .03);
  --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --edge: 24px;
  --r: 26px;        /* the one corner radius (Arcus-style, a little softer): cards and boxes. Short things (status tags) are pills */
}
@media (max-width: 600px) { :root { --r: 20px; } }
@supports (corner-shape: squircle) {
  :root { --r: 52px; }
  @media (max-width: 600px) { :root { --r: 40px; } }
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scrollbar-gutter: the page doesn't shift sideways between short and long pages on screens that show scrollbars */
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
/* full-height column, so the footer sits at the bottom even on short pages */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; padding: 0 var(--edge); font-family: var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
main { flex: 1 0 auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- Top line: stays pinned to the top; the page scrolls under frosted glass ---------- */
.top {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; height: 72px;
  margin: 0 calc(-1 * var(--edge)); padding: 0 var(--edge); font-size: 14px;
  background: rgba(14, 15, 17, .55);
  -webkit-backdrop-filter: blur(24px) saturate(160%); backdrop-filter: blur(24px) saturate(160%);
}
.hold { font-weight: 500; letter-spacing: -.01em; }
.nav { color: var(--dim); transition: color .25s ease; }
.nav:hover, .nav:focus-visible, .nav[aria-current] { color: var(--ink); }

/* ---------- Portfolio grid ---------- */
/* small label above the grid, in the same type as "Keel Holdings" in the top line */
.label { max-width: 880px; margin: 40px auto 0; font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 12px; align-items: start; max-width: 880px; margin: 16px auto 0; }
.co {
  position: relative; display: flex; flex-direction: column; aspect-ratio: 3 / 2; padding: 28px; background: var(--cell);
  border-radius: var(--r); corner-shape: squircle; transition: background-color .4s ease;
}
.co:hover, .co:focus-visible { background: rgba(255, 255, 255, .055); }
.co:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
.co-next { color: rgba(255, 255, 255, .32); }
.co-next:hover { background: var(--cell); }

/* the wordmark sits in the middle of its card */
.wm {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-weight: 400; font-size: 26px; line-height: 1; white-space: nowrap;
}
.wm-arcus { font-family: "Marcellus", Georgia, serif; }
.wm-gridlync { font-family: "Familjen Grotesk", system-ui, sans-serif; letter-spacing: -.025em; }
.wm-atlaris { font-family: var(--sans); letter-spacing: -.02em; }
.wm-atlaris svg { width: .78em; height: .78em; margin-right: .3em; fill: currentColor; }

/* status tag: a small pill to the right of the company name under the card */
.status {
  display: inline-block; margin-left: 8px; padding: 4px 8px 3px; border-radius: 999px; vertical-align: 1px;
  font-size: 11px; font-weight: 400; line-height: 1; letter-spacing: 0; color: var(--dim); background: rgba(255, 255, 255, .07);
}

/* under each card: name in the site font, one line about it, then its site */
li:has(.site:hover) .co { background: rgba(255, 255, 255, .055); }
/* one size and one color for everything under the card; only the name is a little heavier */
.meta { padding: 16px 2px 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .8); }
.meta h2 { font-size: inherit; font-weight: 500; letter-spacing: -.01em; }
.meta p { margin-top: 4px; }
.site { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; transition: color .25s ease; }
.site svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.site:hover, .site:focus-visible, .co:hover ~ .meta .site { color: #fff; }

/* Arcus has two links under its card: "Learn more" (its blog post) and its site */
.links { display: flex; flex-wrap: wrap; gap: 0 18px; }

/* ---------- Blog and blog posts ----------
   One type scale on both pages: 13px dates, 14px Back link, 15px body, 18px titles, 28px page heading.
   The blog list uses the home page's 880px column; a post is a centered 640px reading column, like most blogs. */
.back { display: inline-flex; align-items: center; gap: 6px; margin-top: 40px; font-size: 14px; line-height: 1.5; color: var(--dim); transition: color .25s ease; }
.back svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.back:hover, .back:focus-visible { color: var(--ink); }

/* blog list: one card per post, newest first */
.blog { width: 100%; max-width: 880px; margin: 0 auto; padding-bottom: 96px; }
.blog h1, .doc h1 { margin-top: 24px; font-size: 28px; line-height: 1.2; font-weight: 400; letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.posts { display: grid; gap: 4px; margin-top: 24px; }
.post { display: flex; flex-direction: column; margin: 0 -28px; padding: 24px 28px; border-radius: var(--r); corner-shape: squircle; transition: background-color .4s ease; }
.post:hover, .post:focus-visible { background: rgba(255, 255, 255, .045); }
.post:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }
.post__meta, .doc__date { font-size: 13px; color: var(--dim); }
.post__title, .doc h2 { font-size: 18px; line-height: 1.4; font-weight: 500; letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.post__title { margin-top: 10px; }
.post__dek, .doc { font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .8); }
.post__dek { margin-top: 6px; }

/* a post: one long read, centered at a comfortable line length */
.doc { width: 100%; max-width: 640px; margin: 0 auto; padding-bottom: 120px; }
.doc__name { margin-top: 32px; font-size: 26px; line-height: 1; color: var(--ink); }
.doc h1 { margin-top: 16px; }
.doc__date { margin-top: 12px; }
.doc section { margin-top: 56px; }
.doc h3 { margin-top: 32px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; color: var(--ink); }
.doc p, .doc ul { margin-top: 14px; }
.doc h2 + p { margin-top: 16px; }
.doc li { position: relative; margin-top: 6px; padding-left: 20px; }
.doc li::before { content: ""; position: absolute; top: .72em; left: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--dim); }

.doc strong { font-weight: 500; color: var(--ink); }
.doc .back + h1 { margin-top: 24px; }

/* sources: small superscript numbers in the text link to the numbered list at the end of the post */
.doc sup { font-size: .72em; line-height: 0; vertical-align: super; }
.cite { color: var(--dim); text-decoration: none; transition: color .25s ease; }
.cite:hover, .cite:focus-visible { color: var(--ink); }
.doc .sources { margin-top: 72px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .08); }
.doc .sources h2 { font-size: 14px; letter-spacing: -.01em; }
.doc .sources ol { margin-top: 12px; padding-left: 0; list-style: none; counter-reset: src; font-size: 13px; line-height: 1.55; color: var(--dim); }
.doc .sources li { margin-top: 8px; padding-left: 28px; counter-increment: src; overflow-wrap: anywhere; }
.doc .sources li::before { content: counter(src) "."; top: 0; left: 0; width: auto; height: auto; border-radius: 0; background: none; color: var(--dim); font-variant-numeric: tabular-nums; }
.doc .sources a { color: rgba(255, 255, 255, .8); text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .25); text-underline-offset: 2px; }
.doc .sources a:hover { color: var(--ink); text-decoration-color: currentColor; }
.doc section a:not(.cite) { text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .3); text-underline-offset: 2px; }
.doc .sources li:target { color: var(--ink); }

/* ---------- Chart in a post: the compute scale ladder ----------
   A real table drawn as a chart: one row per tier, its power bar on a log scale (0.1 kW at the left edge to 10 GW at the
   right, 8 decades) and its two costs. Narrow: each tier stacks (name and costs on top, bar underneath).
   Wide (1100px+): the figure widens past the text to 880px, tier | bar | costs in columns, decade gridlines through every row.
   Colours: purple marks the highlighted tiers, grey the rest; both checked for colour-blind separation and 3:1 contrast on #0e0f11. */
.ladder { margin-top: 48px; --hl: #a855f7; --other: #6b6e73; --grid: rgba(255, 255, 255, .07); }
.ladder__cap { display: block; }
.ladder__title { display: block; font-size: 15px; line-height: 1.4; font-weight: 500; letter-spacing: -.01em; color: var(--ink); text-wrap: balance; }
.ladder__sub { display: block; margin-top: 4px; font-size: 13px; color: var(--dim); }
.ladder__table, .ladder__table thead, .ladder__table tbody, .ladder__table tfoot { display: block; width: 100%; }
.ladder__table { margin-top: 24px; border-collapse: collapse; font-size: 14px; line-height: 1.4; }
.lr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name cost" "ex cost" "bar bar"; column-gap: 16px; padding: 14px 0; border-top: 1px solid var(--grid); }
.lr > th, .lr > td { display: block; padding: 0; text-align: left; font-weight: 400; }
.lr > .c-name { grid-area: name; color: rgba(255, 255, 255, .92); }
.lr > .c-ex { grid-area: ex; margin-top: 2px; font-size: 12px; color: var(--dim); }
.lr > .c-bar { grid-area: bar; margin-top: 10px; }
.lr > .c-cost { grid-area: cost; text-align: right; }
.tot { display: block; color: rgba(255, 255, 255, .92); font-variant-numeric: tabular-nums; }
.fac { display: block; margin-top: 2px; font-size: 12px; color: var(--dim); font-variant-numeric: tabular-nums; }
.ladder tbody .lr:hover { background: rgba(255, 255, 255, .03); border-radius: 12px; }
/* the bar: 10px thin, square at the baseline, 4px round at the data end; its value just past the tip, in text colour */
.track { position: relative; display: block; height: 18px; margin-right: 56px; }
.bar { position: absolute; top: 50%; left: 0; width: calc(var(--w) * 100%); height: 10px; margin-top: -5px; border-radius: 0 4px 4px 0; background: var(--other); }
.lr--hl .bar { background: var(--hl); }
/* baseline: a line where every bar starts (one continuous line through the rows on wide screens) */
.lr .track:not(.ticks) { border-left: 1px solid rgba(255, 255, 255, .28); }
.val { position: absolute; top: 50%; left: calc(var(--w) * 100% + 8px); translate: 0 -50%; font-size: 12px; white-space: nowrap; color: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums; }
/* header row and axis row */
.lr--head { padding-top: 0; border-top: 0; }
.lr--head > th, .lr--head > th.c-name, .lr--head > th.c-ex, .lr--head .tot, .lr--head .fac { margin-top: 0; font-size: 12px; color: var(--dim); }
.lr--head .fac { margin-top: 2px; }
.lr--head > .c-bar { display: none; }
.lr--axis { grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar"; padding-top: 10px; }
.lr--axis > .c-bar { margin-top: 0; }
.ticks { height: 16px; }
.tick { position: absolute; top: 0; left: calc(var(--x) * 100%); translate: -50% 0; font-size: 11px; line-height: 16px; white-space: nowrap; color: var(--dim); font-variant-numeric: tabular-nums; }
.axis-title { display: block; margin: 10px 56px 0 0; text-align: center; font-size: 12px; color: var(--dim); }
/* legend mirrors the mark (a short bar), then the note */
.doc .ladder__legend { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 20px; font-size: 13px; color: rgba(255, 255, 255, .8); }
.doc .ladder__legend li { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; }
.doc .ladder__legend li::before { content: none; }
.sw { width: 14px; height: 10px; border-radius: 0 4px 4px 0; background: var(--other); }
.sw--hl { background: var(--hl); }
.doc .ladder__note { margin-top: 12px; font-size: 12px; line-height: 1.5; color: var(--dim); }
@media (min-width: 1100px) {
  .ladder { width: 880px; margin-left: 50%; translate: -50% 0; }
  .lr { grid-template-columns: 252px minmax(0, 1fr) 144px; grid-template-areas: "name bar cost" "ex bar cost"; column-gap: 24px; padding: 0; border-top: 0; }
  .lr > .c-name { align-self: end; padding-top: 12px; }
  .lr > .c-ex { align-self: start; padding-bottom: 12px; }
  .lr > .c-bar { display: flex; align-self: stretch; margin-top: 0; }
  .lr > .c-cost { align-self: center; }
  .lr .track { flex: 1; height: auto; background: linear-gradient(to left, var(--grid) 1px, transparent 1px) 0 0 / 12.5% 100% repeat-x; }
  .lr--head { padding-bottom: 12px; border-bottom: 1px solid var(--grid); }
  .lr--head > th { align-self: end; padding: 0; }
  .lr--head > .c-bar { display: block; }
  .lr--axis { grid-template-columns: 252px minmax(0, 1fr) 144px; grid-template-areas: ". bar ."; padding-top: 0; }
  .lr--axis > .c-bar { display: block; }
  .lr--axis .ticks { height: 26px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .18); background: none; }
  .lr--axis .tick { top: 10px; }
}
@media (max-width: 600px) {
  .tick--minor { display: none; }
}

/* wide screens: Back moves out to the left edge, lined up under "Keel Holdings", and stays put while the page scrolls.
   It only moves out where the gutter is wide enough to hold it without touching the text; narrower, it stays above the title. */
@media (min-width: 900px) {
  .doc .back { position: fixed; top: 117px; left: var(--edge); margin: 0; }
  .doc .back + .doc__name { margin-top: 40px; }
  .doc .back + h1 { margin-top: 40px; }
}
@media (min-width: 1100px) {
  .blog .back { position: fixed; top: 117px; left: var(--edge); margin: 0; }
  .blog .back + h1 { margin-top: 40px; }
}

/* ---------- Below the grid: one short paragraph, centered, small ---------- */
.about { display: flex; justify-content: center; padding: 96px 0 88px; }
.about p { max-width: 33em; text-align: center; font-size: 15px; line-height: 1.7; color: var(--dim); text-wrap: balance; }
.foot { padding: 0 0 32px; text-align: center; font-size: 12px; color: rgba(255, 255, 255, .4); }

/* ---------- Phones: two to a row, square cells ---------- */
@media (max-width: 800px) {
  :root { --edge: 16px; }
  .top { height: 60px; font-size: 13px; }
  .label { margin-top: 16px; font-size: 13px; }
  .grid { grid-template-columns: repeat(2, 1fr); gap: 28px 8px; margin-top: 12px; }
  .meta { padding-top: 12px; font-size: 13px; }
  .co { aspect-ratio: 1; padding: 16px; }
  .wm { font-size: 22px; }
  .about { padding: 72px 0 64px; }
  .about p { font-size: 14px; }
  .back { margin-top: 16px; font-size: 13px; }
  .blog h1, .doc h1 { margin-top: 20px; font-size: 24px; }
  .posts { margin-top: 24px; }
  .post { margin: 0 -16px; padding: 18px 16px; }
  .post__title, .doc h2 { font-size: 17px; }
  .doc { padding-bottom: 88px; }
  .doc__name { margin-top: 28px; font-size: 22px; }
  .doc h1 { margin-top: 14px; }
  .doc .back + h1 { margin-top: 20px; }
  .doc section { margin-top: 48px; }
}

@media (prefers-reduced-motion: reduce) {
  .co, .wm, .post, .back { transition: none; }
}