/* ============================================================
   Axis Co. — site styles
   One ground, one accent, three faces: Instrument Serif for the
   thesis and section leads, Geist for reading, Geist Mono for
   labels and the things a machine would read.

   The ground is a 24px grid that scrolls with the page. Every rule
   the page draws sits on one of its lines: the sidebar, the column,
   and the gutters are multiples of 24px, and the few remaining rules
   are snapped to the grid by site.js (data-snap).
   ============================================================ */

:root {
  --bg: #e3e3de;
  --paper: #ebeae5;
  --ink: #161614;
  --ink-2: #4a4a45;
  --mute: #62625b;
  --faint: #9a9a93;
  --grid: rgba(22, 22, 20, 0.05);
  --accent: #d4674a;
  --accent-ink: #a4431f;
  --panel: #161614;
  --panel-text: #e9e9e3;
  --panel-mute: rgba(233, 233, 227, 0.56);
  --cell: 24px;
  --sidebar: 312px; /* 13 cells */
  --pad: 48px; /* 2 cells */
  --radius: 10px;
  --ease: cubic-bezier(0.16, 0.84, 0.3, 1);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
}

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

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  background-color: var(--bg);
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  min-height: 100%;
  text-wrap: pretty; /* no single word alone on a last line */
}
html.grid-hidden body {
  background-image: none;
}

a {
  color: inherit;
}
img,
svg,
canvas {
  display: block;
  max-width: 100%;
}
::selection {
  background: var(--accent);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
strong {
  font-weight: 500;
  color: var(--ink);
}

/* ===== loading screen =====
   The wordmark rises in on ink, holds, then the screen lifts away.
   Pure CSS, once per tab session (see the inline script in <head>). */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--panel);
  animation: loader-out 0.6s var(--ease) 1.3s forwards;
}
.loader-mark {
  display: flex;
  align-items: baseline;
  gap: 0.2em;
  padding: 0 0.1em;
  font-size: clamp(64px, 13vw, 176px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--panel-text);
}
.loader-mark .ax,
.loader-mark .co {
  display: inline-block;
  overflow: hidden;
  padding-bottom: 0.08em;
}
.loader-mark .ax > span,
.loader-mark .co > span {
  display: inline-block;
  transform: translateY(110%);
  animation: loader-rise 0.7s var(--ease) forwards;
}
.loader-mark .ax {
  font-family: var(--sans);
  font-weight: 600;
}
.loader-mark .co {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
  padding-right: 0.06em;
}
.loader-mark .co > span {
  animation-delay: 0.1s;
}
.loader-mark .dot {
  display: inline-block;
  color: var(--accent);
  transform: scale(0);
  transform-origin: 50% 70%;
  animation: loader-pop 0.45s var(--ease) 0.6s forwards;
}
@keyframes loader-rise {
  to {
    transform: none;
  }
}
@keyframes loader-pop {
  to {
    transform: none;
  }
}
@keyframes loader-out {
  to {
    transform: translateY(-100%);
    visibility: hidden;
  }
}
html.seen .loader {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .loader {
    display: none;
  }
}

/* ===== cursor cells =====
   A fixed canvas over everything. The cell under the pointer lights
   in the accent, holds a moment, then fades. Cells live in page
   coordinates, so they stay on the grid while scrolling. */
.cells {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
@media (hover: none) {
  .cells {
    display: none;
  }
}

/* ===== type roles ===== */
.label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mute);
}
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;
  max-width: 16ch;
}
.display.wide {
  max-width: 19ch;
}
.display-sm {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 3.3vw, 50px);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
  max-width: 24ch;
}
.lead {
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 56ch;
  text-wrap: pretty;
}

/* zero-size inline marker used by site.js to find a text baseline */
.bl-probe {
  display: inline-block;
  width: 0;
  height: 0;
  vertical-align: baseline;
}

/* ===== the sheet =====
   The sidebar is a torn page laid on the grid: its own paper, a tiled
   tear along the outer edge, and a soft shadow onto the ground. The
   tear straddles grid line 13. */
