/* ===================================================================
   syme.me v6 — shared design system.
   Used by: index.html (home), about.html, and every generated essay
   page (essays/<name>.html, emitted by essays/sync.js).

   v6 keeps the v5 look — same color tokens in both themes, Crimson
   Pro / Space Mono pairing, amber accent, dot-grid canvas — but the
   site is now multi-page. Navigation is the fixed topbar alone: name
   + Thoughts + About + theme toggle. Each page hard-codes .is-active on
   its own tab (no scroll-spy; there is nothing to spy). The v5 left
   rail, drawer, fast-jump tween, and read-more collapsible are gone.
   =================================================================== */

/* Dark theme (default). Semantic names stay constant across themes so
   the rest of the stylesheet never references a literal color. */
:root {
  --void: #0c0c0e;
  --surface: #141416;
  --raised: #1c1c1f;
  --border: #2a2a2e;
  --dim: #555;
  --dust: #888;
  --chalk: #c8c4bc;
  --light: #e8e4de;
  --amber: #d4a050;
  --amber-low: #b8883e;

  --nav-bg: rgba(12, 12, 14, 0.92);

  --mono: "Space Mono", monospace;
  --serif: "Crimson Pro", Georgia, serif;

  /* Shared header geometry. --ctrl-size is the tap-target size of the
     round theme toggle; --topbar-h is the total fixed-header height
     (top padding + tab body + border) that .page reserves up top so
     nothing hides beneath the bar. Keep the three in sync. */
  --ctrl-size: 40px;
  --topbar-pad-top: 34px;
  --topbar-h: 86px;
}

/* Light theme — warm paper, ink, and a deeper amber for contrast. */
[data-theme="light"] {
  --void: #f4f1ea;
  --surface: #ece8df;
  --raised: #e3ded3;
  --border: #d3ccbe;
  --dim: #9a9384;
  --dust: #6f6859;
  --chalk: #2e2a22;
  --light: #171410;
  --amber: #a06a18;
  --amber-low: #875a14;

  --nav-bg: rgba(244, 241, 234, 0.92);
}

body {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 25.92px;
  overflow-x: hidden;
}

