/* transitlab.nyc — "Quiet signage".
   Black type on near-white, hairlines instead of boxes, colour only where it means something. */

:root {
  --color-ground: #FBFBFA;
  --color-surface: #FFFFFF;
  --color-ink: #18181B;
  --color-muted: #6E6E6A;
  --color-faint: #A3A29D;
  --color-rule: #E7E6E2;
  --color-wash: #F2F1EE;
  --color-cobalt: #0039A6;
  --color-cobalt-60: #5C7FC6;
  --color-cobalt-30: #B3C3E6;
  --color-cobalt-10: #E6ECF7;
  --color-sign: #111111;

  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --gutter: 32px;
  --section: 96px;
  --radius: 12px;

  /* Motion: one set of curves and durations for every page (and motion.js reads these too).
     ease-out for things arriving, ease-in-out for things moving across the screen, plain ease for colour. */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-color: ease;
  --dur-press: 140ms;   /* press feedback */
  --dur-hover: 150ms;   /* colour changes */
  --dur-move: 220ms;    /* table rows re-sorting */
  --dur-reveal: 300ms;  /* figures and the map fading in */
  --dur-draw: 900ms;    /* chart marks drawing in, once per page view */
  --stagger: 40ms;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-ink);
  font: 400 16px/26px var(--font-sans);
  font-feature-settings: "ss01" off;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
::selection { background: var(--color-cobalt-10); }

a { color: inherit; text-decoration: underline; text-decoration-color: var(--color-faint); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-color var(--dur-hover) var(--ease-color); }
:focus-visible { outline: 2px solid var(--color-cobalt); outline-offset: 2px; border-radius: 4px; }

.wrap { max-width: calc(1120px + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--color-muted); }
.mono { font-family: var(--font-mono); font-size: 12px; line-height: 18px; letter-spacing: 0; }

/* ---------- Nav ---------- */
.nav {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  margin-top: 16px; height: 52px; padding: 0 8px 0 18px;
  background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius);
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; letter-spacing: -.005em; text-decoration: none; white-space: nowrap; }
.brand::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-ink); }
.nav-links { display: flex; gap: 2px; }
.nav-links a {
  font-size: 14px; line-height: 20px; color: var(--color-muted); text-decoration: none;
  padding: 8px 12px; border-radius: 8px; white-space: nowrap;
  transition: color var(--dur-hover) var(--ease-color), background-color var(--dur-hover) var(--ease-color), transform var(--dur-press) var(--ease-out);
}
.nav-links a[aria-current] { color: var(--color-ink); background: var(--color-wash); }