.paper {
  position: absolute;
  inset: 0 -8px 0 0;
  z-index: -1;
  pointer-events: none;
  /* the shadow is the sheet's own silhouette, displaced down and right
     with almost no blur so it cannot pool in the rips, over a wide and
     very faint ambient layer */
  filter: drop-shadow(2px 2px 2px rgba(22, 22, 20, 0.05))
    drop-shadow(6px 4px 22px rgba(22, 22, 20, 0.04));
}
.paper-sheet {
  position: absolute;
  inset: 0;
  background: var(--paper);
  -webkit-mask-image:
    linear-gradient(#000, #000),
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%22240%22%20viewBox=%220%200%2016%20240%22%3E%3Cpath%20d=%22M0%200%20L8.68%200.0%20L10.92%202.0%20L10.84%204.0%20L9.64%206.0%20L10.15%208.0%20L8.31%2010.0%20L7.10%2012.0%20L12.33%2014.0%20L11.91%2016.0%20L10.81%2018.0%20L8.59%2020.0%20L7.80%2022.0%20L12.04%2024.0%20L10.36%2026.0%20L9.01%2028.0%20L3.60%2030.0%20L6.47%2032.0%20L9.76%2034.0%20L11.04%2036.0%20L10.02%2038.0%20L9.23%2040.0%20L9.93%2042.0%20L9.91%2044.0%20L9.57%2046.0%20L5.76%2048.0%20L6.42%2050.0%20L6.89%2052.0%20L4.39%2054.0%20L5.68%2056.0%20L4.40%2058.0%20L6.77%2060.0%20L5.33%2062.0%20L8.58%2064.0%20L6.49%2066.0%20L6.44%2068.0%20L7.57%2070.0%20L8.16%2072.0%20L8.03%2074.0%20L7.62%2076.0%20L9.08%2078.0%20L9.84%2080.0%20L8.33%2082.0%20L8.11%2084.0%20L9.05%2086.0%20L7.35%2088.0%20L7.15%2090.0%20L6.77%2092.0%20L8.74%2094.0%20L10.17%2096.0%20L10.59%2098.0%20L10.88%20100.0%20L12.13%20102.0%20L10.32%20104.0%20L11.45%20106.0%20L9.96%20108.0%20L11.58%20110.0%20L12.28%20112.0%20L11.23%20114.0%20L12.64%20116.0%20L9.20%20118.0%20L6.99%20120.0%20L6.58%20122.0%20L4.89%20124.0%20L3.84%20126.0%20L5.20%20128.0%20L6.43%20130.0%20L8.29%20132.0%20L6.44%20134.0%20L1.79%20136.0%20L3.71%20138.0%20L6.63%20140.0%20L5.24%20142.0%20L5.12%20144.0%20L5.73%20146.0%20L6.35%20148.0%20L6.34%20150.0%20L1.00%20152.0%20L3.39%20154.0%20L4.04%20156.0%20L3.57%20158.0%20L5.65%20160.0%20L7.12%20162.0%20L8.67%20164.0%20L8.71%20166.0%20L11.06%20168.0%20L11.04%20170.0%20L12.54%20172.0%20L12.36%20174.0%20L11.85%20176.0%20L9.70%20178.0%20L11.35%20180.0%20L11.24%20182.0%20L11.18%20184.0%20L10.17%20186.0%20L8.39%20188.0%20L7.08%20190.0%20L7.56%20192.0%20L8.22%20194.0%20L8.13%20196.0%20L10.99%20198.0%20L8.29%20200.0%20L8.45%20202.0%20L8.23%20204.0%20L8.69%20206.0%20L8.43%20208.0%20L8.63%20210.0%20L8.57%20212.0%20L6.28%20214.0%20L7.01%20216.0%20L4.68%20218.0%20L1.00%20220.0%20L4.41%20222.0%20L3.78%20224.0%20L3.90%20226.0%20L4.44%20228.0%20L5.01%20230.0%20L6.54%20232.0%20L6.36%20234.0%20L5.39%20236.0%20L5.51%20238.0%20L8.68%20240.0%20L0%20240%20Z%22%20fill=%22black%22/%3E%3C/svg%3E");
  mask-image:
    linear-gradient(#000, #000),
    url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2216%22%20height=%22240%22%20viewBox=%220%200%2016%20240%22%3E%3Cpath%20d=%22M0%200%20L8.68%200.0%20L10.92%202.0%20L10.84%204.0%20L9.64%206.0%20L10.15%208.0%20L8.31%2010.0%20L7.10%2012.0%20L12.33%2014.0%20L11.91%2016.0%20L10.81%2018.0%20L8.59%2020.0%20L7.80%2022.0%20L12.04%2024.0%20L10.36%2026.0%20L9.01%2028.0%20L3.60%2030.0%20L6.47%2032.0%20L9.76%2034.0%20L11.04%2036.0%20L10.02%2038.0%20L9.23%2040.0%20L9.93%2042.0%20L9.91%2044.0%20L9.57%2046.0%20L5.76%2048.0%20L6.42%2050.0%20L6.89%2052.0%20L4.39%2054.0%20L5.68%2056.0%20L4.40%2058.0%20L6.77%2060.0%20L5.33%2062.0%20L8.58%2064.0%20L6.49%2066.0%20L6.44%2068.0%20L7.57%2070.0%20L8.16%2072.0%20L8.03%2074.0%20L7.62%2076.0%20L9.08%2078.0%20L9.84%2080.0%20L8.33%2082.0%20L8.11%2084.0%20L9.05%2086.0%20L7.35%2088.0%20L7.15%2090.0%20L6.77%2092.0%20L8.74%2094.0%20L10.17%2096.0%20L10.59%2098.0%20L10.88%20100.0%20L12.13%20102.0%20L10.32%20104.0%20L11.45%20106.0%20L9.96%20108.0%20L11.58%20110.0%20L12.28%20112.0%20L11.23%20114.0%20L12.64%20116.0%20L9.20%20118.0%20L6.99%20120.0%20L6.58%20122.0%20L4.89%20124.0%20L3.84%20126.0%20L5.20%20128.0%20L6.43%20130.0%20L8.29%20132.0%20L6.44%20134.0%20L1.79%20136.0%20L3.71%20138.0%20L6.63%20140.0%20L5.24%20142.0%20L5.12%20144.0%20L5.73%20146.0%20L6.35%20148.0%20L6.34%20150.0%20L1.00%20152.0%20L3.39%20154.0%20L4.04%20156.0%20L3.57%20158.0%20L5.65%20160.0%20L7.12%20162.0%20L8.67%20164.0%20L8.71%20166.0%20L11.06%20168.0%20L11.04%20170.0%20L12.54%20172.0%20L12.36%20174.0%20L11.85%20176.0%20L9.70%20178.0%20L11.35%20180.0%20L11.24%20182.0%20L11.18%20184.0%20L10.17%20186.0%20L8.39%20188.0%20L7.08%20190.0%20L7.56%20192.0%20L8.22%20194.0%20L8.13%20196.0%20L10.99%20198.0%20L8.29%20200.0%20L8.45%20202.0%20L8.23%20204.0%20L8.69%20206.0%20L8.43%20208.0%20L8.63%20210.0%20L8.57%20212.0%20L6.28%20214.0%20L7.01%20216.0%20L4.68%20218.0%20L1.00%20220.0%20L4.41%20222.0%20L3.78%20224.0%20L3.90%20226.0%20L4.44%20228.0%20L5.01%20230.0%20L6.54%20232.0%20L6.36%20234.0%20L5.39%20236.0%20L5.51%20238.0%20L8.68%20240.0%20L0%20240%20Z%22%20fill=%22black%22/%3E%3C/svg%3E");
  -webkit-mask-size:
    calc(100% - 16px) 100%,
    16px 240px;
  mask-size:
    calc(100% - 16px) 100%,
    16px 240px;
  -webkit-mask-position:
    left top,
    right top;
  mask-position:
    left top,
    right top;
  -webkit-mask-repeat: no-repeat, repeat-y;
  mask-repeat: no-repeat, repeat-y;
  -webkit-mask-composite: source-over;
  mask-composite: add;
}
@media (max-width: 1023px) {
  .paper {
    inset: 0 0 -8px 0;
    filter: drop-shadow(0 2px 2px rgba(22, 22, 20, 0.05))
      drop-shadow(0 6px 22px rgba(22, 22, 20, 0.04));
  }
  .paper-sheet {
    -webkit-mask-image:
      linear-gradient(#000, #000),
      url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22240%22%20height=%2216%22%20viewBox=%220%200%20240%2016%22%3E%3Cpath%20d=%22M0%200%20L240%200%20L240.0%204.76%20L238.0%207.30%20L236.0%209.87%20L234.0%2011.06%20L232.0%2011.99%20L230.0%209.28%20L228.0%209.34%20L226.0%207.48%20L224.0%209.03%20L222.0%209.69%20L220.0%204.70%20L218.0%206.54%20L216.0%208.86%20L214.0%209.70%20L212.0%209.31%20L210.0%2010.71%20L208.0%2011.54%20L206.0%209.53%20L204.0%2010.24%20L202.0%209.82%20L200.0%2011.02%20L198.0%2011.39%20L196.0%2010.01%20L194.0%208.87%20L192.0%207.46%20L190.0%205.04%20L188.0%206.20%20L186.0%205.53%20L184.0%204.78%20L182.0%206.41%20L180.0%204.95%20L178.0%205.81%20L176.0%201.05%20L174.0%207.53%20L172.0%207.72%20L170.0%207.37%20L168.0%208.89%20L166.0%209.21%20L164.0%2010.17%20L162.0%209.98%20L160.0%208.86%20L158.0%209.24%20L156.0%207.04%20L154.0%208.25%20L152.0%208.28%20L150.0%209.34%20L148.0%208.61%20L146.0%209.53%20L144.0%2010.23%20L142.0%2013.54%20L140.0%2010.90%20L138.0%2011.01%20L136.0%2011.84%20L134.0%2011.16%20L132.0%209.42%20L130.0%209.62%20L128.0%2011.22%20L126.0%2010.28%20L124.0%209.22%20L122.0%209.61%20L120.0%207.39%20L118.0%206.85%20L116.0%204.88%20L114.0%203.68%20L112.0%204.06%20L110.0%204.92%20L108.0%206.59%20L106.0%207.88%20L104.0%207.72%20L102.0%206.40%20L100.0%206.26%20L98.0%205.94%20L96.0%204.92%20L94.0%205.98%20L92.0%206.29%20L90.0%206.75%20L88.0%205.71%20L86.0%206.91%20L84.0%205.79%20L82.0%207.16%20L80.0%208.28%20L78.0%206.51%20L76.0%208.15%20L74.0%207.63%20L72.0%208.99%20L70.0%209.07%20L68.0%205.98%20L66.0%208.91%20L64.0%2010.89%20L62.0%2011.22%20L60.0%2010.03%20L58.0%2010.91%20L56.0%2014.21%20L54.0%2010.74%20L52.0%209.06%20L50.0%2010.49%20L48.0%2012.03%20L46.0%208.46%20L44.0%207.54%20L42.0%207.01%20L40.0%207.03%20L38.0%206.29%20L36.0%207.36%20L34.0%207.84%20L32.0%208.65%20L30.0%209.24%20L28.0%206.73%20L26.0%207.48%20L24.0%207.67%20L22.0%205.19%20L20.0%204.45%20L18.0%204.01%20L16.0%205.41%20L14.0%206.82%20L12.0%205.64%20L10.0%205.21%20L8.0%204.53%20L6.0%204.50%20L4.0%205.32%20L2.0%208.18%20L0.0%204.76%20Z%22%20fill=%22black%22/%3E%3C/svg%3E");
    mask-image:
      linear-gradient(#000, #000),
      url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22240%22%20height=%2216%22%20viewBox=%220%200%20240%2016%22%3E%3Cpath%20d=%22M0%200%20L240%200%20L240.0%204.76%20L238.0%207.30%20L236.0%209.87%20L234.0%2011.06%20L232.0%2011.99%20L230.0%209.28%20L228.0%209.34%20L226.0%207.48%20L224.0%209.03%20L222.0%209.69%20L220.0%204.70%20L218.0%206.54%20L216.0%208.86%20L214.0%209.70%20L212.0%209.31%20L210.0%2010.71%20L208.0%2011.54%20L206.0%209.53%20L204.0%2010.24%20L202.0%209.82%20L200.0%2011.02%20L198.0%2011.39%20L196.0%2010.01%20L194.0%208.87%20L192.0%207.46%20L190.0%205.04%20L188.0%206.20%20L186.0%205.53%20L184.0%204.78%20L182.0%206.41%20L180.0%204.95%20L178.0%205.81%20L176.0%201.05%20L174.0%207.53%20L172.0%207.72%20L170.0%207.37%20L168.0%208.89%20L166.0%209.21%20L164.0%2010.17%20L162.0%209.98%20L160.0%208.86%20L158.0%209.24%20L156.0%207.04%20L154.0%208.25%20L152.0%208.28%20L150.0%209.34%20L148.0%208.61%20L146.0%209.53%20L144.0%2010.23%20L142.0%2013.54%20L140.0%2010.90%20L138.0%2011.01%20L136.0%2011.84%20L134.0%2011.16%20L132.0%209.42%20L130.0%209.62%20L128.0%2011.22%20L126.0%2010.28%20L124.0%209.22%20L122.0%209.61%20L120.0%207.39%20L118.0%206.85%20L116.0%204.88%20L114.0%203.68%20L112.0%204.06%20L110.0%204.92%20L108.0%206.59%20L106.0%207.88%20L104.0%207.72%20L102.0%206.40%20L100.0%206.26%20L98.0%205.94%20L96.0%204.92%20L94.0%205.98%20L92.0%206.29%20L90.0%206.75%20L88.0%205.71%20L86.0%206.91%20L84.0%205.79%20L82.0%207.16%20L80.0%208.28%20L78.0%206.51%20L76.0%208.15%20L74.0%207.63%20L72.0%208.99%20L70.0%209.07%20L68.0%205.98%20L66.0%208.91%20L64.0%2010.89%20L62.0%2011.22%20L60.0%2010.03%20L58.0%2010.91%20L56.0%2014.21%20L54.0%2010.74%20L52.0%209.06%20L50.0%2010.49%20L48.0%2012.03%20L46.0%208.46%20L44.0%207.54%20L42.0%207.01%20L40.0%207.03%20L38.0%206.29%20L36.0%207.36%20L34.0%207.84%20L32.0%208.65%20L30.0%209.24%20L28.0%206.73%20L26.0%207.48%20L24.0%207.67%20L22.0%205.19%20L20.0%204.45%20L18.0%204.01%20L16.0%205.41%20L14.0%206.82%20L12.0%205.64%20L10.0%205.21%20L8.0%204.53%20L6.0%204.50%20L4.0%205.32%20L2.0%208.18%20L0.0%204.76%20Z%22%20fill=%22black%22/%3E%3C/svg%3E");
    -webkit-mask-size:
      100% calc(100% - 16px),
      240px 16px;
    mask-size:
      100% calc(100% - 16px),
      240px 16px;
    -webkit-mask-position:
      left top,
      left bottom;
    mask-position:
      left top,
      left bottom;
    -webkit-mask-repeat: no-repeat, repeat-x;
    mask-repeat: no-repeat, repeat-x;
  }
}

/* ===== sidebar ===== */
.side {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: var(--sidebar);
  padding: var(--cell);
  display: flex;
  flex-direction: column;
  gap: 36px;
  overflow: visible; /* the torn edge and its shadow reach past the box */
  z-index: 10;
}
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  width: max-content;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-decoration: none;
}
/* the accent full stop: in the wordmark and every headline */
.dot {
  color: var(--accent);
}
.thesis h1,
.thesis .h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 29px;
  line-height: 1.14;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.thesis p {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
  text-wrap: pretty;
}
.side-foot {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--mute);
}

/* ===== main column =====
   The column starts on a grid line and its width is rounded down to
   whole cells, so anything drawn edge to edge ends on a line too. */
.main {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  margin-left: var(--sidebar);
  min-height: 100vh;
}
.s {
  display: flex;
  flex-direction: column;
  gap: 26px;
  margin-left: var(--pad);
  width: calc(100% - 2 * var(--pad));
  width: round(down, calc(100% - 2 * var(--pad)), var(--cell));
  padding-block: calc(2 * var(--cell));
  container-type: inline-size;
}
.s:first-child {
  padding-top: calc(6 * var(--cell));
}
/* the last line of the page sits on the same baseline as the sidebar
   copyright and the grid control, one cell from the bottom edge */
.s:last-child {
  margin-top: auto;
  padding-bottom: var(--cell);
}
.s > .label + .display,
.s > .label + .display-sm {
  margin-top: -4px;
}

/* ===== what we make: three parts, under one rule ===== */
/* column tracks are whole cells, so every rule starts and ends on a line */
.cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-columns: repeat(
    3,
    round(down, calc((100% - 2 * var(--pad)) / 3 + 0.5px), var(--cell))
  );
  gap: var(--pad);
  justify-content: start;
  margin-top: 10px;
}
/* the rule above each column is drawn by hand in the label's grey; its
   centre line sits on the grid line the column is snapped to */
.col {
  padding-top: 12px;
}
.hand {
  display: block;
  width: 100%;
  height: 8px;
  margin: -4px 0 0;
  overflow: visible;
}
.hand path {
  fill: none;
  stroke: var(--mute);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: 0.92;
}
.col p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

/* ===== the package: one dark object on the page, no lines inside ===== */
.panel {
  background: var(--panel);
  color: var(--panel-text);
  border-radius: var(--radius);
  padding: var(--cell) var(--pad);
  margin-top: 8px;
}
.index-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 24px;
  height: calc(2 * var(--cell));
  font-family: var(--mono);
  font-size: 13px;
  color: var(--panel-mute);
}
.index-head b {
  font-weight: 500;
  color: var(--panel-text);
}
.tree {
  list-style: none;
}
/* each row is a pill that hugs its text; on hover it fills in the accent */
.tree li {
  display: grid;
  grid-template-columns: minmax(170px, 230px) 1fr;
  gap: 24px;
  align-items: center;
  width: max-content;
  max-width: calc(100% + var(--cell));
  min-height: calc(2 * var(--cell));
  margin: 0 0 0 calc(-1 * var(--cell));
  padding: 12px var(--cell);
  border-radius: 8px;
  transition: background 0.18s var(--ease);
}
.tree li:hover {
  background: var(--accent);
}
.tree li:hover .path,
.tree li:hover .path::before,
.tree li:hover .note {
  color: #fff;
}
.tree .path {
  font-family: var(--mono);
  font-size: 14px;
  line-height: var(--cell);
  white-space: nowrap;
  color: var(--panel-text);
  transition: color 0.18s var(--ease);
}
.tree .path::before {
  content: "├─ ";
  color: var(--panel-mute);
  transition: color 0.18s var(--ease);
}
.tree li:last-child .path::before {
  content: "└─ ";
}
.tree .note {
  font-size: 15px;
  line-height: var(--cell);
  color: var(--panel-mute);
  max-width: 56ch;
  transition: color 0.18s var(--ease);
}

