/* The graphos website's stylesheet: drafting-paper ground, one spot colour, hairlines instead of
   shadows. Its first part sets the type, colours and shared pieces; what the page adds follows. */

/* Drafting-paper ground, one spot colour, hairlines instead of shadows, figures framed like
   plates. Blue is graphos and violet is PostgreSQL + Apache AGE, in the page and in every diagram. */
:root{
  --ground:#EDF0F2; --surface:#F7F8F9; --ink:#131A22; --ink-soft:#4A5563; --rule:#CBD3DB;
  --grid:rgba(19,26,34,.07); --term:#141A22; --term-ink:#D7DEE7;
  --accent:#1D5BD6; --accent-soft:#DDE7FA;
  --store:#5B45B0; --store-soft:#ECE8F8;
  --measured:#1C7A3A; --measured-bg:#DCEFE2;
  --designed:#9A6100; --designed-bg:#F6EAD2;
  --never:#B3261E; --never-bg:#F7DEDC;
  --display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --body:"IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#0F1216; --surface:#161A20; --ink:#E6EAEF; --ink-soft:#9AA5B3; --rule:#2A313B;
    --grid:rgba(230,234,239,.06); --term:#0A0D10; --term-ink:#D7DEE7;
    --accent:#8AB0FF; --accent-soft:#1A2640;
    --store:#B7A6F2; --store-soft:#231E3A;
    --measured:#6FCB8D; --measured-bg:#132A1C;
    --designed:#E6B75A; --designed-bg:#2E2410;
    --never:#F2877F; --never-bg:#361816;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#0F1216; --surface:#161A20; --ink:#E6EAEF; --ink-soft:#9AA5B3; --rule:#2A313B;
  --grid:rgba(230,234,239,.06); --term:#0A0D10; --term-ink:#D7DEE7;
  --accent:#8AB0FF; --accent-soft:#1A2640;
  --store:#B7A6F2; --store-soft:#231E3A;
  --measured:#6FCB8D; --measured-bg:#132A1C;
  --designed:#E6B75A; --designed-bg:#2E2410;
  --never:#F2877F; --never-bg:#361816;
}
*{box-sizing:border-box}
body{background:var(--ground); color:var(--ink); font-family:var(--body); font-size:16.5px; line-height:1.6; padding-inline:16px; padding-block:0 64px; margin:0}
.wrap{max-width:70ch; margin:0 auto}
.bar{position:sticky; top:env(safe-area-inset-top,0px); z-index:10; background:var(--ground); border-bottom:1px solid var(--rule); margin-inline:-16px; padding:8px 16px}
.bar-inner{max-width:70ch; margin:0 auto; display:flex; align-items:center; gap:12px}
.bar-name{display:inline-flex; align-items:center; gap:9px; font-family:var(--display); font-weight:800; font-size:15px; letter-spacing:-.01em; color:var(--ink); text-decoration:none; margin-right:auto}
.bar-name::before{content:""; width:9px; height:9px; background:var(--accent)}
.mode{display:inline-flex; border:1px solid var(--rule); border-radius:4px; overflow:hidden}
.mode button{font:500 11px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); background:transparent; border:0; padding:8px 10px; cursor:pointer}
.mode button + button{border-left:1px solid var(--rule)}
.mode button[aria-pressed="true"]{background:var(--ink); color:var(--ground)}
details.toc{position:relative; font-size:14px}
details.toc > summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); border:1px solid var(--rule); border-radius:4px; padding:7px 12px}
details.toc > summary::-webkit-details-marker{display:none}
details.toc > summary .bars{display:inline-grid; gap:3px}
details.toc > summary .bars i{display:block; width:13px; height:1.5px; background:currentColor}
details.toc[open] > summary{color:var(--accent); border-color:var(--accent)}
details.toc .panel{position:absolute; right:0; top:calc(100% + 8px); width:min(290px, calc(100vw - 32px)); max-height:min(70vh, 520px); overflow-y:auto; background:var(--surface); border:1px solid var(--rule); border-radius:4px; padding:6px}
details.toc ol{list-style:none; margin:0; padding:0}
details.toc li{margin:0}
details.toc a{display:block; padding:7px 10px; border-radius:2px; color:var(--ink); text-decoration:none}
details.toc a:hover, details.toc a:focus-visible{background:var(--accent-soft); color:var(--accent)}
main{min-width:0}

