/* /threads, /labs and their pages (.lx). /start (.st) follows below. */
.lx { max-width: 960px; margin: 0 auto; padding: 120px 0 80px; }
.lx a { color: var(--page-text); }
.lx-kicker { margin: 0 0 14px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--page-muted); }
.lx-kicker a { color: var(--page-muted); }
.lx-h1 { margin: 0; font-family: ui-serif, Georgia, serif; font-style: italic; font-weight: 900; font-size: clamp(44px, 7vw, 84px); line-height: .95; letter-spacing: -.04em; }
.lx-dek { margin: 18px 0 0; max-width: 680px; font-family: var(--mono); font-size: 15px; line-height: 1.7; color: var(--page-muted); }
.lx-stats { margin: 32px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; }
.lx-stats div { padding-top: 10px; border-top: 1px solid var(--page-text); }
.lx-stats dt { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--page-muted); }
.lx-stats dd { margin: 4px 0 0; font-family: ui-serif, Georgia, serif; font-style: italic; font-weight: 900; font-size: 30px; letter-spacing: -.03em; }
.lx-chart { margin: 28px 0 0; }
.lx-bars { display: block; width: 100%; height: 64px; }
.lx-bars-axis { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--page-muted); }
.lx-h2 { margin: 56px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--page-text); font-family: ui-serif, Georgia, serif; font-style: italic; font-weight: 900; font-size: 28px; letter-spacing: -.03em; }
.lx-note { margin: 10px 0 0; font-size: 12px; color: var(--page-muted); }
.lx-month { margin-top: 26px; }
.lx-month-h { margin: 0 0 4px; display: flex; align-items: baseline; gap: 10px; font-size: 15px; font-weight: 700; }
.lx-month-h small { font-size: 11px; font-weight: 400; color: var(--page-muted); }
.lx-stories { list-style: none; margin: 0; padding: 0; }
.lx-story { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.lx-story time { font-size: 12px; color: var(--page-muted); padding-top: 2px; }
.lx-story-t { font-size: 16px; font-weight: 700; line-height: 1.35; text-decoration: none; }
.lx-story-t:hover { text-decoration: underline; text-underline-offset: 3px; }
.lx-story p { margin: 6px 0 0; font-size: 14px; line-height: 1.6; opacity: .85; }
.lx-story .lx-story-m { font-size: 11px; color: var(--page-muted); opacity: 1; }
.lx-story-m a { color: var(--page-muted); }
.lx-chip { display: inline-flex; align-items: center; gap: 5px; text-decoration: none; }
.lx-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.lx-now .lx-story { border-left: 3px solid var(--c, var(--page-text)); padding-left: 14px; }
.lx-labs, .lx-threads { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lx-labs a, .lx-threads a { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: 14px; transition: border-color .2s; }
.lx-labs a:hover, .lx-threads a:hover { border-color: var(--page-text); }
.lx-labs span, .lx-threads span { font-size: 11px; color: var(--page-muted); }
.lx-threads i { width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.lx-guides { list-style: none; margin: 0; padding: 0; }
.lx-guides li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 600; }
.lx-guides span { flex-shrink: 0; font-size: 11px; font-weight: 400; color: var(--page-muted); }
.lx-tools, .lx-builds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.lx-tools a, .lx-builds a { display: grid; gap: 5px; height: 100%; box-sizing: border-box; padding: 16px; border: 1px solid var(--line); border-radius: 4px; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.lx-tools a:hover, .lx-builds a:hover { transform: translate(-2px, -2px); border-color: var(--page-text); box-shadow: 4px 4px 0 var(--page-text); }
.lx-tools b, .lx-builds b { font-size: 15px; line-height: 1.35; }
.lx-tools span, .lx-builds span { font-size: 13px; line-height: 1.55; opacity: .8; }
.lx-tools .mono { font-size: 11px; color: var(--page-muted); opacity: 1; }
.lx-index { list-style: none; margin: 40px 0 0; padding: 0; }
.lx-index a { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 8px 32px; padding: 22px 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.lx-index-h { display: grid; gap: 4px; }
.lx-index-h b { display: inline-flex; align-items: center; gap: 10px; font-family: ui-serif, Georgia, serif; font-style: italic; font-weight: 900; font-size: 26px; letter-spacing: -.03em; }
.lx-index-h i { flex-shrink: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.lx-index-h .mono { font-size: 11px; color: var(--page-muted); }
.lx-index-d { grid-column: 1; font-size: 14px; line-height: 1.6; opacity: .8; }
.lx-index-c { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.lx-index a:hover b { text-decoration: underline; text-underline-offset: 4px; }
.lx-foot { margin-top: 48px; display: flex; gap: 24px; flex-wrap: wrap; font-size: 12px; }
@media (max-width: 720px) {
  .lx { padding: 96px 0 56px; }
  .lx-stats { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  .lx-story { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .lx-index a { grid-template-columns: minmax(0, 1fr); }
  .lx-index-c { grid-column: 1; grid-row: auto; }
  .lx-guides li { flex-direction: column; gap: 4px; }
}

/* ---- /start ---- */
.st { position: relative; max-width: 1100px; margin: 0 auto; padding: 0 0 80px; }
.st a { color: var(--page-text); }
/* The rail: five numbered stops down the left edge, filling as you scroll. */
.st-rail { position: fixed; left: max(16px, calc(50vw - 660px)); top: 50%; transform: translateY(-50%); z-index: 5; display: grid; gap: 18px; padding-left: 14px; }
.st-rail::before, .st-rail-fill { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--line); }
.st-rail-fill { background: var(--page-text); transform-origin: top; transform: scaleY(0); }
.st-rail a { display: grid; text-decoration: none; color: var(--page-muted); transition: color .2s; }
.st-rail b { font-family: ui-serif, Georgia, serif; font-style: italic; font-weight: 900; font-size: 18px; line-height: 1; }
.st-rail span { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; opacity: 0; transform: translateX(-4px); transition: opacity .2s, transform .2s; }
.st-rail a.on, .st-rail a.past { color: var(--page-text); }
.st-rail a.on span, .st-rail:hover span { opacity: 1; transform: none; }
@media (max-width: 1240px) { .st-rail { display: none; } }

/* 01 The hero: a full-bleed field of dots behind the copy. */
.st-hero { position: relative; min-height: min(92vh, 860px); display: flex; align-items: center; padding: 110px 0 40px; }
.st-field { position: absolute; inset: 0 calc(50% - 50vw); width: 100vw; height: 100%; pointer-events: none; }
.st-hero-copy { position: relative; z-index: 1; max-width: 470px; }
.st-kicker { margin: 0 0 18px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--page-muted); }
.st-h1 { margin: 0; font-family: ui-serif, Georgia, serif; font-style: italic; font-weight: 900; font-size: clamp(76px, 13vw, 168px); line-height: .82; letter-spacing: -.055em; }
.st-h1 span { color: #e4572e; }
.st-lede { margin: 28px 0 0; font-size: 17px; line-height: 1.65; }
.st-lede b { font-weight: 800; }
.st-hint { margin: 22px 0 0; font-size: 12px; color: var(--page-muted); }

/* Sections */
.st-sec, .st-end { position: relative; margin-top: 110px; }
.st-sec.pre, .st-end.pre { opacity: 0; transform: translateY(28px); }
.st-sec.in, .st-end.in { opacity: 1; transform: none; transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.st-num { margin: 0; font-size: 12px; letter-spacing: .1em; color: var(--page-muted); }
.st-h2 { margin: 6px 0 0; font-family: ui-serif, Georgia, serif; font-style: italic; font-weight: 900; font-size: clamp(40px, 6vw, 72px); line-height: .95; letter-spacing: -.045em; }
.st-p { margin: 16px 0 28px; max-width: 620px; font-family: var(--mono); font-size: 14px; line-height: 1.75; color: var(--page-muted); }

.st-threads { list-style: none; margin: 22px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.st-threads a { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; font-size: 14px; transition: border-color .2s, background .2s; }
.st-threads a:hover { border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); }
.st-threads i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.st-threads span { font-size: 11px; color: var(--page-muted); }

/* 03 The orbit: three rings, each planet spinning on its ring and
   counter-spinning so its label stays upright. Pauses on hover. */
/* --R is the outer ring's radius; rings 1-3 sit at R/3, 2R/3 and R, and
   the box leaves room for the largest planet (100px) on the outer one. */
.ob { position: relative; width: min(100%, calc(var(--R) * 2 + 110px)); aspect-ratio: 1; margin: 0 auto; --R: min(40vw, 300px); }
.ob::before, .ob::after { content: ""; position: absolute; left: 50%; top: 50%; border: 1px dashed var(--line); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.ob::before { width: calc(var(--R) * 4 / 3); height: calc(var(--R) * 4 / 3); }
.ob-ring { position: absolute; left: 50%; top: 50%; width: calc(var(--R) * 2 / 3); height: calc(var(--R) * 2 / 3); border: 1px dashed var(--line); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.ob::after { width: calc(var(--R) * 2); height: calc(var(--R) * 2); }
.ob-core { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; display: grid; place-items: center; background: var(--page-text); color: var(--page-bg); font-family: ui-serif, Georgia, serif; font-style: italic; font-weight: 900; font-size: 30px; box-shadow: 0 0 0 10px color-mix(in srgb, var(--page-text) 8%, transparent), 0 0 0 22px color-mix(in srgb, var(--page-text) 4%, transparent); }
.ob-p { position: absolute; left: 50%; top: 50%; width: 0; height: 0; text-decoration: none; animation: ob-spin var(--d) linear infinite; transform: rotate(var(--a)); --dist: calc(var(--R) * var(--r) / 3); }
.ob:hover .ob-p, .ob:focus-within .ob-p, .ob:hover .ob-b, .ob:focus-within .ob-b { animation-play-state: paused; }
.ob-b { position: absolute; left: calc(var(--dist) - var(--s) / 2); top: calc(var(--s) / -2); width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-content: center; text-align: center; gap: 1px; border: 1.5px solid var(--page-text); background: var(--page-bg); animation: ob-counter var(--d) linear infinite; transition: background .2s, color .2s; }
.ob-b b { font-size: 12px; line-height: 1.1; }
.ob-b small { font-size: 10px; color: var(--page-muted); }
.ob-p:hover .ob-b, .ob-p:focus-visible .ob-b { background: var(--page-text); color: var(--page-bg); }
.ob-p:hover .ob-b small { color: var(--page-bg); }
.ob-tip { position: absolute; left: var(--dist); top: calc(var(--s) / 2 + 8px); width: 230px; margin-left: -115px; padding: 10px 12px; border: 1px solid var(--page-text); background: var(--page-bg); font-size: 13px; font-weight: 600; line-height: 1.4; opacity: 0; pointer-events: none; transform: translateY(-4px); transition: opacity .2s, transform .2s; z-index: 3; animation: ob-counter var(--d) linear infinite; }
.ob-tip span { display: block; margin-bottom: 4px; font-size: 10px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; color: var(--page-muted); }
.ob-p:hover .ob-tip, .ob-p:focus-visible .ob-tip { opacity: 1; transform: none; }
.ob:hover .ob-tip { animation-play-state: paused; }
.ob-p:hover { z-index: 4; }
@keyframes ob-spin { from { transform: rotate(var(--a)); } to { transform: rotate(calc(var(--a) + 360deg)); } }
@keyframes ob-counter { from { transform: rotate(calc(var(--a) * -1)); } to { transform: rotate(calc(var(--a) * -1 - 360deg)); } }
.st-labs-list { display: none; }
@media (max-width: 720px) {
  .ob { display: none; }
  .st-labs-list { display: grid; list-style: none; margin: 0; padding: 0; }
  .st-labs-list a { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); text-decoration: none; font-size: 16px; }
  .st-labs-list span { font-size: 12px; color: var(--page-muted); }
}

/* 04 The starter kit: six cards, each a job and its pick. */
.st-kit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; counter-reset: kit; }
.st-kit a { position: relative; display: grid; gap: 8px; height: 100%; box-sizing: border-box; padding: 22px 20px 18px; border: 1.5px solid var(--page-text); border-radius: 6px; text-decoration: none; background: var(--page-bg); transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s; }
.st-kit a:hover { transform: translate(-3px, -3px); box-shadow: 6px 6px 0 var(--page-text); }
.st-kit-job { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--page-muted); }
.st-kit b { font-family: ui-serif, Georgia, serif; font-style: italic; font-weight: 900; font-size: 30px; line-height: 1; letter-spacing: -.03em; }
.st-kit-tag { font-size: 14px; line-height: 1.55; opacity: .8; }
.st-kit-more { margin-top: auto; padding-top: 8px; font-size: 11px; color: var(--page-muted); }
.st-sec.pre .st-kit li { opacity: 0; transform: translateY(16px) rotate(-1deg); }
.st-sec.in .st-kit li { opacity: 1; transform: none; transition: opacity .5s, transform .6s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(.2s + var(--i, 0) * 90ms); }

/* 05 Word cards that turn over. */
.st-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; }
.st-card { all: unset; box-sizing: border-box; position: relative; display: block; width: 100%; height: 170px; cursor: pointer; perspective: 900px; }
.st-card-f, .st-card-b { position: absolute; inset: 0; box-sizing: border-box; padding: 18px; border: 1px solid var(--page-text); border-radius: 6px; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform .6s cubic-bezier(.3, .7, .2, 1); }
.st-card-f { display: flex; flex-direction: column; justify-content: space-between; background: var(--page-bg); }
.st-card-f .mono { font-size: 11px; color: var(--page-muted); }
.st-card-f b { font-family: ui-serif, Georgia, serif; font-style: italic; font-weight: 900; font-size: 26px; line-height: 1.05; letter-spacing: -.03em; }
.st-card-b { background: var(--page-text); color: var(--page-bg); font-size: 14px; line-height: 1.55; transform: rotateY(180deg); display: flex; align-items: center; }
.st-card[aria-pressed="true"] .st-card-f { transform: rotateY(-180deg); }
.st-card[aria-pressed="true"] .st-card-b { transform: rotateY(0); }
.st-card:focus-visible .st-card-f { outline: 2px solid var(--page-text); outline-offset: 3px; }
@media (hover: hover) { .st-card:hover .st-card-f { transform: rotateY(-12deg); } .st-card[aria-pressed="true"]:hover .st-card-f { transform: rotateY(-180deg); } }

/* The end */
.st-end { padding: 48px 0 0; border-top: 1px solid var(--page-text); }
.st-end .st-p a { color: var(--page-text); }
.st-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.st-btn { display: inline-block; padding: 14px 22px; border-radius: 999px; background: var(--btn-bg); color: var(--btn-text) !important; font-family: var(--mono); font-size: 13px; text-decoration: none; transition: transform .2s; }
.st-btn:hover { transform: translateY(-2px); }
.st-btn-2 { background: transparent; color: var(--page-text) !important; border: 1px solid var(--page-text); }

@media (max-width: 720px) {
  .st-hero { min-height: 0; padding: 96px 0 24px; flex-direction: column; align-items: stretch; }
  .st-field { position: relative; inset: auto; order: 2; height: 470px; margin: 16px calc(50% - 50vw) 0; }
  .st-lede { font-size: 16px; }
  .st-sec, .st-end { margin-top: 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .ob-p, .ob-b, .ob-tip { animation: none; }
  .st-sec.pre, .st-end.pre, .st-sec.pre .st-kit li { opacity: 1; transform: none; }
  .st-card-f, .st-card-b { transition: none; }
}

/* ---- /start, second pass: a shape for every section ---- */
/* Captured once so a band can swap ink and paper without a cycle. */
.st { --st-ink: var(--page-text); --st-paper: var(--page-bg); }

/* Section heads: a giant outlined numeral behind the title. */
.st-head { position: relative; padding-top: 40px; }
.st-big { position: absolute; left: -12px; top: -46px; z-index: -1; font-family: ui-serif, Georgia, serif; font-style: italic; font-weight: 900; font-size: clamp(150px, 20vw, 260px); line-height: 1; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--page-text) 16%, transparent); pointer-events: none; user-select: none; }
.st-sec.pre .st-big { transform: translateY(30px); opacity: 0; }
.st-sec.in .st-big { transform: none; opacity: 1; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1), opacity .9s; }


/* 03 A full-bleed band in reverse: the orbit sits in its own space. */
.st-band { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 90px 0 100px; background: var(--st-ink); color: var(--st-paper);
  --page-text: var(--st-paper); --page-bg: var(--st-ink); --page-muted: color-mix(in srgb, var(--st-paper) 62%, var(--st-ink)); --line: color-mix(in srgb, var(--st-paper) 16%, transparent); }
.st-band-in { max-width: 1100px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }
.st-band .st-h2, .st-band a { color: var(--st-paper); }
.st-band .ob-core { background: var(--st-paper); color: var(--st-ink); }
/* A few stars, for the space it is pretending to be. */
.st-band { background-image: radial-gradient(1px 1px at 12% 22%, color-mix(in srgb, var(--st-paper) 50%, transparent), transparent), radial-gradient(1px 1px at 78% 14%, color-mix(in srgb, var(--st-paper) 40%, transparent), transparent), radial-gradient(1.5px 1.5px at 64% 82%, color-mix(in srgb, var(--st-paper) 45%, transparent), transparent), radial-gradient(1px 1px at 30% 70%, color-mix(in srgb, var(--st-paper) 35%, transparent), transparent), radial-gradient(1px 1px at 90% 56%, color-mix(in srgb, var(--st-paper) 40%, transparent), transparent); }

/* The constellation: storylines as points on the edge, lines drawn on hover. */
.ob-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
.ob-lines path { fill: none; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ob-draw .5s cubic-bezier(.4, 0, .2, 1) forwards; }
@keyframes ob-draw { to { stroke-dashoffset: 0; } }
.ob-t { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--ta)) translateX(calc(var(--R) + 28px)) rotate(calc(var(--ta) * -1)); z-index: 1; }
.ob-t i { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 3px var(--page-bg); transition: transform .25s; }
.ob-t em { position: absolute; left: 12px; top: -8px; white-space: nowrap; font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 700; color: var(--c); opacity: 0; transition: opacity .25s; }
.ob.wired .ob-t.lit i { transform: scale(1.6); }
.ob.wired .ob-t.lit em { opacity: 1; }
.ob.wired .ob-t:not(.lit) { opacity: .25; }
.ob .ob-p { z-index: 2; }

/* 04 Split: the heading holds while the kit goes by beside it. */
.st-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.st-split-head { position: sticky; top: 110px; }
.st-split .st-kit { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); padding-top: 40px; }
@media (max-width: 900px) { .st-split { grid-template-columns: minmax(0, 1fr); gap: 0; } .st-split-head { position: static; } .st-split .st-kit { padding-top: 0; } }

/* The end: a full-bleed band with the day's headlines running across it. */
.st-end { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding: 0 0 90px; border-top: 0; background: var(--st-ink); color: var(--st-paper);
  --page-text: var(--st-paper); --page-bg: var(--st-ink); --page-muted: color-mix(in srgb, var(--st-paper) 62%, var(--st-ink)); --btn-bg: var(--st-paper); --btn-text: var(--st-ink); }
.st-ticker { overflow: hidden; border-bottom: 1px solid color-mix(in srgb, var(--st-paper) 18%, transparent); padding: 16px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.st-ticker-run { display: inline-flex; gap: 22px; white-space: nowrap; animation: st-tick 70s linear infinite; font-family: ui-serif, Georgia, serif; font-style: italic; font-weight: 700; font-size: 22px; }
.st-ticker-run i { font-style: normal; font-size: 10px; align-self: center; color: #e4572e; }
.st-ticker:hover .st-ticker-run { animation-play-state: paused; }
@keyframes st-tick { to { transform: translateX(-50%); } }
.st-end-in { max-width: 1100px; margin: 0 auto; padding: 70px 16px 0; box-sizing: border-box; }
.st-end-h { margin: 6px 0 0; font-family: ui-serif, Georgia, serif; font-style: italic; font-weight: 900; font-size: clamp(64px, 11vw, 150px); line-height: .9; letter-spacing: -.055em; }
.st-end .st-p a { color: var(--st-paper); }
.st-end .st-btn { padding: 18px 28px; font-size: 15px; }
.st-end .st-btn-2 { border-color: var(--st-paper); color: var(--st-paper) !important; }

/* The page's thread: one line, in the storylines' colours, drawn as you go. */
.st { overflow: visible; }
.st-thread { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: -1; overflow: visible; }
.st-thread-path { fill: none; stroke: url(#st-grad); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .55; }
@media (max-width: 900px) { .st-thread { display: none; } }

@media (max-width: 720px) {
  .st-big { top: -24px; font-size: 120px; }
  .st-band { padding: 64px 0 72px; }
  .st-ticker-run { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-ticker-run { animation: none; }
  .ob-lines path { animation: none; stroke-dashoffset: 0; }
  .st-sec.pre .st-big { transform: none; opacity: 1; }
}

/* .app clips at 1340px on every page; /start's bands run edge to edge, so
   let them through here (html still clips any sideways overflow). */
body:has(.st) .app { overflow: visible; }
/* The planet under the pointer, and its tooltip, sit above its neighbours. */
.ob .ob-p:hover, .ob .ob-p:focus-visible { z-index: 6; }
/* The end band is the page's last word: no padding after it. */
.st:has(.st-end) { padding-bottom: 0; }
body:has(.st) main.page { padding-bottom: 0; }

/* ---- 02 The storyline explorer ---- */
.sl { margin-top: 8px; }
.sl-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.sl-tab { all: unset; box-sizing: border-box; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border: 1px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 14px; color: var(--page-text); transition: border-color .2s, background .2s, transform .2s; }
.sl-tab:hover { border-color: var(--c); transform: translateY(-1px); }
.sl-tab i { width: 10px; height: 10px; border-radius: 50%; background: var(--c); flex-shrink: 0; }
.sl-tab b { font-weight: 700; white-space: nowrap; }
.sl-tab span { font-size: 11px; color: var(--page-muted); }
.sl-tab.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 14%, transparent); }
.sl-tab:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
/* The autoplay timer: a bar filling along the bottom of the active tab. */
.sl-prog { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--c); transform-origin: left; transform: scaleX(0); }
.sl.auto .sl-tab.on .sl-prog { animation: sl-fill var(--dur, 7s) linear forwards; }
@keyframes sl-fill { to { transform: scaleX(1); } }

.sl-panels { position: relative; }
.sl.js .sl-panel:not(.on) { display: none; }
.sl-panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding: 34px; border: 1px solid var(--line); border-top: 4px solid var(--c); border-radius: 8px; background: color-mix(in srgb, var(--c) 4%, var(--page-bg)); }
.sl.js .sl-panel { margin: 0; }
.sl:not(.js) .sl-panel + .sl-panel { margin-top: 16px; }
.sl-kick { margin: 0; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--c); font-weight: 700; }
.sl-name { margin: 8px 0 0; font-family: ui-serif, Georgia, serif; font-style: italic; font-weight: 900; font-size: clamp(34px, 4.4vw, 54px); line-height: .98; letter-spacing: -.04em; }
.sl-dek { margin: 14px 0 0; font-size: 15px; line-height: 1.6; opacity: .85; }
.sl-stats { margin: 24px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.sl-stats div { padding-top: 8px; border-top: 1px solid color-mix(in srgb, var(--c) 45%, var(--line)); }
.sl-stats dt { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--page-muted); }
.sl-stats dd { margin: 3px 0 0; font-family: ui-serif, Georgia, serif; font-style: italic; font-weight: 900; font-size: 26px; letter-spacing: -.03em; }
.sl-labs { margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sl-labs .mono { width: 100%; margin-bottom: 2px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--page-muted); }
.sl-labs a { padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; text-decoration: none; color: var(--page-text); transition: border-color .2s; }
.sl-labs a:hover { border-color: var(--c); }
.sl-labs a i { font-style: normal; font-size: 11px; color: var(--page-muted); }

.sl-chart { display: block; width: 100%; height: auto; overflow: visible; }
.sl-grid line { stroke: var(--line); stroke-width: 1; }
.sl-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sl-peak line { stroke: var(--c); stroke-width: 1; stroke-dasharray: 3 4; }
.sl-peak circle { fill: var(--c); stroke: var(--page-bg); stroke-width: 3; }
.sl-peak text { font-family: var(--mono); font-size: 12px; font-weight: 700; fill: var(--c); }
.sl-ticks text { font-family: var(--mono); font-size: 11px; fill: var(--page-muted); }
/* On every switch the chart draws in from the left and the peak pops. */
.sl-panel.on .sl-reveal { animation: sl-reveal 1.1s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes sl-reveal { from { width: 0; } }
.sl-panel.on .sl-peak { animation: sl-pop .5s cubic-bezier(.34, 1.56, .64, 1) .9s both; transform-box: fill-box; }
@keyframes sl-pop { from { opacity: 0; transform: translateY(6px); } }
.sl-panel.on .sl-main > *, .sl-panel.on .sl-arc li { animation: sl-in .5s cubic-bezier(.2, .7, .2, 1) both; }
.sl-panel.on .sl-main > :nth-child(2) { animation-delay: 60ms; } .sl-panel.on .sl-main > :nth-child(3) { animation-delay: 120ms; } .sl-panel.on .sl-main > :nth-child(4) { animation-delay: 180ms; } .sl-panel.on .sl-main > :nth-child(5) { animation-delay: 240ms; }
.sl-panel.on .sl-arc li:nth-child(1) { animation-delay: .35s; } .sl-panel.on .sl-arc li:nth-child(2) { animation-delay: .5s; } .sl-panel.on .sl-arc li:nth-child(3) { animation-delay: .65s; }
@keyframes sl-in { from { opacity: 0; transform: translateY(10px); } }

/* The arc: three headlines on a line in the storyline's colour. */
.sl-arc { list-style: none; margin: 22px 0 0; padding: 0 0 0 22px; position: relative; display: grid; gap: 16px; }
.sl-arc::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--c), color-mix(in srgb, var(--c) 30%, transparent)); }
.sl-arc li { position: relative; display: grid; gap: 3px; }
.sl-arc li::before { content: ""; position: absolute; left: -22px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--page-bg); border: 2px solid var(--c); box-sizing: border-box; }
.sl-arc li:last-child::before { background: var(--c); box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 22%, transparent); }
.sl-arc-h { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--c); font-weight: 700; }
.sl-arc a { font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--page-text); text-decoration: none; }
.sl-arc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sl-arc .mono { font-size: 11px; color: var(--page-muted); }
.sl-go { display: inline-block; margin-top: 22px; padding: 12px 20px; border-radius: 999px; background: var(--c); color: #fff !important; font-family: var(--mono); font-size: 13px; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.sl-go:hover { transform: translateY(-2px); box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 35%, transparent); }

/* Phones: tabs swipe as one row, the panel is a single column. */
@media (max-width: 760px) {
  .sl-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 0 -16px 14px; padding: 2px 16px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .sl-tabs::-webkit-scrollbar { display: none; }
  .sl-tab { flex-shrink: 0; scroll-snap-align: start; padding: 9px 14px; font-size: 13px; }
  .sl-panel { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 22px 18px; }
  .sl-name { font-size: 34px; }
  .sl-stats dd { font-size: 22px; }
  .sl-go { display: block; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .sl-panel.on .sl-reveal, .sl-panel.on .sl-peak, .sl-panel.on .sl-main > *, .sl-panel.on .sl-arc li { animation: none; }
}
/* Phones: styles.css gives every link a 44px tap height, which turned the
   lab chips into ovals; 34px with inline-flex keeps them pills. The chart
   scales to half its drawn width, so its type is set larger to land at
   about 11px on screen. */
@media (max-width: 760px) {
  .sl-labs a { display: inline-flex; align-items: center; min-height: 34px !important; padding: 0 12px; box-sizing: border-box; }
  .sl-ticks text { font-size: 20px; }
  .sl-peak text { font-size: 22px; }
  .sl-line { stroke-width: 5; }
  .sl-peak circle { r: 9; }
  .sl-arc a { font-size: 15px; }
}
@media (max-width: 760px) {
  .sl-go { min-height: 0 !important; padding: 14px 20px; line-height: 1.2; }
  .sl-labs a { gap: 5px; }
}
/* "Point at one" only means something where there is an orbit to point at. */
.st-touch { display: none; }
@media (max-width: 720px) { .st-point { display: none; } .st-touch { display: inline; } }
@media (max-width: 720px) {
  .st-cta { flex-direction: column; }
  .st-end .st-btn, .st-btn { min-height: 0 !important; line-height: 1.2; padding: 16px 20px; text-align: center; }
  /* Twelve cards two to a row, not a dozen screens of one. */
  .st-cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .st-card { height: 132px; }
  .st-card-f, .st-card-b { padding: 14px; }
  .st-card-f b { font-size: 20px; }
  .st-card-b { font-size: 12.5px; line-height: 1.45; align-items: flex-start; overflow: auto; }
}
/* Measured: the longest definition needs 155px at 360-390px wide. */
@media (max-width: 720px) { .st-card { height: 160px; } .st-card-b { overflow: visible; } }