/* ===== about page objects ===== */
/* The instrument drawing sits straight on the grid. Its box is a whole
   number of double cells wide and tall, so its centre, and the two
   crosshair lines through it, land on grid lines. */
.art-panel {
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 760;
  width: round(down, 100cqw, calc(2 * var(--cell)));
  height: round(down, calc(100cqw * 760 / 1600), calc(2 * var(--cell)));
  margin-top: 10px;
  overflow: hidden;
}
.axis-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible; /* the crosshair runs past the drawing to the box edges */
  /* a 1px stroke centred on a grid line straddles two pixel rows;
     half a pixel over puts it exactly on the line */
  transform: translate(0.5px, 0.5px);
}
.axis-art .ln,
.axis-art .ring,
.axis-art .ticks line {
  vector-effect: non-scaling-stroke;
  stroke-width: 1;
  stroke: var(--ink);
}
.axis-art .ln {
  stroke-opacity: 0.22;
}
.axis-art .ring {
  fill: none;
  stroke-opacity: 0.22;
}
.axis-art .ticks,
.axis-art .orbit {
  transform-origin: 800px 380px;
  transform-box: view-box;
}
/* strategy at the core, systems in the rings around it (viewBox units) */
.axis-art .t-ring {
  font-family: var(--mono);
  font-size: 19px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-anchor: middle;
  fill: var(--mute);
}
.axis-art .t-ring.hot {
  fill: var(--accent-ink);
}
/* the middle band is a pale wash of the accent; the grid shows through */
.axis-art .ring.mid-disc {
  fill: rgba(212, 103, 74, 0.2);
}
/* the core is solid accent, with the strategy items set light on it */
.axis-art .ring.core-disc {
  fill: var(--accent);
  stroke: none;
}
.axis-art .t-core text {
  font-family: var(--mono);
  font-size: 21px;
  text-anchor: middle;
  fill: #f6f4ef;
}
.axis-art .t-outer text {
  font-family: var(--mono);
  font-size: 21px;
  fill: var(--accent-ink);
}
.halves.axes-fallback {
  display: none;
}
.axis-art .orbit {
  animation: orbit 48s linear infinite;
}
.axis-art .sat {
  fill: var(--accent);
}
.axis-art .core {
  fill: var(--ink);
}
@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .axis-art .orbit {
    animation: none;
  }
}