header.top{padding-top:56px; padding-bottom:8px}
.eyebrow{display:flex; align-items:center; gap:12px; font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:0 0 14px}
.eyebrow::before{content:""; width:28px; height:1px; background:currentColor}
.repo{margin:0 0 18px}
.repo a{display:inline-flex; align-items:center; gap:8px; padding:6px 11px; font-family:var(--mono); font-size:12.5px; line-height:1; color:var(--ink); text-decoration:none; border:1px solid var(--rule); border-radius:4px; transition:border-color .15s ease, color .15s ease}
.repo a:hover{border-color:var(--accent); color:var(--accent)}
.repo svg{width:15px; height:15px; fill:currentColor; flex:none; opacity:.85}
.repo .go{opacity:0; margin-left:-3px; transition:opacity .15s ease, transform .15s ease}
.repo a:hover .go{opacity:.8; transform:translateX(2px)}
@media (prefers-reduced-motion:reduce){.repo a,.repo .go{transition:none}}
h1{font-family:var(--display); font-weight:800; font-size:clamp(2.8rem,8vw,4.4rem); line-height:.95; letter-spacing:-.045em; margin:0 0 20px; text-wrap:balance}
h1::after{content:"."; color:var(--accent)}
.lede{font-size:1.25rem; line-height:1.45; color:var(--ink); margin:0 0 16px; text-wrap:pretty}
.meta{color:var(--ink-soft); font-size:14.5px; margin:0}

h2{font-family:var(--display); font-weight:800; font-size:1.75rem; line-height:1.1; letter-spacing:-.03em; margin:72px 0 16px; padding-top:12px; border-top:1px solid var(--rule); text-wrap:balance; scroll-margin-top:72px}
h2 .sec{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px; margin-bottom:14px; font-size:16.5px; letter-spacing:0}
h2 .num{font-family:var(--mono); font-weight:500; font-size:12px; letter-spacing:.1em; color:var(--accent); margin-right:auto}
h3{font-family:var(--display); font-weight:800; font-size:1.12rem; letter-spacing:-.015em; margin:30px 0 8px}
p{margin:0 0 14px}
ul, ol.steps{margin:0 0 16px; padding-left:1.2em}
li{margin:0 0 8px}
li::marker{color:var(--accent)}
strong{font-weight:600}
code{font-family:var(--mono); font-size:.86em; background:var(--accent-soft); padding:.08em .35em; border-radius:2px; overflow-wrap:anywhere}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Evidence tags: a filled dot was measured, a ring is a design property. Shape carries the
   meaning as well as colour, so it survives grey print and colour blindness. */
.chip{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; padding:4px 8px 4px 7px; border-radius:2px; line-height:1.2; white-space:nowrap}
.chip::before{content:""; width:7px; height:7px; border-radius:50%; box-sizing:border-box; flex:none}
.chip.m{color:var(--measured); background:var(--measured-bg)}
.chip.m::before{background:currentColor}
.chip.d{color:var(--designed); background:var(--designed-bg)}
.chip.d::before{border:1.5px solid currentColor}

.summary{border:1px solid var(--rule); border-radius:4px; background:var(--surface); margin:36px 0 8px}
.summary h2{margin:0; padding:10px 18px; border-top:0; border-bottom:1px solid var(--rule); font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent)}
.summary ul{padding:0 18px; margin:0; list-style:none}
.summary li{display:grid; grid-template-columns:118px minmax(0,1fr); gap:14px; padding:12px 0; border-top:1px solid var(--rule); margin:0}
.summary li:first-child{border-top:0}
.summary .k{font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft); padding-top:3px}
@media (max-width:520px){ .summary li{grid-template-columns:minmax(0,1fr); gap:2px} }

