/* Fonts, delivered by the site itself, each with its license next to it */

@font-face { font-family: "Ubuntu"; src: url("/assets/fonts/Ubuntu/Ubuntu-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("/assets/fonts/Ubuntu/Ubuntu-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("/assets/fonts/Ubuntu/Ubuntu-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Ubuntu"; src: url("/assets/fonts/Ubuntu/Ubuntu-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/SourceSans3/SourceSans3-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/SourceSans3/SourceSans3-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/assets/fonts/SourceSans3/SourceSans3-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Code Pro"; src: url("/assets/fonts/SourceCodePro/SourceCodePro-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Code Pro"; src: url("/assets/fonts/SourceCodePro/SourceCodePro-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

/* Tokens */

:root {
  --ink: #222222; --dark: #222222; --dark-2: #2c2c31; --dark-line: #3a3a42;
  --body: #45454a; --muted: #86868c; --faint: #aeaeb4; --on-dark: #ececee; --on-dark-muted: #b4b4bc;
  --line: #e6e5e1; --wash: #f7f6f3; --white: #ffffff; --tnw-pink: #dd0099;
  --s1: #3dbf62; --s2: #14b3a3; --s3: #1e9fe8; --s4: #4d6df0; --s5: #7e4fe0;
  --d1: #2b8745; --d2: #0f8579; --d3: #137db8; --d4: #4b6bf0; --d5: #7e4fe0;
  --spectrum: linear-gradient(90deg, var(--s1), var(--s2), var(--s3), var(--s4), var(--s5));
  --accent: var(--s2); --accent-deep: var(--d2); --slice: var(--spectrum);
}

.stage-modeling { --accent: var(--s1); --accent-deep: var(--d1); }
.stage-remembering { --accent: var(--s2); --accent-deep: var(--d2); }
/* A post about no particular stage is marked in gray, so that it lines up with the others. */
.stage-none { --accent: var(--faint); --accent-deep: var(--muted); }
.stage-building { --accent: var(--s3); --accent-deep: var(--d3); }
.stage-integrating { --accent: var(--s4); --accent-deep: var(--d4); }
.stage-learning { --accent: var(--s5); --accent-deep: var(--d5); }
.product-eventsourcingdb { --slice: linear-gradient(90deg, var(--s1), var(--s2), var(--s3)); --glow-1: var(--s2); --glow-2: var(--s3); --glow-3: var(--s1); }

/* Base */

* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0 !important; }
html { scroll-padding-top: 140px; }
/* A jump within the page scrolls smoothly, unless the visitor asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body { font-family: "Source Sans 3", system-ui, sans-serif; color: var(--body); background: var(--white); line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: "Ubuntu", sans-serif; color: var(--ink); }
code, pre, kbd { font-family: "Source Code Pro", monospace; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
.rule { height: 3px; background: var(--slice); }

/* Navigation */

.nav { position: sticky; top: 0; z-index: 30; background: var(--dark); }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 72px; }
.lockup { display: flex; align-items: center; gap: 12px; }
.lockup svg { width: 32px; height: 34px; flex: none; }
.wordmark { font-family: "Ubuntu"; font-weight: 500; font-size: 20px; line-height: 1.1; color: var(--white); white-space: nowrap; }
.wordmark .ev { background: var(--spectrum); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wordmark .sub { display: block; font-family: "Source Sans 3"; font-size: 9.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: #8a8a92; margin-top: 4px; }
.wordmark .sub b { color: var(--tnw-pink); font-weight: 600; }
.nav .items { display: flex; gap: 26px; font-size: 15px; color: var(--on-dark-muted); }
.nav .items a:hover { color: var(--white); }
.nav .items .on { color: var(--white); box-shadow: 0 2px 0 var(--accent); }
.nav .right { display: flex; align-items: center; gap: 16px; }
.navsearch { position: relative; }
.navsearch input { width: 190px; font: inherit; font-size: 14px; color: var(--white); background: var(--dark-2); border: 1px solid var(--dark-line); padding: 8px 12px; }
.navsearch input::placeholder { color: #8a8a92; }
.navsearch input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.navsearch .suggestions { position: absolute; top: 44px; right: 0; width: 360px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(0,0,0,.35); padding: 6px 0; z-index: 40; }
.navsearch .suggestions a { display: block; padding: 8px 14px; color: var(--ink); }
.navsearch .suggestions a:hover, .navsearch .suggestions a:focus { background: var(--wash); outline: 0; }
.navsearch .suggestions b { display: block; font-weight: 600; font-size: 14.5px; line-height: 1.35; }
.navsearch .suggestions span { display: block; font-size: 12.5px; color: var(--muted); }
.navsearch .suggestions a.all { font-size: 13.5px; font-weight: 600; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 10px; }
.nav .btn { display: inline-flex; font-weight: 600; font-size: 14px; padding: 10px 18px; background: var(--accent-deep); color: var(--white); white-space: nowrap; }

/* Search */

.searchresults { max-width: 860px; }
.searchform { display: flex; gap: 10px; max-width: 780px; margin-bottom: 26px; }
.searchform input { flex: 1; font: inherit; font-size: 16.5px; color: var(--ink); border: 1px solid var(--line); padding: 10px 14px; }
.searchform input:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.searchform button { font: inherit; font-weight: 600; font-size: 15px; color: var(--white); background: var(--accent-deep); border: 0; padding: 10px 22px; cursor: pointer; }
.searchresults .count { font-size: 14.5px; color: var(--muted); margin-bottom: 8px; }
.hits { list-style: none; max-width: 780px; }
.hits li { padding: 18px 0; border-bottom: 1px solid var(--line); }
.hits .where { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.hits h2 { font-weight: 400; font-size: 21px; line-height: 1.3; margin-bottom: 6px; }
.hits h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.hits p { font-size: 15.5px; line-height: 1.55; }
.hits mark { background: color-mix(in srgb, var(--accent) 28%, transparent); color: inherit; }

/* Docs bar */

.docsbar { position: sticky; top: 72px; z-index: 25; background: var(--white); border-bottom: 1px solid var(--line); }
.docsbar .wrap { display: flex; align-items: center; gap: 14px; height: 56px; }
.switch { position: relative; }
.switch > button { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border: 1px solid var(--line); background: var(--white); font: inherit; font-family: "Ubuntu"; font-weight: 500; font-size: 15px; color: var(--ink); cursor: pointer; }
.switch > button .caret { font-size: 10px; color: var(--muted); }
.switch > button .v { font-family: "Source Code Pro"; font-weight: 400; font-size: 13px; color: var(--muted); }
.switch .menu .vers { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; }
.version-pill { display: inline-block; font-family: "Source Sans 3", sans-serif; font-size: 11.5px; font-weight: 600; line-height: 18px; letter-spacing: .2px; color: var(--accent-deep); background: color-mix(in srgb, var(--accent) 10%, transparent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); padding: 0 6px; margin-right: 8px; vertical-align: 2px; white-space: nowrap; }
.prose :is(h2, h3, h4) .version-pill { margin: 0 0 0 12px; vertical-align: middle; }
.switch .menu { display: none; position: absolute; top: 44px; left: 0; width: 300px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(0,0,0,.25); padding: 10px 0; z-index: 40; }
.switch.open .menu { display: block; }
.switch .menu .st { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding: 10px 16px 4px; }
.switch .menu .st i { width: 10px; height: 10px; display: inline-block; }
.switch .menu a { display: block; padding: 6px 16px 6px 32px; font-size: 14.5px; color: var(--ink); }
.switch .menu a:hover { background: var(--wash); }
.switch .menu a.on { font-weight: 600; box-shadow: inset 3px 0 0 var(--accent); }

/* Portal layout */

.page { display: grid; grid-template-columns: 250px minmax(0, 1fr) 210px; }
.page > * { min-width: 0; }
aside.side { box-shadow: -100vw 0 0 0 var(--wash); background: var(--wash); border-right: 1px solid var(--line); padding: 26px 18px 60px 0; position: sticky; top: 75px; align-self: start; height: calc(100vh - 75px); overflow-y: auto; font-size: 14px; }
.has-docsbar aside.side { top: 131px; height: calc(100vh - 131px); }
.side .area { font-size: 11.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
.side .group { margin-bottom: 4px; }
.side .group > .name { display: flex; align-items: center; gap: 10px; font-family: "Ubuntu"; font-weight: 500; font-size: 14.5px; color: var(--ink); padding: 6px 0; }
.side .group > .name i { width: 11px; height: 11px; display: inline-block; flex: none; }
.side .group > .name .n { margin-left: auto; font-family: "Source Sans 3"; font-weight: 400; font-size: 12px; color: var(--faint); }
.side .part { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); margin: 10px 0 2px 4px; }
.side ul { list-style: none; margin: 2px 0 10px 4px; border-left: 1px solid var(--line); }
.side li a { display: block; color: var(--body); padding: 4px 0 4px 14px; }
.side li a:hover { color: var(--ink); }
.side li a.on { color: var(--ink); font-weight: 600; margin-left: -1px; border-left: 2px solid var(--accent); padding-left: 13px; }

main.article { padding: 36px 56px 96px; }
.crumbs { font-size: 13px; color: var(--faint); margin-bottom: 16px; }
.meta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-bottom: 14px; }
.tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--ink); }
.tag i { width: 12px; height: 12px; display: inline-block; background: var(--accent); }
.article h1 { font-weight: 300; font-size: 48px; line-height: 1.08; letter-spacing: -.5px; margin-bottom: 18px; }
.article .lede p { font-size: 19.5px; line-height: 1.55; color: var(--body); max-width: 760px; margin-bottom: 32px; }
.article .lede a { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent); }

aside.toc { padding: 36px 0 0 24px; position: sticky; top: 75px; align-self: start; font-size: 13.5px; }
.has-docsbar aside.toc { top: 131px; }
.toc b { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.toc a { display: block; color: var(--muted); padding: 4px 0 4px 12px; border-left: 1px solid var(--line); }
.toc a:hover { color: var(--ink); }

/* Prose */

.prose { max-width: 780px; }
.prose h2 { font-weight: 400; font-size: 27px; margin: 48px 0 12px; letter-spacing: -.2px; }
.prose h3 { font-weight: 500; font-size: 18px; margin: 30px 0 8px; }
.prose h4 { font-weight: 500; font-size: 16px; margin: 22px 0 6px; }
.prose a.anchor { color: var(--faint); font-weight: 400; border-bottom: 0; margin-left: 10px; opacity: 0; }
.prose :is(h2, h3, h4):hover a.anchor, .prose a.anchor:focus-visible { opacity: 1; }
.prose a.anchor:hover { color: var(--ink); }
@media (hover: none) { .prose a.anchor { opacity: .6; } }
.prose p { font-size: 16.5px; margin-bottom: 14px; }
.prose a { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent); }
.prose ul, .prose ol { margin: 0 0 16px 0; }
.prose ul { list-style: none; }
.prose ul li { font-size: 16.5px; padding-left: 22px; position: relative; margin-bottom: 8px; }
.prose ul li::before { content: ""; position: absolute; left: 1px; top: 10px; width: 9px; height: 9px; background: var(--accent); }
.prose ol { padding-left: 22px; }
.prose ol li { font-size: 16.5px; margin-bottom: 8px; }
.prose :not(pre) > code { font-size: 14px; background: var(--wash); border: 1px solid var(--line); padding: 1px 5px; color: var(--ink); overflow-wrap: anywhere; }
.prose table { width: 100%; border-collapse: collapse; margin: 8px 0 20px; font-size: 14px; display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { font-size: 11.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.prose td code { white-space: nowrap; }
.prose img { display: block; max-width: 100%; height: auto; margin: 12px 0 20px; border: 1px solid var(--line); }
.prose figure { margin: 12px 0 24px; }
.prose figure img { margin: 0 0 8px; }
.prose figcaption { font-size: 14px; line-height: 1.5; color: var(--muted); }
.keys kbd { font-size: 13px; border: 1px solid var(--line); border-bottom-width: 2px; padding: 0 5px; background: var(--white); color: var(--ink); }

/* Code */

.prose pre, pre.chroma { font-size: 13.5px; line-height: 1.65; background: var(--dark); color: #dcdce2; padding: 18px 20px; overflow-x: auto; margin: 8px 0 18px; border-top: 3px solid var(--accent); }
.chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kr, .chroma .kt, .chroma .nt { color: #8fd3c9; }
.chroma .s, .chroma .s1, .chroma .s2, .chroma .se, .chroma .sb { color: #9fd5a6; }
.chroma .c, .chroma .c1, .chroma .cm, .chroma .cs, .chroma .ch { color: #7c7c86; }
.chroma .nf, .chroma .fm, .chroma .m, .chroma .mi, .chroma .mf { color: #f0c674; }
.chroma .nb, .chroma .na { color: #86b6f0; }

/* Overviews */

.prose .start { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 18px 20px; margin: 4px 0 8px; max-width: 420px; }
.prose .start .k { font-size: 11.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); }
.prose .start b { font-family: "Ubuntu"; font-weight: 400; font-size: 21px; color: var(--ink); }
.prose a.start { border-bottom: 1px solid var(--line); font-weight: 400; }
.prose ul.overview li.part { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); padding-left: 0; margin: 14px 0 6px; }
.prose ul.overview li.part::before { display: none; }

/* Tutorials */

.steps-title { font-weight: 400; font-size: 27px; margin: 40px 0 12px; }
ol.steps { max-width: 780px; padding-left: 26px; }
ol.steps li { font-size: 16.5px; margin-bottom: 8px; }
ol.steps a { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 780px; margin-top: 56px; }
.pager a { border: 1px solid var(--line); padding: 14px 18px; }
.pager a:hover { border-color: var(--ink); }
.pager small { display: block; font-size: 12px; color: var(--muted); letter-spacing: .6px; text-transform: uppercase; font-weight: 600; }
.pager b { font-family: "Ubuntu"; font-weight: 400; font-size: 17px; color: var(--ink); }
.pager .next { text-align: right; grid-column: 2; }

/* Admonitions */

.admonition { border-left: 3px solid var(--accent); background: var(--wash); padding: 14px 18px 4px; margin: 20px 0; }
.admonition-title, .admonition > summary { font-family: "Ubuntu"; font-weight: 500; color: var(--ink); font-size: 15.5px; margin-bottom: 8px; }
details.admonition { padding-bottom: 14px; }
details.admonition[open] { padding-bottom: 4px; }
.admonition > summary { cursor: pointer; margin-bottom: 0; }
details.admonition[open] > summary { margin-bottom: 8px; }
.admonition p, .admonition li { font-size: 15.5px; }
.admonition.success { border-left-color: var(--s1); }
.admonition.question { border-left-color: var(--s4); }
.admonition.warning { border-left-color: #e0a100; }
.admonition.danger { border-left-color: #c0392b; }
.admonition.quote { border-left-color: var(--faint); }

/* Tabs */

.tabs { margin: 12px 0 18px; border-top: 3px solid var(--accent); }
.tabs-bar { display: flex; flex-wrap: wrap; background: var(--dark-2); }
.tabs-bar button { font: inherit; font-size: 13.5px; font-weight: 600; color: var(--on-dark-muted); background: transparent; border: 0; padding: 10px 16px; cursor: pointer; }
.tabs-bar button.on { color: var(--white); background: var(--dark); box-shadow: inset 0 -2px 0 var(--accent); }
.tabs-pane { display: none; padding-top: 12px; }
.tabs-pane.on { display: block; }
.tabs-pane > pre:first-child { margin-top: -12px; border-top: 0; }

/* Blog */
[hidden] { display: none !important; }

.list-page .page { grid-template-columns: 250px minmax(0, 1fr); }
.list-page aside.toc { display: none; }
.list-page .side li a.on, .side .sections a.on { border-left-color: var(--ink); }

.side .sections { margin-bottom: 18px; }
.side li a { display: flex; align-items: center; gap: 8px; }
.side li a .n { margin-left: auto; font-size: 12px; color: var(--faint); font-weight: 400; }
.side li a i { width: 10px; height: 10px; display: inline-block; flex: none; }
.filter { margin-top: 16px; }
.filter .fname { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); margin: 0 0 2px 4px; }
.side .recent a { font-size: 13.5px; line-height: 1.4; padding-top: 6px; padding-bottom: 6px; align-items: flex-start; }
.side .all { display: block; margin: 4px 0 0 18px; font-size: 13px; color: var(--muted); }
.side .all:hover { color: var(--ink); }

.sq { display: inline-flex; gap: 3px; }
.sq i { width: 11px; height: 11px; display: inline-block; }
.sq i, .chip i, .side li a i { background: var(--accent); }

/* Overview */

.list-page main.article { position: relative; }
.feed { position: absolute; top: 84px; right: 56px; display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; color: var(--ink); border: 1px solid var(--line); padding: 6px 12px; white-space: nowrap; }
.feed:hover { border-color: var(--ink); }
.feed svg { width: 13px; height: 13px; fill: currentColor; }
.quick { max-width: 900px; margin: -8px 0 18px; }
.quick input { width: 100%; font: inherit; font-size: 15.5px; color: var(--ink); background: var(--white); border: 1px solid var(--line); padding: 9px 12px; }
.quick input:focus { outline: 2px solid var(--ink); outline-offset: -1px; }
.active { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; font-size: 14.5px; background: var(--wash); padding: 10px 14px; margin: 0 0 22px; max-width: 900px; }
.active a { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--ink); }

.lead { display: block; border: 1px solid var(--line); border-top: 3px solid var(--ink); padding: 22px 24px 20px; max-width: 900px; }
.lead:hover { border-color: var(--ink); }
.lead .k, .year { font-size: 11.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted); }
.lead .k { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.lead h2 { font-weight: 300; font-size: 34px; line-height: 1.12; letter-spacing: -.3px; margin-bottom: 10px; }
.lead p { font-size: 17px; margin-bottom: 14px; max-width: 760px; }

.year { font-family: "Source Sans 3", sans-serif; border-bottom: 1px solid var(--line); padding-bottom: 8px; margin: 40px 0 0; max-width: 900px; }
ol.posts { list-style: none; max-width: 900px; }
.post > a { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.when time { display: block; font-size: 14px; color: var(--ink); font-variant-numeric: tabular-nums; }
.when .fmt { display: block; font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); margin-top: 2px; }
.what h3 { font-weight: 400; font-size: 20px; line-height: 1.25; margin-bottom: 6px; }
.what h3 .sq { margin-right: 10px; vertical-align: 2px; }
.post > a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.what p { font-size: 15.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 8px; }
.by { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 13.5px; color: var(--muted); }
.who { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); }
.who img { width: 22px; height: 22px; object-fit: cover; }
.empty { margin-top: 24px; font-size: 16px; color: var(--muted); }

/* Post */

.article .byline + .prose, .article .lede + .byline { margin-top: -12px; }
.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 36px; margin-bottom: 36px; padding-top: 16px; border-top: 1px solid var(--line); max-width: 780px; }
.byline .person { display: flex; align-items: center; gap: 12px; }
.byline img { width: 44px; height: 44px; object-fit: cover; }
.byline b { display: block; font-family: "Ubuntu"; font-weight: 500; color: var(--ink); font-size: 15.5px; line-height: 1.3; }
.byline span { font-size: 13.5px; color: var(--muted); }
.meta .m { font-size: 13px; color: var(--faint); }

.filed { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 44px; max-width: 780px; }
.filed > span { font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-right: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid var(--line); font-size: 13.5px; color: var(--ink); }
.chip:hover { border-color: var(--ink); }
button.chip { font: inherit; font-size: 13.5px; background: var(--white); cursor: pointer; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; max-width: 780px; }
.share > span:first-child { font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-right: 6px; min-width: 88px; }
.filed > span { min-width: 88px; }
.share .done { font-size: 13.5px; color: var(--muted); }
.chip i { width: 10px; height: 10px; display: inline-block; }

.authors { display: grid; gap: 10px; margin-top: 28px; max-width: 780px; }
.authorbox { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 20px 22px; background: var(--wash); }
.authorbox img { width: 64px; height: 64px; object-fit: cover; }
.authorbox .k { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.authorbox b { display: block; font-family: "Ubuntu"; font-weight: 500; font-size: 18px; color: var(--ink); margin: 2px 0 4px; }
.authorbox p { font-size: 15px; }
.authorbox a { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent); }

.related { margin-top: 52px; max-width: 780px; }
.related h2 { font-weight: 400; font-size: 22px; margin-bottom: 14px; }
.rel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rel a { display: block; border: 1px solid var(--line); padding: 14px 16px; }
.rel a:hover { border-color: var(--ink); }
.rel .st .sq { flex: none; margin-top: 4px; }
.rel .st { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.rel b { display: block; font-family: "Ubuntu"; font-weight: 500; font-size: 15.5px; line-height: 1.3; color: var(--ink); }

@media (max-width: 900px) {
  .list-page .page { grid-template-columns: minmax(0, 1fr); }
  .list-page aside.side { display: block; position: static; height: auto; box-shadow: none; border-right: 0; border-bottom: 1px solid var(--line); padding: 18px 24px 8px; background: var(--wash); margin: 0 -24px; }
  .list-page .side ul { display: flex; flex-wrap: wrap; gap: 2px 14px; border-left: 0; margin-left: 0; }
  .list-page .side li a, .list-page .side li a.on { padding: 2px 0; border-left: 0; margin-left: 0; }
  .list-page .side li a.on { box-shadow: inset 0 -2px 0 var(--ink); }
  .list-page .side .sections { display: none; }
  .feed { position: static; margin: 0 0 24px; }
  .lead p { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
  .post > a { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .when { display: flex; gap: 12px; align-items: baseline; }
  .when .fmt { margin-top: 0; }
  .lead h2 { font-size: 27px; }
  .rel { grid-template-columns: minmax(0, 1fr); }
}

/* Landscape */
.stagegroup { margin-top: 36px; max-width: 900px; }
.stagegroup h2 { display: flex; align-items: baseline; gap: 10px; font-weight: 400; font-size: 24px; padding-bottom: 10px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.stagegroup h2 i { width: 13px; height: 13px; display: inline-block; background: var(--accent); align-self: center; }
.stagegroup h2 .motto { font-family: "Source Sans 3", sans-serif; font-size: 15px; color: var(--muted); }
.stagegroup h2 .n { margin-left: auto; font-family: "Source Sans 3", sans-serif; font-size: 13px; color: var(--faint); }

.entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.entry { display: flex; flex-direction: column; border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 14px 18px 16px; }
.entry .head { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; margin: 8px 0 10px; }
.entry .mark { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: var(--accent-deep); color: var(--white); font-family: "Ubuntu", sans-serif; font-weight: 500; font-size: 15px; letter-spacing: .3px; margin-top: 2.5px; }
.entry .mark.long { font-size: 12px; letter-spacing: 0; }
.entry .kind { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); }
.entry h3 { font-weight: 500; font-size: 20px; line-height: 1.25; margin: 0 0 1px; }
.entry h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.entry .maker { font-size: 14px; color: var(--muted); }
.entry .maker a { color: var(--ink); }
.entry .maker a:hover { text-decoration: underline; }
.entry p { font-size: 15px; line-height: 1.55; margin-bottom: 12px; }
.facts { display: grid; gap: 3px; font-size: 13.5px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.facts div { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; }
.facts dt { color: var(--muted); }
.facts dd { color: var(--ink); }
.facts a { border-bottom: 1px solid var(--line); }
.facts a:hover { border-bottom-color: var(--ink); }
.entry .visit { align-self: flex-start; margin-top: 12px; font-size: 13px; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--accent); }
.entry:target { box-shadow: 0 0 0 2px var(--accent); }

.criteria { margin-top: 44px; max-width: 900px; background: var(--wash); padding: 14px 18px; }
.criteria summary { cursor: pointer; font-family: "Ubuntu"; font-weight: 500; color: var(--ink); font-size: 16px; }
.criteria p { font-size: 15px; margin-top: 10px; max-width: 760px; }

@media (max-width: 900px) {
  .entries { grid-template-columns: minmax(0, 1fr); }
  .stagegroup h2 .motto { display: none; }
}

/* Product pages */

.productbar { position: sticky; top: 72px; z-index: 25; background: var(--white); border-bottom: 1px solid var(--line); }
.productbar .wrap { display: flex; align-items: center; gap: 28px; height: 52px; font-size: 14px; overflow-x: auto; }
.productbar .name { display: flex; align-items: center; gap: 10px; font-family: "Ubuntu"; font-weight: 500; color: var(--ink); white-space: nowrap; }
.productbar .name img { width: 20px; height: 23px; }
.productbar a { color: var(--body); white-space: nowrap; }
.productbar a:hover { color: var(--ink); }
.productbar .sp { flex: 1; }
.productbar .primary { font-weight: 600; color: var(--accent-deep); }

.showcase { display: block; line-height: 1.6; }
.showcase section { padding-block: 96px; }
.showcase h2 { font-weight: 300; font-size: 42px; line-height: 1.14; letter-spacing: -.4px; margin-bottom: 16px; }
.showcase .dark { background: var(--dark); color: var(--on-dark); }
.showcase .dark :is(h1, h2, h3) { color: var(--white); }
.showcase .wash { background: var(--wash); }
.showcase section:not(.dark, .wash) + section:not(.dark, .wash) { border-top: 1px solid var(--line); }
.showcase .eyebrow { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.showcase .dark .eyebrow { color: #9a9aa2; }
.showcase .eyebrow i { width: 12px; height: 12px; display: inline-block; background: var(--accent); flex: none; }
.showcase .lede { font-size: 19px; max-width: 620px; }
.showcase .dark .lede { color: var(--on-dark-muted); }
.showcase :is(.lede, .note, .codecap, .fine, .trust, .needs, .support) a { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent); }
.showcase .dark :is(.lede, .note) a { color: var(--white); }
.showcase .more { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--accent); padding-bottom: 2px; }
.showcase .dark .more { color: var(--white); }
.showcase .btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; padding: 14px 26px; white-space: nowrap; }
.showcase .btn-primary { background: var(--accent-deep); color: var(--white); }
.showcase .btn-secondary { background: var(--ink); color: var(--white); box-shadow: inset 0 -3px 0 var(--accent); }
.showcase .dark .btn-secondary { background: var(--dark-2); }
.showcase .btns { display: flex; flex-wrap: wrap; gap: 12px; }
.showcase .after { margin-top: 32px; }

.hero { padding-block: 96px 88px; background-image: radial-gradient(circle at 78% 42%, color-mix(in srgb, var(--glow-1, var(--accent)) 22%, transparent), transparent 38%), radial-gradient(circle at 92% 90%, color-mix(in srgb, var(--glow-2, var(--accent)) 18%, transparent), transparent 34%), radial-gradient(circle at 4% 100%, color-mix(in srgb, var(--glow-3, var(--accent)) 14%, transparent), transparent 40%); }
.hero .inner { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; }
.hero .inner > div, .why .inner > div, .contact .inner > div, .support > div { min-width: 0; }
.hero .crumbs { color: #8a8a92; margin-bottom: 26px; }
.hero .crumbs b { color: var(--on-dark-muted); font-weight: 400; }
.hero .stage-tag { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--white); background: var(--dark-2); padding: 5px 10px; border-left: 3px solid var(--accent); margin-bottom: 22px; }
.hero h1 { font-weight: 300; font-size: 72px; line-height: 1.02; letter-spacing: -1px; margin-bottom: 12px; }
.hero .claim { font-family: "Ubuntu"; font-weight: 500; font-size: 26px; background: var(--slice); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 22px; display: inline-block; }
.hero .lede { margin-bottom: 34px; }
.hero .note { margin-top: 18px; font-size: 14px; color: #9a9aa2; }
.hero .note strong { color: var(--on-dark); font-weight: 600; }
.hero .about { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--dark-line); font-size: 13.5px; }
.hero .about div { display: flex; gap: 8px; }
.hero .about dt { color: #8a8a92; }
.hero .about dd { color: var(--on-dark); }
.hero .mark { display: flex; justify-content: center; }
.hero .mark img { width: 100%; max-width: 300px; filter: drop-shadow(0 30px 80px color-mix(in srgb, var(--glow-1, var(--accent)) 32%, transparent)); }

.why .inner { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: start; }
.showcase pre.chroma { margin: 0; }
.codecap { font-size: 13px; color: var(--muted); margin-top: 10px; }
.needs { list-style: none; margin-top: 28px; }
.needs li { padding: 12px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.needs li::before { content: ""; width: 12px; height: 12px; background: var(--accent); margin-top: 7px; }
.needs b { color: var(--ink); font-weight: 600; }

.caps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 48px; border-top: 1px solid var(--dark-line); }
.cap { padding: 28px 24px 8px 0; }
.cap + .cap { padding-left: 24px; border-left: 1px solid var(--dark-line); }
.cap .g { font-size: 11.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--accent); margin-bottom: 6px; }
.cap h3 { font-weight: 300; font-size: 24px; margin-bottom: 20px; }
.cap ul { list-style: none; }
.cap li { margin-bottom: 18px; }
.cap li b { display: block; font-family: "Ubuntu"; font-weight: 500; color: var(--white); font-size: 15.5px; margin-bottom: 2px; }
.cap li span { font-size: 14px; color: var(--on-dark-muted); display: block; }
.cap li a { font-size: 13px; color: #9a9aa2; border-bottom: 1px solid #4a4a52; }
.cap li a:hover { color: var(--white); }

.family { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 44px; }
.fam { border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 30px 30px 26px; background: var(--white); }
.fam .st { font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.fam .st i { width: 11px; height: 11px; display: inline-block; background: var(--accent); }
.fam h3 { font-weight: 400; font-size: 25px; margin-bottom: 8px; }
.fam p { font-size: 15.5px; margin-bottom: 22px; max-width: 460px; }
.fam p.sub { font-family: "Source Code Pro"; font-size: 12.5px; color: var(--muted); margin-top: -10px; }
.acc { margin-top: 44px; }
.acc .rows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.acc .rows > div { border-top: 1px solid var(--line); padding-top: 14px; }
.acc .rows b { display: block; font-family: "Ubuntu"; font-weight: 500; color: var(--ink); margin-bottom: 4px; }
.acc .rows a b { border-bottom: 2px solid var(--accent); display: inline; }
.acc .rows a + span, .acc .rows b + span { display: block; margin-top: 4px; }
.acc .rows span { font-size: 14.5px; color: var(--muted); }
.acc .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.acc .chips span { font-size: 12.5px; color: var(--ink); border: 1px solid var(--line); padding: 3px 8px; background: var(--white); }

.cmp { width: 100%; min-width: 820px; border-collapse: collapse; margin-top: 40px; font-size: 14.5px; }
.cmp th, .cmp td { text-align: left; padding: 16px 16px 16px 0; border-top: 1px solid var(--dark-line); vertical-align: top; }
.cmp thead th { font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #8a8a92; border-top: 0; padding-bottom: 12px; }
.cmp tbody th { font-family: "Ubuntu"; font-weight: 500; color: var(--white); width: 22%; }
.cmp td { color: var(--on-dark-muted); }
.cmp td.us { color: var(--white); background: color-mix(in srgb, var(--accent) 10%, transparent); padding-left: 16px; border-left: 3px solid var(--accent); }
.cmp thead th.us { color: var(--white); padding-left: 16px; }
.showcase .scroll { overflow-x: auto; }

.plans { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 44px; border: 1px solid var(--line); }
.plan { padding: 30px 26px; display: flex; flex-direction: column; }
.plan + .plan { border-left: 1px solid var(--line); }
.plan.hl { background: var(--wash); box-shadow: inset 0 3px 0 var(--accent); }
.plan h3 { font-weight: 500; font-size: 19px; margin-bottom: 4px; }
.plan .for { font-size: 14px; color: var(--muted); margin-bottom: 22px; min-height: 44px; }
.plan .price { font-family: "Ubuntu"; font-weight: 300; font-size: 40px; color: var(--ink); line-height: 1; }
.plan .per { font-size: 13px; color: var(--muted); margin: 6px 0 4px; }
.plan .alt { font-size: 13.5px; color: var(--body); margin-bottom: 22px; }
.plan ul { list-style: none; font-size: 14.5px; margin-bottom: 26px; flex: 1; }
.plan li { padding: 7px 0; border-top: 1px solid var(--line); }
.plan .btn { justify-content: center; }
.fine { font-size: 13px; color: var(--muted); margin-top: 16px; max-width: 900px; }
.support { display: grid; grid-template-columns: 1fr 2fr; gap: 48px; margin-top: 72px; align-items: start; }
.support h3 { font-weight: 300; font-size: 30px; margin-bottom: 10px; }
.sup { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--line); }
.sup div { padding: 20px 18px; }
.sup div + div { border-left: 1px solid var(--line); }
.sup b { display: block; font-family: "Ubuntu"; font-weight: 500; color: var(--ink); margin-bottom: 6px; }
.sup span { display: block; font-size: 14px; line-height: 1.45; color: var(--muted); }
.trust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 56px; }
.trust div { border-top: 3px solid var(--ink); padding-top: 14px; font-size: 15px; }
.trust b { display: block; color: var(--ink); font-family: "Ubuntu"; font-weight: 500; margin-bottom: 4px; }

.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 40px; }
.card { border: 1px solid var(--line); padding: 24px; background: var(--white); display: flex; flex-direction: column; gap: 8px; }
.card:hover { border-color: var(--ink); }
.card .kind { display: flex; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.card .kind i { width: 11px; height: 11px; display: inline-block; align-self: center; background: var(--accent); }
.card h3 { font-weight: 400; font-size: 20px; }
.card p { font-size: 14.5px; color: var(--muted); flex: 1; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.card .more { align-self: flex-start; margin-top: 8px; }

.contact .inner { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; }
.contact .ways { display: grid; gap: 12px; }
.contact .ways a { display: flex; justify-content: space-between; align-items: center; gap: 16px; overflow-wrap: anywhere; border: 1px solid var(--dark-line); padding: 18px 20px; background: var(--dark-2); color: var(--white); font-family: "Ubuntu"; font-size: 17px; }
.contact .ways a:hover { border-color: var(--on-dark-muted); }
.contact .ways a small { display: block; font-family: "Source Sans 3"; font-size: 13.5px; color: var(--on-dark-muted); }

.catalog .hero { --glow-1: var(--s3); --glow-2: var(--s5); --glow-3: var(--s1); padding-block: 80px 72px; }
.shelves { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px; }
.offer { display: flex; flex-direction: column; border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 30px 30px 28px; background: var(--white); }
.offer .head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.offer .head img { width: 40px; height: 44px; flex: none; }
.offer h3 { font-weight: 400; font-size: 28px; line-height: 1.15; }
.offer .claim { font-family: "Ubuntu"; font-weight: 500; font-size: 18px; color: var(--accent-deep); margin-bottom: 10px; }
.offer p { font-size: 16px; margin-bottom: 26px; flex: 1; }
.offer p a { color: var(--ink); font-weight: 600; border-bottom: 2px solid var(--accent); }

@media (max-width: 1080px) {
  .caps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cap:nth-child(3) { padding-left: 0; border-left: 0; }
  .plans, .sup { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan:nth-child(odd), .sup div:nth-child(odd) { border-left: 0; }
  .plan:nth-child(n+3), .sup div:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 900px) {
  .showcase section { padding-block: 68px; }
  .hero { padding-block: 60px; }
  .hero .inner, .why .inner, .contact .inner, .support { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .hero .mark { order: -1; justify-content: flex-start; }
  .hero .mark img { max-width: 110px; }
  .hero h1 { font-size: 46px; }
  .hero .claim { font-size: 21px; }
  .showcase h2 { font-size: 32px; }
  .family, .cards, .trust, .shelves { grid-template-columns: minmax(0, 1fr); }
  .acc .rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 560px) {
  .caps, .plans, .acc .rows { grid-template-columns: minmax(0, 1fr); }
  .cap, .cap + .cap { padding-left: 0; border-left: 0; border-top: 1px solid var(--dark-line); }
  .cap:first-child { border-top: 0; }
  .plan + .plan { border-left: 0; border-top: 1px solid var(--line); }
  .productbar a:not(.primary) { display: none; }
}

/* Homepage */

.home section { padding-block: 104px; }
.home h2 { font-size: 44px; line-height: 1.12; margin-bottom: 18px; }
.home .lede { max-width: 600px; }
.home .eyebrow i.sp { background: var(--spectrum); }
.home .hero { padding-block: 120px 0; background-image: radial-gradient(circle at 76% 34%, color-mix(in srgb, var(--s3) 26%, transparent), transparent 36%), radial-gradient(circle at 88% 70%, color-mix(in srgb, var(--s5) 20%, transparent), transparent 34%), radial-gradient(circle at 6% 100%, color-mix(in srgb, var(--s1) 16%, transparent), transparent 40%); }
.home .hero .inner { grid-template-columns: 1.25fr 1fr; gap: 48px; }
.home .hero h1 { font-size: 76px; margin-bottom: 26px; }
.home .hero .lede { margin-bottom: 38px; }
.home .hero .mark svg { width: 100%; max-width: 360px; height: auto; filter: drop-shadow(0 30px 80px color-mix(in srgb, var(--s3) 35%, transparent)); }
.home .chain { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; margin-top: 110px; padding-bottom: 40px; }
.home .node { position: relative; }
.home .node .hx { width: 26px; height: 30px; display: block; position: relative; z-index: 1; }
.home .node .hx polygon { fill: var(--accent); }
.home .node::after { content: ""; position: absolute; left: 26px; right: -28px; top: 14px; height: 2px; background: #4a4a52; }
.home .chain .node:last-child::after, .home .stage:last-child .node::after { right: 0; background: repeating-linear-gradient(90deg, #4a4a52 0 6px, transparent 6px 12px); }
.home .node span { display: block; margin-top: 12px; font-size: 13px; color: #9a9aa2; }

.problem .inner { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: start; }
.problem .inner > div { min-width: 0; }
.compare { display: grid; gap: 18px; }
.ledger { border: 1px solid var(--line); background: var(--white); }
.ledger .head { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); padding: 12px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; }
.ledger .state { display: grid; grid-template-columns: 1fr 1fr; padding: 16px 18px; font-family: "Source Code Pro"; font-size: 15px; color: var(--ink); }
.ledger .state span:last-child { text-align: right; font-weight: 500; }
.events { list-style: none; padding: 6px 0; position: relative; }
.events::before { content: ""; position: absolute; left: 23px; top: 22px; bottom: 76px; width: 2px; background: linear-gradient(180deg, var(--s1), var(--s3), var(--s5)); }
.events li { display: grid; grid-template-columns: 48px 70px 1fr auto; align-items: center; padding: 9px 18px 9px 0; font-size: 15px; }
.events li i { width: 12px; height: 12px; background: var(--ink); justify-self: center; position: relative; z-index: 1; outline: 3px solid var(--white); }
.events li:nth-child(5n+1) i { background: var(--s1); }
.events li:nth-child(5n+2) i { background: var(--s2); }
.events li:nth-child(5n+3) i { background: var(--s3); }
.events li:nth-child(5n+4) i { background: var(--s4); }
.events li:nth-child(5n+5) i { background: var(--s5); }
.events li .t { font-family: "Source Code Pro"; font-size: 12.5px; color: var(--faint); }
.events li .ty, .events li .v { font-family: "Source Code Pro"; font-size: 14px; color: var(--ink); }
.events li .v { color: var(--body); }
.events li.sum { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }
.events li.sum .ty { color: var(--muted); }
.events li.sum .v { color: var(--ink); font-weight: 500; }

.story { font-family: "Ubuntu"; font-weight: 300; font-size: 44px; line-height: 1.3; color: var(--ink); max-width: 980px; margin: 8px 0 64px; }
.story strong { font-weight: 500; box-shadow: inset 0 -6px 0 color-mix(in srgb, var(--s2) 28%, transparent); }
.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; border-top: 1px solid var(--line); padding-top: 32px; margin-bottom: 40px; }
.three h3 { font-weight: 500; font-size: 19px; margin-bottom: 8px; }
.three .n { font-family: "Source Code Pro"; font-size: 12px; color: var(--faint); display: block; margin-bottom: 10px; }

.stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 28px; margin-top: 56px; }
.stage .node { margin-bottom: 22px; }
.stage h3 { font-weight: 300; font-size: 26px; margin-bottom: 10px; }
.stage p { font-size: 15px; color: var(--on-dark-muted); margin-bottom: 18px; min-height: 72px; }
.stage .k { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #7c7c86; margin: 14px 0 6px; }
.stage a { display: block; font-size: 15px; color: var(--white); padding: 3px 0; }
.stage a:hover { text-decoration: underline; }
.stage .prod { display: inline-flex; align-items: center; gap: 8px; margin-top: 2px; padding: 6px 10px; background: var(--dark-2); border-left: 3px solid var(--accent); font-size: 14px; }
.stage .prod + .prod { margin-top: 6px; }

.proof { background-image: radial-gradient(circle at 80% 40%, color-mix(in srgb, var(--s2) 18%, transparent), transparent 38%); }
.proof .inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.proof .inner > div { min-width: 0; }
.proof .logo { display: flex; justify-content: center; }
.proof .logo img { width: 100%; max-width: 280px; filter: drop-shadow(0 30px 70px color-mix(in srgb, var(--s2) 30%, transparent)); }
.proof .lede { margin-bottom: 34px; }
.figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 88px; border-top: 1px solid var(--dark-line); }
.figures div { padding: 26px 24px 0 0; }
.figures b { display: block; font-family: "Ubuntu"; font-weight: 300; font-size: 48px; color: var(--white); line-height: 1; margin-bottom: 8px; }
.figures span { font-size: 15px; color: var(--on-dark-muted); }
.land { margin-top: 64px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.land .k { font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #7c7c86; margin-right: 8px; }
.land .e { font-size: 14px; color: var(--on-dark); border: 1px solid var(--dark-line); padding: 6px 12px; }
.land .more { margin-left: 8px; }

.found .inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.found .inner > div { min-width: 0; }
.found .links { display: flex; gap: 28px; margin-top: 28px; flex-wrap: wrap; }
.people { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; border-top: 1px solid var(--line); }
.people div { padding-top: 18px; }
.people b { display: block; font-family: "Ubuntu"; font-weight: 300; font-size: 36px; color: var(--ink); line-height: 1; margin-bottom: 6px; }
.people span { font-size: 14.5px; color: var(--muted); }
.home .start { display: grid; gap: 16px; align-content: start; }
.home .start .eyebrow { margin-bottom: 6px; }
.startcard { border: 1px solid var(--line); padding: 24px 26px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; background: var(--white); }
.startcard:hover { border-color: var(--ink); }
.startcard .kind { grid-column: 1 / -1; display: flex; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.startcard .kind i { width: 11px; height: 11px; display: inline-block; align-self: center; background: var(--accent); }
.startcard h3 { font-weight: 400; font-size: 21px; }
.startcard p { grid-column: 1 / 2; font-size: 15px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.startcard .go { grid-row: 2 / 4; grid-column: 2; font-size: 22px; color: var(--ink); }

@media (max-width: 900px) {
  .home section { padding-block: 72px; }
  .home .hero { padding-top: 72px; }
  .home .hero .inner { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .problem .inner, .proof .inner, .found .inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .home .hero .mark svg { max-width: 150px; }
  .home .hero h1 { font-size: 48px; }
  .home h2 { font-size: 34px; }
  .story { font-size: 30px; margin-bottom: 44px; }
  .three, .figures { grid-template-columns: minmax(0, 1fr); }
  .stages { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .stage p { min-height: 0; }
  .home .node span { display: none; }
  .home .chain { margin-top: 64px; gap: 12px; }
  .home .chain .node::after { right: -12px; }
  .stage .node::after { display: none; }
  .proof .logo { justify-content: flex-start; }
  .proof .logo img { max-width: 120px; }
  .figures { margin-top: 56px; }
  .figures div { padding-bottom: 20px; }
}

@media (max-width: 560px) {
  .home .hero h1 { font-size: 40px; }
  .events li { grid-template-columns: 40px 58px minmax(0, 1fr) auto; font-size: 14px; }
  .events::before { left: 20px; }
  .events li .ty, .events li .v { font-size: 12.5px; }
}

/* Footer */

footer { background: var(--dark); color: var(--on-dark-muted); }
footer .rule { background: var(--spectrum); }
.legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-block: 26px 36px; font-size: 13px; color: #74747c; }
.legal div { display: flex; gap: 22px; }

/* Responsive */

@media (max-width: 1180px) {
  .page { grid-template-columns: 230px minmax(0, 1fr); }
  aside.toc { display: none; }
  .nav .items { gap: 18px; font-size: 14px; }
}

@media (max-width: 900px) {
  .nav .items, .nav .btn { display: none; }
  .navsearch input { width: 150px; }
  .navsearch .suggestions { width: min(360px, calc(100vw - 48px)); }
  .page { grid-template-columns: minmax(0, 1fr); }
  aside.side { display: none; }
  main.article { padding: 26px 24px 72px; }
  .article h1 { font-size: 34px; }
  .article .lede p { font-size: 18px; }
}

@media (max-width: 560px) {
  .wordmark .sub { display: none; }
}

/* The overviews of the areas: a dark head with the five stages as a chain, each with how much the area holds in it, and shelves of cards below. */
.area-hero { --glow-1: var(--s3); --glow-2: var(--s5); --glow-3: var(--s1); padding-block: 80px 72px; }
.area-hero .lede { margin-bottom: 0; max-width: 560px; }
.chain-stages { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.chain-stages > * { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; text-align: center; color: var(--on-dark-muted); }
.chain-stages > *:not(:last-child)::after { content: ""; position: absolute; top: 30px; left: calc(50% + 34px); right: calc(-50% + 34px); height: 2px; background: var(--dark-line); }
.chain-stages i { display: grid; place-items: center; width: 54px; height: 62px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--accent); font-style: normal; font-family: "Ubuntu"; font-weight: 500; font-size: 20px; letter-spacing: 0; color: var(--white); transition: transform .15s; }
.chain-stages a:hover { color: var(--white); }
.chain-stages a:hover i { transform: translateY(-3px); }
.chain-stages .none { color: #6e6e76; }
.chain-stages .none i { background: var(--dark-2); color: #6e6e76; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.tile { display: flex; flex-direction: column; overflow-wrap: anywhere; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--accent); padding: 22px 24px 20px; transition: transform .15s, box-shadow .15s; }
.tile:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0, 0, 0, .06); }
.tile b { font-family: "Ubuntu"; font-weight: 500; font-size: 19px; line-height: 1.25; color: var(--ink); margin-bottom: 8px; }
.tile p { font-size: 15px; line-height: 1.55; color: var(--body); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.tile .meta { margin-top: auto; padding-top: 14px; font-size: 13px; color: var(--muted); }
.area .shelf { padding-block: 64px; }
.area .more { display: inline-block; margin-top: 28px; font-weight: 600; color: var(--ink); border-bottom: 2px solid var(--accent); }
@media (max-width: 900px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .chain-stages { margin-top: 12px; }
  .chain-stages > * { font-size: 10px; letter-spacing: .6px; gap: 8px; }
  .chain-stages > *:not(:last-child)::after { top: 21px; left: calc(50% + 24px); right: calc(-50% + 24px); }
  .chain-stages i { width: 38px; height: 44px; font-size: 16px; }
}

/* The switch on the homepage: one card for each path, after the mockup. */
.ways-in .ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.way { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); padding: 34px 30px 30px; background: var(--white); }
.way::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 3px; background: var(--ink); transition: background .2s; }
.way:hover::before { background: var(--spectrum); }
.way h3 { font-weight: 400; font-size: 26px; margin-bottom: 8px; }
.way .q { font-size: 17px; color: var(--muted); margin-bottom: 26px; }
.way ul { list-style: none; margin-bottom: 30px; flex: 1; }
.way li { padding: 9px 0; border-top: 1px solid var(--line); font-size: 15.5px; color: var(--body); }
.way .go { font-weight: 600; color: var(--ink); }

/* The pages of the paths: the question in the head, the stations as a route beside it, and a shelf of cards for each station. */
.route { display: flex; flex-direction: column; gap: 2px; border-left: 2px solid var(--dark-line); padding-left: 24px; }
.route a { display: flex; align-items: center; gap: 14px; padding: 7px 0; font-size: 16px; color: var(--on-dark-muted); }
.route a:hover { color: var(--white); }
.route i { display: grid; place-items: center; flex: none; width: 30px; height: 34px; clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); background: var(--dark-2); font-style: normal; font-family: "Ubuntu"; font-weight: 500; font-size: 12px; color: var(--white); }
.route a:hover i { background: var(--accent); }
.path-hero h1, .path .area-hero h1 { font-size: 56px; }
.path .shelf { padding-block: 64px; }
.station h2 { margin-top: 10px; }
.station .lede { max-width: 760px; margin-bottom: 0; }
@media (max-width: 900px) {
  .ways-in .ways { grid-template-columns: minmax(0, 1fr); }
  .path .area-hero h1 { font-size: 40px; }
  .route { margin-top: 8px; }
}

/* Markers are small hexagons, pointing up like the one of the logo, instead of squares. */
.switch .menu .st i,
.side .group > .name i,
.tag i,
.prose ul li::before,
.side li a i,
.sq i,
.chip i,
.stagegroup h2 i,
.showcase .eyebrow i,
.needs li::before,
.fam .st i,
.card .kind i,
.events li i,
.startcard .kind i {
  clip-path: polygon(50% 0, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);
}