/* ---------- Hero ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 64px; align-items: end;
  padding: 104px 0 72px;
}
.eyebrow { grid-column: 1 / -1; margin: 0 0 24px; color: var(--color-muted); }
.hero h1 {
  margin: 0; font-weight: 300; font-size: 56px; line-height: 60px; letter-spacing: -.03em;
  text-wrap: balance;
}
.hero p.intro { margin: 0; color: var(--color-muted); max-width: 440px; text-wrap: pretty; }

/* ---------- Figures (stats) ---------- */
.figures {
  display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr));
  border-top: 1px solid var(--color-ink); margin: 0;
}
.figure { padding: 20px 24px 0; border-left: 1px solid var(--color-rule); min-width: 0; }
.figure:first-child { padding-left: 0; border-left: 0; }
.figure b {
  display: block; font-weight: 300; font-size: 40px; line-height: 44px; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.figure b small { font-size: 20px; letter-spacing: -.01em; margin-left: 4px; color: var(--color-muted); }
.figure.is-key b { color: var(--color-cobalt); }
.figure span { display: block; margin-top: 10px; font-size: 14px; line-height: 22px; color: var(--color-muted); max-width: 30ch; text-wrap: pretty; }

/* ---------- Sections ---------- */
.section { margin-top: var(--section); }
.head {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: baseline;
  margin-bottom: 32px;
}
.head h2, .method h2 {
  margin: 0; font-weight: 400; font-size: 28px; line-height: 34px; letter-spacing: -.015em; text-wrap: balance;
}
.head .sub { margin: 0; color: var(--color-muted); max-width: 600px; text-wrap: pretty; }

/* ---------- Charts: ink on paper ---------- */
.chart {
  background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: var(--radius);
  padding: 28px 24px 16px;
}
.chart .plot { width: 100%; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart text { font-family: var(--font-sans); font-size: 11px; fill: var(--color-muted); font-variant-numeric: tabular-nums; }
.chart text.end { font-size: 12px; font-weight: 500; fill: var(--color-ink); paint-order: stroke; stroke: var(--color-surface); stroke-width: 4px; stroke-linejoin: round; }
.chart text.end.quiet { font-weight: 400; fill: var(--color-muted); }
.chart text.end.is-key { fill: var(--color-cobalt); }
.chart .grid { stroke: var(--color-rule); stroke-width: 1; shape-rendering: crispEdges; }
.chart .base { stroke: var(--color-faint); stroke-width: 1; shape-rendering: crispEdges; }

/* ---------- Tables ---------- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: 14px; line-height: 22px; font-variant-numeric: tabular-nums; }
table.fixed { table-layout: fixed; min-width: 880px; }
th, td { padding: 14px 12px; text-align: left; vertical-align: baseline; border-bottom: 1px solid var(--color-rule); }
th:first-child, td:first-child { padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
th {
  padding-top: 0; padding-bottom: 10px; font-size: 12px; line-height: 18px; font-weight: 500; color: var(--color-muted);
  border-bottom-color: var(--color-ink); white-space: nowrap; vertical-align: bottom;
}
td { white-space: nowrap; }
td.num, th.num { text-align: right; }
td.seg { white-space: normal; }
td .muted { color: var(--color-muted); }
th.sort { cursor: pointer; user-select: none; -webkit-user-select: none; transition: color var(--dur-hover) var(--ease-color); }
th.sort.on { color: var(--color-ink); }
th.sort .arrow { display: inline-block; width: 10px; margin-left: 2px; }

/* A quiet in-cell bar, in its own fixed lane left of the number. */
.bar { display: inline-block; position: relative; width: 64px; height: 4px; margin-right: 12px; vertical-align: 3px; background: var(--color-wash); border-radius: 2px; }
td .n { display: inline-block; min-width: 56px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--color-cobalt-30); border-radius: 2px; }

/* Official subway bullets: the only place line colours appear. */
.bullet {
  display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%;
  color: #fff; font: 600 11px/1 var(--font-sans); letter-spacing: -.02em; margin-right: 4px; vertical-align: baseline;
}
.bullet.dark { color: var(--color-ink); }

/* Bus route names: a quiet pill, no colour. */
.pill {
  display: inline-block; min-width: 52px; padding: 0 8px; border: 1px solid var(--color-rule); border-radius: 999px;
  background: var(--color-surface); font-size: 12px; line-height: 20px; font-weight: 500; text-align: center; letter-spacing: .01em;
}

/* Phones: rows of a .stack table become small labelled blocks. */
@media (max-width: 640px) {
  table.stack { table-layout: auto; min-width: 0; }
  .stack colgroup, .stack thead { display: none; }
  .stack, .stack tbody { display: block; }
  .stack tbody { border-top: 1px solid var(--color-ink); }
  .stack tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 16px; padding: 16px 0 18px; border-bottom: 1px solid var(--color-rule); }
  .stack td { padding: 0; border: 0; white-space: normal; text-align: left !important; }
  .stack td.lead { grid-column: 1 / -1; font-size: 16px; line-height: 24px; font-weight: 500; }
  .stack td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; line-height: 18px; color: var(--color-muted); }
  .stack .bar { display: none; }
}