dl.gloss{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 28px; margin:0 0 16px}
@media (max-width:640px){ dl.gloss{grid-template-columns:minmax(0,1fr)} }
dl.gloss div{padding:10px 0; border-top:1px solid var(--rule)}
dl.gloss dt{font-family:var(--mono); font-size:13.5px; font-weight:500; color:var(--accent)}
dl.gloss dd{margin:2px 0 0; font-size:15px; color:var(--ink)}

.tbl{overflow-x:auto; margin:0 0 18px; border:1px solid var(--rule); border-radius:4px; background:var(--surface)}
table{border-collapse:collapse; width:100%; font-size:15px}
th, td{text-align:left; vertical-align:top; padding:10px 14px; border-top:1px solid var(--rule)}
th + th, td + td{border-left:1px solid var(--rule)}
thead th{border-top:0; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); font-weight:500}
td:first-child{font-weight:500}
td.n{font-family:var(--mono); font-size:13.5px; white-space:nowrap}
.algos td:first-child{white-space:nowrap}
.good{color:var(--measured); font-weight:600}

.fig{--mark:var(--ink-soft); --len:12px; margin:8px 0 12px; padding:22px 20px 14px; overflow-x:auto;
  background:
    linear-gradient(var(--mark),var(--mark)) left top / var(--len) 1px,
    linear-gradient(var(--mark),var(--mark)) left top / 1px var(--len),
    linear-gradient(var(--mark),var(--mark)) right top / var(--len) 1px,
    linear-gradient(var(--mark),var(--mark)) right top / 1px var(--len),
    linear-gradient(var(--mark),var(--mark)) left bottom / var(--len) 1px,
    linear-gradient(var(--mark),var(--mark)) left bottom / 1px var(--len),
    linear-gradient(var(--mark),var(--mark)) right bottom / var(--len) 1px,
    linear-gradient(var(--mark),var(--mark)) right bottom / 1px var(--len),
    radial-gradient(circle, var(--grid) 1px, transparent 1.2px) 0 0 / 16px 16px;
  background-repeat:no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat}
.fig img, .fig svg{display:block; width:100%; height:auto}
.fig img.shot{border:1px solid var(--rule); border-radius:4px}
.fig picture{display:block}
/* Read by screen readers, not shown. */
.vh{position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.fig figcaption{display:flex; gap:12px; align-items:baseline; margin-top:14px; padding-top:10px; border-top:1px solid var(--rule); font-size:13.5px; color:var(--ink-soft)}
.fig .fig-n{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); white-space:nowrap}
.pic .pic-dark{display:none}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pic .pic-light{display:none} :root:not([data-theme="light"]) .pic .pic-dark{display:block} }
:root[data-theme="dark"] .pic .pic-light{display:none} :root[data-theme="dark"] .pic .pic-dark{display:block}