.halves {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--pad);
  margin-top: 8px;
  max-width: 920px;
}
.half {
  padding-top: 18px;
  border-top: 1px solid var(--ink);
}
.half .word {
  font-family: var(--serif);
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1;
  letter-spacing: -0.01em;
}
.half.hot .word {
  color: var(--accent-ink);
}
.half .role {
  margin-top: 18px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 34ch;
}
.half ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--mute);
}

/* ===== contact ===== */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-columns: 1fr round(
      down,
      calc((100% - var(--pad)) / 2 + 0.5px),
      var(--cell)
    );
  gap: var(--pad);
  align-items: start;
  margin-top: 4px;
}
.contact-grid .lead {
  margin-top: 18px;
}
.form {
  display: flex;
  flex-direction: column;
  gap: var(--cell);
}
.field {
  display: flex;
  flex-direction: column;
}
.field .label {
  display: flex;
  align-items: center;
  height: var(--cell);
}
/* fields are filled surfaces rather than ruled lines */
.field input,
.field textarea {
  border: 0;
  border-radius: 6px;
  background: rgba(22, 22, 20, 0.06);
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  height: calc(2 * var(--cell));
  padding: 0 12px;
  transition: background 0.25s var(--ease);
}
.field input::placeholder,
.field textarea::placeholder {
  color: var(--faint);
}
.field input:focus,
.field textarea:focus {
  outline: none;
  background: rgba(22, 22, 20, 0.1);
}
.field input:focus-visible,
.field textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.field textarea {
  height: calc(5 * var(--cell));
  min-height: calc(5 * var(--cell));
  padding: 12px;
  resize: vertical;
  line-height: 1.5;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  width: calc(4 * var(--cell));
  justify-content: center;
  height: calc(2 * var(--cell));
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    background 0.25s var(--ease),
    color 0.25s var(--ease);
}
.btn:hover {
  background: var(--accent);
  color: #fff;
}
.form-note {
  min-height: var(--cell);
  line-height: var(--cell);
  font-size: 13px;
  color: var(--mute);
}
.foot-link {
  width: max-content;
  margin-top: 56px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--mute);
  text-decoration: none;
  transition: color 0.2s var(--ease);
}
.foot-link:hover {
  color: var(--ink);
}