body {
  background: var(--void);
  color: var(--chalk);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ---- GRID CANVAS ----
   Infinite dot lattice behind every page; drawn by assets/theme.js,
   which also phases it against scroll and recolors it on theme change. */
#grid-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ---- UNIVERSAL HEADER (fixed topbar) ----
   Fixed to the top of every page: the link strip on the left (name,
   Thoughts, About) and the theme toggle on the right. Full-width solid
   backdrop with a bottom hairline "shelf"; a backdrop blur fades in
   once scrolled (.is-scrolled, set by assets/theme.js). Because it's
   fixed (out of flow), .page offsets itself by --topbar-h. */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  background: var(--nav-bg);
  border-bottom: 1px solid var(--border);
  transition:
    background-color 0.3s ease,
    backdrop-filter 0.3s ease;
}
.topbar.is-scrolled {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
/* Inner wrapper shares the .page column so the link strip aligns with
   the body text. The strip and toggle sit on the same bottom baseline
   (flex-end); no bottom padding, so the active underline lands exactly
   on the header's own hairline. */
.topbar-inner {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: var(--topbar-pad-top);
  padding-bottom: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

/* ---- THEME TOGGLE (lives in the topbar) ----
   Taken out of the flex flow and pinned to the vertical center of the
   header bar (the tabs sit on the bottom shelf line; the toggle should
   not). right matches the inner column's side padding. */
.theme-toggle {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  width: var(--ctrl-size);
  height: var(--ctrl-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--dust);
  cursor: pointer;
  transition:
    color 0.2s,
    border-color 0.2s;
}
.theme-toggle:hover {
  color: var(--amber);
  border-color: var(--amber);
}
.theme-toggle svg {
  width: 20px;
  height: 20px;
}
/* Show the sun in dark mode (click for light), moon in light mode. */
.icon-sun {
  display: block;
}
.icon-moon {
  display: none;
}
[data-theme="light"] .icon-sun {
  display: none;
}
[data-theme="light"] .icon-moon {
  display: block;
}

/* ---- HEADER LINK STRIP ----
   The name is link 0, then Thoughts and About. Plain quiet links; the
   current page's link carries .is-active in its own markup and wears
   a bold underline sitting on the header's shelf line. A transparent
   bottom border is reserved on every link so activating one never
   nudges its neighbours. */
.tabs {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  gap: 12px;
  /* Keep clear of the absolutely-positioned theme toggle on the right. */
  padding-right: calc(var(--ctrl-size) + 16px);
}
.tab {
  position: relative;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  padding: 16px 4px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-family: var(--mono);
  font-size: 0.611rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.tab:hover {
  color: var(--amber);
}
/* The name link reads as a name, not a label: mixed-case, no tracking,
   allowed to truncate first when the strip runs out of room. */
.tab-name {
  text-transform: none;
  letter-spacing: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tab.is-active {
  color: var(--light);
  border-bottom-color: var(--light);
}

/* ---- PAGE COLUMN ---- */
.page {
  position: relative;
  z-index: 1;
  max-width: 760px;
  margin: 0 auto;
  /* Top padding clears the fixed header (--topbar-h) plus breathing
     room so the page title sits well below the shelf line. */
  padding: calc(var(--topbar-h) + 52px) 24px 120px;
}

/* ---- PAGE HEADER (shared across pages) ----
   Kicker label + descriptive title. The kicker (.page-num) is a small
   amber mono label with a hairline running out to the right — also
   reused mid-page as a group divider (home essay list, About groups). */
.page-head {
  margin-bottom: 36px;
}
.page-num {
  font-family: var(--mono);
  font-size: 0.611rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.page-num::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}
.page-title {
  font-family: var(--serif);
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--light);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.page-lede {
  font-family: var(--serif);
  font-size: 1.02rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--chalk);
}

/* The home page wants a larger header. */
.home .page-title {
  font-size: 2.667rem;
  margin-bottom: 8px;
}
.index-role {
  font-family: var(--mono);
  font-size: 0.722rem;
  color: var(--dust);
  letter-spacing: 0.06em;
  margin-bottom: 24px;
}
.index-abstract {
  font-family: var(--serif);
  font-size: 1.056rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--chalk);
  margin-bottom: 8px;
}
.index-abstract p + p {
  margin-top: 1em;
}

/* ---- ESSAY LIST (home) ----
   The blog front door: one block link per essay, newest first. The
   whole card is the link; the title warms to amber on hover. The list
   markup between the essay-list markers in index.html is generated by
   essays/sync.js from each essay's frontmatter. */
.essay-list {
  margin-top: 56px;
}
.essay-item {
  display: block;
  padding: 26px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
}
.essay-item:first-of-type {
  border-top: 1px solid var(--border);
}
.essay-item-date {
  font-family: var(--mono);
  font-size: 0.583rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 6px;
  transition: color 0.2s ease;
}
.essay-item-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--light);
  line-height: 1.2;
  margin-bottom: 6px;
  transition: color 0.2s ease;
}
.essay-item-desc {
  font-family: var(--serif);
  font-size: 0.97rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--chalk);
}
.essay-item:hover .essay-item-title {
  color: var(--amber);
}
.essay-item:hover .essay-item-date {
  color: var(--amber-low);
}

/* ---- PANEL TABS (About page) ----
   Experiences / Projects sit behind a tab strip that replaces the
   .page-num kickers: same mono/amber label language, sharing one
   hairline shelf that runs out to the right. The active tab wears an
   amber underline on the shelf; a transparent bottom border is
   reserved on every tab so switching never nudges the strip. */
.panel-tabs {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin-top: 88px;
  border-bottom: 1px solid var(--border);
}
.panel-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  padding: 8px 2px;
  font-family: var(--mono);
  font-size: 0.611rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
.panel-tab:hover {
  color: var(--amber);
}
.panel-tab.is-active {
  color: var(--amber);
  border-bottom-color: var(--amber);
}
/* ---- GROUPS (About page) ----
   Experiences / Projects render as labelled groups: a .page-num kicker
   as the divider, a group title, a lede, then stacked sections. */