.record{font-family:var(--mono); font-size:13px; line-height:1.7; color:var(--term-ink); background:var(--term); border-radius:4px; padding:14px 18px; margin:4px 0 16px; overflow-x:auto; white-space:pre}
.callout{border-left:2px solid var(--designed); background:var(--designed-bg); padding:12px 16px; border-radius:0 4px 4px 0; margin:6px 0 18px}
.callout p:last-child{margin:0}
blockquote{margin:6px 0 18px; padding:2px 0 2px 16px; border-left:2px solid var(--accent); font-size:1.08rem}
blockquote p:last-child{margin:0}
.age{border:1px solid var(--rule); border-left:3px solid var(--store); border-radius:0 4px 4px 0; background:var(--surface); padding:14px 18px; margin:6px 0 18px}
.age p:last-child{margin:0}
footer{margin-top:56px; padding-top:18px; border-top:1px solid var(--rule); color:var(--ink-soft); font-size:14.5px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* What the page adds: a wider column, the bar's links, buttons and the feature cards. */
.wrap, .bar-inner{max-width:1080px}
.prose{max-width:70ch}
.bar-links{display:flex; gap:18px; margin-right:6px}
.bar-links a{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); text-decoration:none}
.bar-links a:hover{color:var(--accent)}
@media (max-width:760px){ .bar-links a:not(.keep){display:none} }
header.top{padding-top:64px}
h1{font-size:clamp(3.2rem,10vw,5.6rem)}
.lede{font-size:clamp(1.25rem,2.4vw,1.6rem); max-width:34ch}
.cta{display:flex; flex-wrap:wrap; gap:10px; margin:26px 0 8px}
.btn{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:12px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; text-decoration:none; padding:11px 16px; border:1px solid var(--rule); border-radius:4px; color:var(--ink)}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn.primary{background:var(--accent); border-color:var(--accent); color:var(--ground)}
.btn.primary:hover{background:transparent; color:var(--accent)}
.group h3{font-family:var(--mono); font-weight:500; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin:30px 0 12px}
.cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr)); gap:12px}
.card{background:var(--surface); border:1px solid var(--rule); border-radius:4px; padding:16px 18px}
.card h4{font-family:var(--display); font-weight:800; font-size:1.02rem; letter-spacing:-.01em; margin:0 0 6px}
.card p{font-size:15px; color:var(--ink-soft); margin:0}
.card a{color:var(--accent)}
.shots{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 24px}
@media (max-width:820px){ .shots{grid-template-columns:minmax(0,1fr)} }
dl.gloss.glance{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:820px){ dl.gloss.glance{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ dl.gloss.glance{grid-template-columns:minmax(0,1fr)} }
dl.gloss.docs{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:640px){ dl.gloss.docs{grid-template-columns:minmax(0,1fr)} }
ol.next{padding-left:1.2em}
footer .cols{display:flex; flex-wrap:wrap; gap:8px 22px; margin-bottom:10px}

/* Benchmarks, laid out like a results table: before, after, and the factor on a log scale
   (solid to the low end of a range, faded to its high end). */
.lead-in{font-size:1.08rem; max-width:62ch; color:var(--ink-soft)}
.bench caption{caption-side:top; text-align:left; padding:12px 14px; font-size:13.5px; color:var(--ink-soft); border-bottom:1px solid var(--rule)}
.bench td{vertical-align:middle}
.bench td.n, .bench th.n{text-align:right}
.bench td.after{color:var(--measured); font-weight:600}
.bench td small{display:block; font-size:12.5px; color:var(--ink-soft); font-weight:400; white-space:normal}
.bench .bar-cell{width:26%; min-width:140px; vertical-align:middle}
.meter{position:relative; height:8px; border-radius:999px; background:var(--accent-soft); overflow:hidden}
.meter b, .meter s{position:absolute; inset:0 auto 0 0; border-radius:999px}
.meter b{background:var(--accent); opacity:.4}
.meter s{background:var(--accent); text-decoration:none}
@media (max-width:640px){
  .bench thead{display:none}
  .bench, .bench tbody, .bench caption{display:block}
  .bench tr{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:6px 14px; padding:12px 14px; border-top:1px solid var(--rule)}
  .bench td{border:0 !important; padding:0}
  .bench td:first-child{grid-column:1 / -1}
  .bench td.n{text-align:left; white-space:normal}
  .bench td:nth-child(3){grid-column:2 / -1}
  .bench td:nth-child(2)::before{content:"before "; color:var(--ink-soft); font-weight:400}
  .bench td:nth-child(3)::before{content:"graphos "; color:var(--ink-soft); font-weight:400}
  .bench td:nth-child(5){grid-column:3; grid-row:3; text-align:right}
  .bench td:nth-child(5)::after{content:"×"}
  .bench .bar-cell{grid-column:1 / 3; grid-row:3; width:auto; min-width:0}
}
.note{font-size:14.5px; color:var(--ink-soft); max-width:80ch}
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:22px 0 0}
@media (max-width:900px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .stats{grid-template-columns:minmax(0,1fr)} }
.stat{background:var(--surface); border:1px solid var(--rule); border-radius:4px; padding:16px 18px}
.stat b{display:block; font-family:var(--display); font-weight:800; font-size:1.7rem; letter-spacing:-.03em; color:var(--measured)}
.stat span{display:block; margin-top:4px; font-size:14px; color:var(--ink-soft)}