/* ===== grid control ===== */
.grid-toggle {
  position: fixed;
  right: var(--cell);
  bottom: var(--cell);
  z-index: 60;
  padding: 0;
  border: 0;
  background: transparent;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
  color: var(--mute);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.grid-toggle:hover {
  color: var(--ink);
}

/* ===== entrances ===== */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.9s var(--ease),
    transform 0.9s var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ===== narrower screens ===== */
@media (max-width: 1023px) {
  :root {
    --pad: 24px; /* 1 cell */
  }
  .side {
    position: relative;
    width: auto;
    gap: 26px;
    padding: var(--cell) var(--pad);
    overflow: visible;
  }
  .thesis h1,
  .thesis .h1 {
    font-size: 26px;
    max-width: 24ch;
  }
  .side-foot {
    display: none;
  }
  .main {
    margin-left: 0;
    min-height: 0;
  }
  .s:first-child {
    padding-top: calc(3 * var(--cell));
  }
}
@media (max-width: 760px) {
  .cols,
  .halves,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  /* the drawing is too small for its labels on a phone */
  .axis-art text {
    display: none;
  }
  .halves.axes-fallback {
    display: grid;
  }
  .tree li {
    grid-template-columns: 1fr;
    gap: 6px;
    width: auto;
    max-width: none;
  }
  .tree li {
    padding: 12px var(--cell);
  }
}