.group {
  margin-top: 88px;
}
/* Groups living inside the tab system space off the strip instead. */
.group.panel {
  margin-top: 48px;
}
.group-title {
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 300;
  color: var(--light);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.group > .page-lede {
  margin-bottom: 48px;
}

/* ---- SECTION (stacked entries within a group) ---- */
.section {
  margin-bottom: 48px;
}
.section-title {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--light);
  margin-bottom: 16px;
}

/* ---- ENTRY (experience/project body + tags) ---- */
.entry-body {
  font-family: var(--serif);
  font-size: 0.97rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--chalk);
}
.entry-tags {
  margin-top: 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.tag {
  font-family: var(--mono);
  font-size: 0.556rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  border: 1px solid var(--border);
  border-radius: 2px;
  padding: 3px 8px;
}

/* Contact line: the lede's "reach out" made actionable — a quiet mono
   address sitting between the introduction and the OSS footprint. */
.index-contact {
  font-family: var(--mono);
  font-size: 0.722rem;
  letter-spacing: 0.06em;
  color: var(--dust);
  margin-top: 16px;
}
.index-contact a {
  color: inherit;
  text-decoration: none;
}
.index-contact a:hover {
  color: var(--chalk);
}

/* Open-source footprint: sits at the same visual weight as the contact
   line — readable at a glance, warming toward --chalk on hover. A tiny
   uppercase kicker names what the numbers are for readers who don't
   speak GitHub (installs/stars/packages alone read as bare figures). */
.index-oss .oss-label {
  font-size: 0.556rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 5px;
}
.index-oss {
  font-family: var(--mono);
  font-size: 0.722rem;
  letter-spacing: 0.08em;
  color: var(--dust);
  margin-top: 14px;
  transition: color 0.3s ease;
}
.index-oss:hover {
  color: var(--chalk);
}
.index-oss a {
  color: inherit;
  text-decoration: none;
}
.index-oss .oss-github {
  display: inline-block;
  vertical-align: -2px;
  margin-left: 8px;
}
.index-oss .oss-github svg {
  width: 15px;
  height: 15px;
}

/* ---- ESSAY PAGE ----
   Long-form reading typography for the generated essay pages. */
.essay-byline {
  font-family: var(--mono);
  font-size: 0.611rem;
  color: var(--dim);
  letter-spacing: 0.06em;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}
.essay-body p {
  font-family: var(--serif);
  font-size: 1.039rem;
  font-weight: 300;
  line-height: 1.78;
  color: var(--chalk);
  margin-bottom: 1.4em;
}
/* Sources & credits footnote at the end of an essay — a third smaller
   than body prose (1.039rem × 2/3), quieter color to read as an aside. */
.essay-body p.essay-sources {
  font-size: 0.69rem;
  color: var(--dim);
}
/* Drop cap on the opening paragraph only. Child combinator keeps it off
   paragraphs nested inside figures/widgets (e.g. the expanding-circle
   reader panel). */
.essay-body > p:first-of-type::first-letter {
  font-size: 3.1rem;
  line-height: 0.8;
  float: left;
  padding: 0.08em 0.1em 0 0;
  color: var(--amber);
  font-weight: 400;
}
.essay-body em {
  font-style: italic;
}
/* Inline links use the site accent rather than browser blue, with a
   restrained amber underline that warms toward --light on hover. */
.essay-body a {
  color: var(--amber);
  text-decoration: underline;
  text-decoration-color: var(--amber-low);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition:
    color 0.2s ease,
    text-decoration-color 0.2s ease;
}
.essay-body a:hover {
  color: var(--light);
  text-decoration-color: var(--light);
}

/* Footer nav on an essay page: quiet mono links back to the list
   (and prev/next once there is more than one essay). */
.essay-foot {
  margin-top: 56px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--mono);
  font-size: 0.583rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.essay-foot a {
  color: var(--dust);
  text-decoration: none;
  transition: color 0.2s ease;
}
.essay-foot a:hover {
  color: var(--amber);
}

/* ---- MURMURATION FIGURE ----
   Boids simulation that opens "Avoiding Collision". The mount point is
   emitted into the essay body by essays/sync.js (the `::: murmuration`
   directive); the simulation lives in assets/widgets.js. Bird color is
   read from --chalk at runtime, so it tracks the site theme. */
.essay-figure {
  margin: 0 0 1.4em;
}
#murmur-root {
  width: 100%;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--dim);
}
#murmur-wrap {
  position: relative;
  width: 100%;
  height: 360px;
  min-height: 180px;
  resize: vertical;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 2px;
}
#murmur-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
/* Small text toggle that reveals the tuning controls. Temporary, like
   the controls themselves — both come out once the look is locked. */