/* ---------- Controls ---------- */
.controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 24px; }
.field, .select {
  height: 36px; font: inherit; font-size: 14px; color: var(--color-ink); background: var(--color-surface);
  border: 1px solid var(--color-rule); border-radius: 999px; padding: 0 16px; transition: border-color var(--dur-hover) var(--ease-color);
}
.field:focus, .select:focus { outline: none; border-color: var(--color-ink); }
.field { width: 240px; }
.field::placeholder { color: var(--color-faint); }
.select {
  appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236E6E6A' stroke-width='1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.segmented { display: inline-flex; padding: 3px; gap: 2px; background: var(--color-wash); border-radius: 999px; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmented span { display: block; padding: 0 14px; height: 30px; line-height: 30px; font-size: 14px; color: var(--color-muted); border-radius: 999px; white-space: nowrap; user-select: none; -webkit-user-select: none;
  transition: color var(--dur-hover) var(--ease-color), background-color var(--dur-hover) var(--ease-color), box-shadow var(--dur-hover) var(--ease-color), transform var(--dur-press) var(--ease-out); }
.segmented input:checked + span { background: var(--color-surface); color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-rule), 0 1px 2px rgba(24, 24, 27, .06); }
.segmented input:focus-visible + span { outline: 2px solid var(--color-cobalt); outline-offset: 1px; }

.toggle { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--color-ink); cursor: pointer; user-select: none; }
.toggle input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none; width: 28px; height: 16px; border-radius: 999px;
  background: var(--color-rule); position: relative; cursor: pointer; transition: background-color var(--dur-hover) var(--ease-color);
}
.toggle input::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .15); transition: transform var(--dur-move) var(--ease-out); }
.toggle input:checked { background: var(--color-ink); }
.toggle input:checked::after { transform: translateX(12px); }

.btn { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--color-ink); color: #fff; font-size: 14px; font-weight: 500; text-decoration: none; border: 1px solid var(--color-ink); transition: transform var(--dur-press) var(--ease-out); }
.btn.outline { background: transparent; color: var(--color-ink); border-color: var(--color-rule); }

