/* SHIFT — one stylesheet, no build step.
   Light ground, one hot red used sparingly, a technical drawing carrying the page.
   Instrument Serif sets the display line; Geist Mono does everything structural. */

@import url("https://fonts.googleapis.com/css2?family=Geist+Mono:wght@300;400;500&family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500;600&display=swap");

:root {
  --red: #e10909;
  --paper: #ededec;
  --panel: #e4e4e3;
  --line: #cfcfce;
  --draw: #3a3a3a;   /* the drawing's stroke */
  --ink: #1c1c1c;
  --body: #545454;
  --mute: #8a8a89;
  --faint: #b3b3b2;
  --gold: #c08a1f;
  --green: #3f7f55;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.65;
  letter-spacing: -0.005em;
  text-transform: lowercase;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--faint); }
a:hover { color: var(--red); border-bottom-color: var(--red); }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 32px; }

/* ------------------------------------------------------------------ nav */

nav { padding: 22px 0 4px; }
nav .wrap { display: flex; align-items: center; gap: 18px; }
nav .mark { border: 0; font-family: var(--sans); font-weight: 600; font-size: 17px; letter-spacing: -0.02em; text-transform: lowercase; }
nav .mark i { display: inline-block; width: 8px; height: 8px; background: var(--red); border-radius: 50%; margin-right: 7px; vertical-align: 1px; font-style: normal; }
nav .mark span { color: var(--mute); font-weight: 400; font-size: 13px; margin-left: 8px; }
nav .links { display: flex; gap: 4px; margin-left: auto; background: #e3e3e2; border-radius: 999px; padding: 5px; flex-wrap: wrap; }
nav .links a { border: 0; color: var(--body); font-size: 13px; padding: 7px 16px; border-radius: 999px; }
nav .links a:hover { color: var(--ink); }
nav .links a[aria-current="page"] { color: var(--red); background: var(--paper); }

/* ------------------------------------------------------------------ display type */

.display {
  font-family: var(--serif);
  font-weight: 400;
  text-transform: none;
  font-size: clamp(30px, 4.6vw, 58px);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 auto 0;
  max-width: 21ch;
  text-align: center;
}
.display em { font-style: italic; }

h2 {
  font-family: var(--serif);
  text-transform: none;
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0 0 16px;
  max-width: 20ch;
}
h2 em { font-style: italic; color: var(--red); }
h3 { font-size: 13px; font-weight: 500; color: var(--mute); margin: 0 0 10px; letter-spacing: 0.02em; }

.name {
  font-family: var(--sans);
  text-transform: lowercase;
  font-weight: 500;
  font-size: clamp(30px, 4.6vw, 52px);
  letter-spacing: -0.035em;
  line-height: 1;
  margin: 0 0 10px;
  text-align: center;
}
.name i { display: inline-block; width: 13px; height: 13px; background: var(--red); border-radius: 50%; margin-right: 12px; vertical-align: 3px; font-style: normal; }

p.sub { color: var(--body); max-width: 56ch; margin: 0 auto 26px; text-align: center; font-size: 14px; }
p.lede { color: var(--body); max-width: 62ch; margin: 0 0 22px; }
.note { color: var(--mute); font-size: 12.5px; }
.tag { display: inline-block; color: var(--red); font-size: 12px; margin-bottom: 20px; }

/* ------------------------------------------------------------------ buttons */

.row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; align-items: center; }
.pill { border: 1px solid var(--red); color: var(--red); border-radius: 999px; padding: 9px 22px; font-size: 13px; display: inline-block; }
.btn { border: 0; border-radius: 999px; padding: 12px 26px; font-size: 13px; display: inline-block; background: #e0e0df; color: var(--ink); }
.btn:hover { background: #d6d6d5; color: var(--ink); }
.btn.solid { background: #1c1c1c; color: var(--paper); }
.btn.solid:hover { background: #000; color: var(--paper); }

.cmd {
  display: inline-flex; gap: 14px; align-items: center;
  border: 1px solid var(--line); background: #e7e7e6; border-radius: 8px;
  padding: 11px 14px; font-size: 12.5px; max-width: 100%; overflow-x: auto; color: var(--body);
}
.cmd button {
  font-family: var(--mono); font-size: 11px; text-transform: lowercase;
  background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--mute);
  padding: 3px 10px; cursor: pointer; flex: none;
}
.cmd button:hover { color: var(--red); border-color: var(--red); }

/* ------------------------------------------------------------------ the drawing */

.plate { margin: -8px auto 10px; max-width: 1060px; }
.plate + .note, .plate + p { margin-top: 6px; }
.plate svg { width: 100%; height: auto; display: block; }

.dw { fill: none; stroke: var(--draw); stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.dw-thin { fill: none; stroke: var(--draw); stroke-width: 0.7; opacity: 0.75; }
.dw-fill { fill: #e6e6e5; stroke: var(--draw); stroke-width: 1.15; }
.lead { fill: none; stroke: var(--draw); stroke-width: 0.8; stroke-dasharray: 4 4; opacity: 0.7; }
.dot { fill: var(--red); }
.cap { font-family: var(--mono); font-size: 12.5px; fill: var(--body); text-transform: lowercase; }
/* code keeps its own case; the page-wide lowercase would quietly mangle a function signature */
.cap.code, code { text-transform: none; }
.tick { stroke: var(--draw); stroke-width: 0.75; opacity: 0.34; }
.tick.major { stroke-width: 1.15; opacity: 0.8; }
.tick.hot { stroke: var(--red); stroke-width: 2; opacity: 1; }

@keyframes sweep { to { transform: rotate(360deg); } }
/* transform-box: view-box makes the origin resolve in the svg's own user units. Without it the
   origin is read against the scaled css box and the rotating parts fly off the drawing. */
#minute-hand, #second-ring, #card { transform-box: view-box; }
#minute-hand { transform-origin: 500px 296px; animation: sweep 48s linear infinite; }
#second-ring { transform-origin: 500px 296px; animation: sweep 14.4s steps(144) infinite; }
@keyframes cardin { 0%,100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
#card { animation: cardin 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  #minute-hand, #second-ring, #card { animation: none; }
  html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------ blocks */

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.stat { background: var(--paper); padding: 20px 22px; }
.stat .k { color: var(--mute); font-size: 11px; letter-spacing: 0.04em; }
.stat .v { font-size: 28px; letter-spacing: -0.04em; margin-top: 8px; line-height: 1; color: var(--ink); }
.stat .n { color: var(--faint); font-size: 11px; margin-top: 6px; }

section { padding: 84px 0; border-top: 1px solid var(--line); }
section.tight { padding: 46px 0; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 44px; }

table { width: 100%; border-collapse: collapse; font-size: 13px; }
th { text-align: left; color: var(--mute); font-weight: 400; font-size: 11px; letter-spacing: 0.04em; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line); }
td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--line); color: var(--body); }
td.hot { color: var(--red); }
.scroll { overflow-x: auto; }
.empty { color: var(--faint); font-size: 13px; padding: 28px 0; }

ol.steps { counter-reset: s; list-style: none; padding: 0; max-width: 64ch; margin: 0; }
ol.steps li { counter-increment: s; position: relative; padding-left: 44px; margin-bottom: 24px; color: var(--body); }
ol.steps li::before { content: "[" counter(s, decimal-leading-zero) "]"; position: absolute; left: 0; top: 0; color: var(--red); font-size: 12px; }
ol.steps li b { color: var(--ink); font-weight: 500; }

ul.plain { list-style: none; padding: 0; margin: 0; color: var(--body); }
ul.plain li { padding: 9px 0; border-bottom: 1px solid var(--line); }
ul.plain li::before { content: "— "; color: var(--faint); }

footer { border-top: 1px solid var(--line); padding: 40px 0 64px; color: var(--mute); font-size: 12px; }
footer p { max-width: 64ch; }

.rise { opacity: 0; transform: translateY(12px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.rise.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none; } }

@media (max-width: 760px) {
  nav .wrap { flex-wrap: wrap; }
  nav .links { margin-left: 0; width: 100%; justify-content: flex-start; }
  section { padding: 60px 0; }
  .cap { font-size: 10px; }
}