#murmur-toggle {
  display: inline-block;
  margin-top: 8px;
  padding: 0;
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
  cursor: pointer;
  transition: color 0.2s ease;
}
#murmur-toggle:hover {
  color: var(--amber);
}
#murmur-toggle::before {
  content: "▸ ";
}
#murmur-toggle[aria-expanded="true"]::before {
  content: "▾ ";
}
#murmur-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px 16px;
  padding: 12px 2px 2px;
}
#murmur-controls[hidden] {
  display: none;
}
#murmur-controls label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#murmur-controls .row {
  display: flex;
  justify-content: space-between;
}
#murmur-controls input[type="range"] {
  width: 100%;
  accent-color: var(--amber);
}
#murmur-controls b {
  font-weight: 600;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* ---- EXPANDING CIRCLE FIGURE ----
   Interactive infographic for Singer's expanding circle, emitted into
   the essay body by essays/sync.js (the `::: expanding-circle`
   directive); the widget script lives in assets/widgets.js. Themed to
   match the essay: MONOCHROME rings drawn in --chalk/--dim, with ONLY
   the outer Sentient frontier ring carrying the --amber accent. Layout
   is two-column at desktop (rings left, reader panel right, so the
   description stays visible while hovering) and stacks to a single
   centered column on phones. Scoped to #expanding-circle so nothing
   leaks.
   Source of truth for markup+CSS+JS is expanding-circle.html; keep the
   three in sync. */
.ec-figure {
  display: block;
  width: 100%;
}
#expanding-circle.ec-wrap {
  width: 100%;
  margin: 0;
  font-family: var(--mono);
  color: var(--chalk);
}
#expanding-circle,
#expanding-circle * {
  box-sizing: border-box;
}
#expanding-circle .ec-main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
#expanding-circle .ec-stage {
  width: 100%;
  display: flex;
  justify-content: center;
}
#expanding-circle svg {
  display: block;
  width: 100%;
  max-width: 460px;
  height: auto;
  touch-action: manipulation;
}
/* Base rings: thin, monochrome, dim. */
#expanding-circle .ring {
  stroke: var(--dim);
  stroke-width: 1.5;
  transition: stroke 0.35s ease, stroke-width 0.35s ease, opacity 0.35s ease;
}
#expanding-circle .rings-dim .ring:not(.on) {
  opacity: 0.4;
}
/* Active (hovered/pinned) ring lifts to full chalk. */
#expanding-circle .ring.on {
  stroke: var(--chalk);
  stroke-width: 3.5;
}
/* The one exception: the outer Sentient frontier ring is always amber. */
#expanding-circle .frontier {
  stroke: var(--amber);
  stroke-width: 2.4;
  opacity: 1;
  stroke-dasharray: 6 8;
}
#expanding-circle .rings-dim .frontier:not(.on) {
  opacity: 0.75;
}
#expanding-circle .frontier.on {
  stroke: var(--amber);
  stroke-width: 4;
  filter: drop-shadow(0 0 7px rgba(212, 160, 80, 0.5));
}
#expanding-circle .band {
  cursor: pointer;
}
/* Self disc at the centre: solid chalk, label in the page background. */
#expanding-circle .selfdisc {
  fill: var(--chalk);
  transition: filter 0.35s ease;
}
#expanding-circle .selfdisc.on {
  filter: drop-shadow(0 0 9px rgba(200, 196, 188, 0.45));
}
#expanding-circle #ec-selftext {
  fill: var(--void);
  font-family: var(--mono);
}
/* Halo + marker + pulse: the travelling accent, amber like the frontier. */
#expanding-circle .halo,
#expanding-circle .pulse,
#expanding-circle .marker {
  opacity: 0;
  pointer-events: none;
}
#expanding-circle .halo {
  stroke: var(--chalk);
  stroke-width: 2;
}
#expanding-circle .pulse {
  stroke: var(--chalk);
  stroke-width: 2;
}
#expanding-circle .marker {
  fill: var(--amber);
}
#expanding-circle .halo.show {
  opacity: 0.7;
  animation: ec-spin 9s linear infinite;
}
#expanding-circle .marker.show {
  opacity: 1;
  transition: opacity 0.3s ease;
}
@keyframes ec-spin {
  to {
    transform: rotate(360deg);
  }
}
#expanding-circle .pulse.go {
  animation: ec-pulse 1.1s ease-out;
}
@keyframes ec-pulse {
  0% {
    opacity: 0.45;
    transform: scale(0.6);
  }
  100% {
    opacity: 0;
    transform: scale(1.25);
  }
}
#expanding-circle .halo,
#expanding-circle .pulse {
  transform-origin: 320px 320px;
  transform-box: view-box;
}
/* Reader panel: centered, essay serif, monochrome text. min-height is a
   fallback only — widgets.js measures the tallest step and locks the
   panel's min-height so hover changes never reflow the essay below. */