/* ---------- MTA sign band (slow zones page, once) ---------- */
.sign {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  background: var(--color-sign); color: #fff; border-radius: 4px; padding: 38px 24px 22px;
}
.sign::before { content: ""; position: absolute; left: 0; right: 0; top: 16px; height: 2px; background: #fff; }
.sign h2 { margin: 0; font-weight: 500; font-size: 28px; line-height: 34px; letter-spacing: -.015em; }
.sign-lines { display: flex; flex-wrap: wrap; gap: 6px; }
.sign-lines .bullet { width: 26px; height: 26px; font-size: 13px; margin: 0; vertical-align: 0; }
.sign + .sub { margin: 20px 0 32px; color: var(--color-muted); max-width: 640px; text-wrap: pretty; }

/* ---------- Latest days ledger ---------- */
.days { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); column-gap: 24px; border-top: 1px solid var(--color-ink); }
.day { padding: 16px 0 18px; border-bottom: 1px solid var(--color-rule); }
.day b { display: block; font-weight: 300; font-size: 28px; line-height: 34px; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.day b small { font-size: 14px; color: var(--color-muted); margin-left: 3px; letter-spacing: 0; }
.day span { display: block; margin-top: 4px; color: var(--color-muted); }

/* ---------- Map ---------- */
.mapframe { position: relative; height: min(72vh, 680px); min-height: 420px; border: 1px solid var(--color-rule); border-radius: var(--radius); overflow: hidden; background: var(--color-surface); }
#map { position: absolute; inset: 0; transition: opacity var(--dur-reveal) var(--ease-out); }
#map.is-loading { opacity: 0; }
.maptools { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; margin: 0 0 16px; }
.key { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 40px; margin-top: 16px; font-size: 12px; line-height: 18px; color: var(--color-muted); }
.key-title { display: block; margin-bottom: 8px; }
.ramp { display: flex; }
.ramp div { width: 48px; }
.ramp i { display: block; height: 8px; }
.ramp div:first-child i { border-radius: 2px 0 0 2px; }
.ramp div:last-child i { border-radius: 0 2px 2px 0; }
.ramp span { display: block; margin-top: 6px; font-variant-numeric: tabular-nums; }
.lane-key { display: inline-flex; align-items: center; gap: 8px; padding-bottom: 24px; }
.lane-key i { display: inline-block; width: 24px; height: 2px; background: var(--color-ink); border-radius: 1px; }
.maplibregl-popup-content { font: 13px/20px var(--font-sans); color: var(--color-ink); padding: 12px 14px; border-radius: 10px; box-shadow: 0 0 0 1px var(--color-rule), 0 8px 24px rgba(24, 24, 27, .08); }
.maplibregl-popup-content b { font-weight: 500; }
.maplibregl-popup-content .pop-title { font-size: 14px; margin-bottom: 4px; }
.maplibregl-popup-close-button { font-size: 16px; padding: 2px 8px; color: var(--color-muted); }
.maplibregl-ctrl-group { border-radius: 8px !important; box-shadow: 0 0 0 1px var(--color-rule) !important; }

/* ---------- Method notes ---------- */
.method { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; }
.method .body { max-width: 640px; }
.method .body > p { margin: 0 0 24px; }
.method ul { list-style: none; margin: 0 0 24px; padding: 0; border-top: 1px solid var(--color-ink); }
.method li { padding: 14px 0 16px; border-bottom: 1px solid var(--color-rule); }
.method li b { display: block; font-size: 13px; line-height: 18px; font-weight: 500; margin-bottom: 4px; }
.method .caveats { margin: 0; font-size: 14px; line-height: 22px; color: var(--color-muted); }

/* ---------- Footer ---------- */
.footer {
  margin-top: var(--section); padding: 24px 0 48px; border-top: 1px solid var(--color-rule);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px;
  font-size: 13px; line-height: 20px; color: var(--color-muted);
}
.footer .brand { color: var(--color-ink); font-size: 13px; align-self: start; }
.footer p { margin: 0; text-wrap: pretty; }

/* ---------- Interaction ---------- */
/* Hover only where there is a real pointer, so a tap doesn't leave a control stuck "hovered". */
@media (hover: hover) and (pointer: fine) {
  a:hover { text-decoration-color: currentColor; }
  .nav-links a:hover { color: var(--color-ink); background: var(--color-wash); }
  th.sort:hover { color: var(--color-ink); }
  .field:hover, .select:hover { border-color: var(--color-faint); }
  .segmented label:hover span { color: var(--color-ink); }
}
/* Press feedback: controls give a little under the finger; links darken their underline. */
a:active { text-decoration-color: currentColor; }
.nav-links a, .btn, .segmented label, th.sort, .toggle { touch-action: manipulation; }
.nav-links a:active, .btn:active, .segmented label:active span { transform: scale(0.97); }

/* Reduced motion: nothing moves; colour changes stay. Chart draw-ins and the table re-sort are skipped in motion.js. */
@media (prefers-reduced-motion: reduce) {
  .nav-links a:active, .btn:active, .segmented label:active span { transform: none; }
  .toggle input::after, #map { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  :root { --section: 80px; }
  .hero, .head, .method, .footer { grid-template-columns: minmax(0, 1fr); }
  .hero { padding: 72px 0 56px; }
  .hero p.intro { margin-top: 24px; max-width: 560px; }
  .head .sub { margin-top: 12px; }
  .method .body { margin-top: 24px; }
  .footer .brand { margin-bottom: 12px; }
  .figure { padding-left: 20px; }
  .figures.pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pairs .figure:nth-child(odd) { padding-left: 0; border-left: 0; }
  .pairs .figure:nth-child(n + 3) { margin-top: 24px; }
}
/* The six section links don't fit beside the brand below this width: brand on top, links three by two. */
@media (max-width: 760px) {
  .nav { height: auto; flex-direction: column; align-items: stretch; gap: 0; padding: 0; }
  .nav > .brand { padding: 14px 16px 12px; }
  .nav-links { border-top: 1px solid var(--color-rule); padding: 4px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
  .nav-links a { padding: 8px 10px; font-size: 13px; text-align: center; }
}
@media (max-width: 640px) {
  :root { --gutter: 16px; --section: 64px; }
  .hero { padding: 48px 0 40px; }
  .eyebrow { margin-bottom: 16px; }
  .hero h1 { font-size: clamp(34px, 10vw, 44px); line-height: 1.08; }
  .figures, .figures.pairs { grid-template-columns: minmax(0, 1fr); }
  .figure, .figure:first-child { padding: 18px 0 18px; border-left: 0; margin: 0 !important; display: grid; grid-template-columns: minmax(0, 1fr); }
  .figure + .figure { border-top: 1px solid var(--color-rule); }
  .figure b { font-size: 36px; line-height: 40px; }
  .figure span { margin-top: 6px; }
  .head { margin-bottom: 24px; }
  .head h2, .method h2 { font-size: 24px; line-height: 30px; }
  .chart { padding: 20px 12px 10px; border-radius: 10px; }
  .sign { padding: 34px 16px 18px; }
  .sign h2 { font-size: 24px; line-height: 30px; }
  .sign-lines .bullet { width: 24px; height: 24px; font-size: 12px; }
  .days { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .mapframe { height: 70vh; min-height: 380px; border-radius: 10px; }
  .field { width: 100%; }
  .controls .select { flex: 1; }
}

/* The nav is a subway sign: black panel, thin white rule near the top, white Helvetica. */
.nav { position: relative; background: #0B0A0A; border-color: #0B0A0A; border-radius: 4px; height: 58px; padding-top: 6px; }
.nav::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1.5px; background: #FFFFFF; }
.nav .nav-links a { color: rgba(255, 255, 255, .72); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 500; }
.nav .nav-links a[aria-current] { color: #FFFFFF; background: rgba(255, 255, 255, .12); }
@media (hover: hover) and (pointer: fine) { .nav .nav-links a:hover { color: #FFFFFF; background: rgba(255, 255, 255, .08); } }
.brand.logo::before { content: none; }
.brand.logo img { display: block; height: 22px; width: auto; }
.footer .brand.logo img { height: 28px; }
@media (max-width: 760px) {
  .nav { height: auto; padding-top: 10px; }
  .nav-links { border-top-color: rgba(255, 255, 255, .14); }
}

/* Homepage mosaic tablet, after the old station name plaques. */
.mosaic { display: block; width: 100%; max-width: 560px; height: auto; justify-self: end; border-radius: 2px; }
@media (max-width: 900px) { .mosaic { justify-self: start; } }

/* ---------- Section landing pages (did-it-work, proposals, try-it, trackers, data) ---------- */
/* Each item: what it is and when on the left, its key number and one line on the right. The whole row is the link. */
.lp-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-ink); }
.lp-list > li { border-bottom: 1px solid var(--color-rule); }
.lp-item { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; padding: 20px 0 28px; text-decoration: none; }
.lp-item .lp-meta { display: block; margin-bottom: 10px; color: var(--color-muted); }
.lp-item h2 { margin: 0; font-weight: 400; font-size: 24px; line-height: 30px; letter-spacing: -.012em; text-wrap: balance; }
.lp-item .lp-num {
  display: block; font-weight: 300; font-size: 40px; line-height: 44px; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--color-cobalt);
  transition: opacity var(--dur-reveal) var(--ease-out);
}
.lp-item .lp-num small { font-size: 20px; letter-spacing: -.01em; margin-left: 4px; color: var(--color-muted); }
.lp-item .lp-num.is-loading { opacity: 0; }
.lp-item .lp-num[hidden] { display: none; }
.lp-item .lp-cap { display: block; margin-top: 6px; font-size: 14px; line-height: 22px; color: var(--color-muted); max-width: 46ch; text-wrap: pretty; }
.lp-item .lp-sum { margin: 16px 0 0; max-width: 560px; text-wrap: pretty; }
.lp-item > div > .lp-sum:first-child { margin-top: 0; }
.lp-item .lp-go { display: inline-block; margin-top: 12px; font-size: 14px; line-height: 22px; color: var(--color-muted); }
.lp-item .arrow { display: inline-block; margin-left: 6px; color: var(--color-faint); transition: transform var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-color); }
.lp-item.is-quiet { padding: 16px 0 18px; }
.lp-item.is-quiet h2 { font-size: 18px; line-height: 26px; }
.lp-item.is-quiet .lp-sum { margin: 0; color: var(--color-muted); font-size: 14px; line-height: 22px; }
.lp-tag { display: inline-block; color: var(--color-muted); border: 1px solid var(--color-rule); border-radius: 999px; padding: 1px 8px; margin-bottom: 8px; }
.lp-code {
  margin: 12px 0 0; padding: 14px 16px; background: var(--color-surface); border: 1px solid var(--color-rule); border-radius: 8px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: 13px; line-height: 20px; color: var(--color-ink);
}
.lp-code code { font: inherit; white-space: pre; user-select: all; -webkit-user-select: all; }
.lp-feeds { list-style: none; margin: 12px 0 0; padding: 0; font-size: 14px; line-height: 22px; }
.lp-feeds li { padding: 4px 0; }
.lp-feeds a { font-family: var(--font-mono); font-size: 13px; }
.lp-feeds span { color: var(--color-muted); }
.lp-plain { padding: 20px 0 28px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; }
.lp-plain h2 { margin: 0; font-weight: 400; font-size: 24px; line-height: 30px; letter-spacing: -.012em; }
.lp-plain p { margin: 0 0 12px; max-width: 560px; text-wrap: pretty; }
.lp-plain p:last-child { margin-bottom: 0; }
.lp-plain .lp-meta { display: block; margin-bottom: 10px; color: var(--color-muted); }
@media (hover: hover) and (pointer: fine) {
  a.lp-item:hover h2 { text-decoration: underline; text-decoration-color: var(--color-faint); text-decoration-thickness: 1px; text-underline-offset: 4px; }
  a.lp-item:hover .lp-go, a.lp-item:hover .arrow { color: var(--color-ink); }
  a.lp-item:hover .arrow { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) { .lp-item .arrow { transition: color var(--dur-hover) var(--ease-color); transform: none !important; } }
@media (max-width: 900px) {
  .lp-item, .lp-plain { grid-template-columns: minmax(0, 1fr); }
  .lp-item h2, .lp-plain h2 { margin-bottom: 16px; }
  .lp-item.is-quiet h2 { margin-bottom: 4px; }
}
@media (max-width: 640px) {
  .lp-item h2, .lp-plain h2 { font-size: 20px; line-height: 26px; }
  .lp-item .lp-num { font-size: 36px; line-height: 40px; }
}

/* Homepage: a "See all" link under each section's name, to its landing page. */
.part .see-all { display: inline-block; margin-top: 12px; font-size: 14px; line-height: 22px; color: var(--color-muted); }
.part .see-all .arrow { margin-left: 4px; }
@media (max-width: 900px) { .part .see-all { margin: -12px 0 24px; } }
@media (hover: hover) and (pointer: fine) { .part .see-all:hover .arrow { color: var(--color-ink); transform: translateX(3px); } }
@media (max-width: 640px) { .lp-code code { white-space: pre-wrap; word-break: break-all; } }