#expanding-circle .ec-read {
  width: 100%;
  max-width: 34rem;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
#expanding-circle .r-tag {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dust);
  margin: 0 0 6px;
  min-height: 14px;
}
#expanding-circle .r-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.7rem;
  line-height: 1.15;
  margin: 0 0 12px;
  color: var(--light);
}
#expanding-circle .r-desc {
  font-family: var(--serif);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--chalk);
  margin: 0;
}
#expanding-circle .r-desc em {
  font-style: italic;
}
/* The frontier step is the only place text picks up the amber accent. */
#expanding-circle .r-title.frontier-txt,
#expanding-circle .r-tag.frontier-txt {
  color: var(--amber);
}
/* Two-column at desktop: rings on the left, reader panel on the right,
   so the description stays in view while the cursor is up on the rings.
   Below the breakpoint the figure stacks (the mobile default above),
   where tap-to-pin plus natural scrolling already works. */
@media (min-width: 700px) {
  #expanding-circle .ec-main {
    flex-direction: row;
    align-items: center;
    gap: 32px;
  }
  #expanding-circle .ec-stage {
    flex: 0 0 340px;
  }
  #expanding-circle svg {
    max-width: 340px;
  }
  #expanding-circle .ec-read {
    flex: 1;
    min-width: 0;
    text-align: left;
  }
  #expanding-circle .r-title {
    font-size: 1.4rem;
  }
  #expanding-circle .r-desc {
    font-size: 0.8rem;
  }
}
#expanding-circle .anim .r-tag,
#expanding-circle .anim .r-title,
#expanding-circle .anim .r-desc {
  animation: ec-rise 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
#expanding-circle .anim .r-tag {
  animation-delay: 0.03s;
}
#expanding-circle .anim .r-title {
  animation-delay: 0.06s;
}
#expanding-circle .anim .r-desc {
  animation-delay: 0.1s;
}
@keyframes ec-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- FOOTER ---- */
.footer-rule {
  height: 1px;
  background: var(--border);
  margin: 88px 0 20px;
}
footer {
  font-family: var(--mono);
  font-size: 0.611rem;
  color: var(--dim);
  letter-spacing: 0.04em;
}
footer a {
  color: var(--dust);
  text-decoration: none;
}
footer a:hover {
  color: var(--amber);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 640px) {
  html {
    font-size: 16px;
  }
  :root {
    /* Tighter header on phones: less top room and shorter tab bodies,
       so the reserved header height shrinks to match. */
    --topbar-pad-top: 20px;
    --topbar-h: 66px;
  }
  .home .page-title {
    font-size: 1.875rem;
  }
  .page-title {
    font-size: 1.75rem;
  }
  .topbar-inner {
    padding-left: 16px;
    padding-right: 16px;
  }
  .theme-toggle {
    right: 16px;
  }
  /* Shorter tab bodies on phones; padding-bottom stays 0 so tabs keep
     sitting on the shelf line. */
  .tab {
    padding: 11px 12px;
  }
  .page {
    padding: calc(var(--topbar-h) + 36px) 16px 80px;
  }
}