/* Reset, type scale, chrome and the controls every page shares. */

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

/* No scroll-behavior here on purpose: the runner in motion.js sets the scroll
   position every frame, and a smooth behaviour would animate against it. */
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 100%/1.6 var(--font-sans);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: background var(--t-move) var(--ease), color var(--t-move) var(--ease);
}

img, svg, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--accent); color: var(--text-invert); }

/* Scrollbars: thin, rounded, no track. The thumb is the page's own ink at low
   strength, and it firms up while you are on it. */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--text) 24%, transparent) transparent;
}
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--text) 24%, transparent);
  background-clip: content-box;
  border: 3px solid transparent;
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--text) 45%, transparent);
  background-clip: content-box;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ---- Type ------------------------------------------------------------- */
/* Tracking and leading are set per size, never once for everything. */

h1, h2, h3, h4 { margin: 0; font-weight: 500; }

.display {
  font-family: var(--font-head);
  font-weight: 500;
  font-size: clamp(2.1rem, 5.4vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.title {
  font-family: var(--font-head);
  font-optical-sizing: auto;
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  font-weight: 500;
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--text-2);
  max-width: 52ch;
  text-wrap: balance;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}

.mono { font-family: var(--font-mono); font-size: 0.86rem; letter-spacing: -0.01em; }
.faint { color: var(--text-3); }

a { color: inherit; text-decoration: none; }
p { margin: 0 0 var(--s-4); }

/* ---- Layout ----------------------------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell-wide { max-width: 1420px; }

.section { padding-block: clamp(3rem, 7vw, 7rem); }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  margin-bottom: var(--s-6);
  flex-wrap: wrap;
}

.grid { display: grid; gap: var(--s-4); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }

.row { display: flex; align-items: center; gap: var(--s-3); }
.row-wrap { flex-wrap: wrap; }
.spread { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: var(--s-3); }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---- Logo -------------------------------------------------------------
   The name is written with an omega in place of its C, and it stays that way.
   Once the page moves under the bar the rest of the name folds away and the
   omega is left standing on its own. Fraunces has no Greek, so the omega is
   set in the serif stack every platform ships. */

.logo {
  font-family: var(--font-logo);
  font-variation-settings: "opsz" 48, "wght" 500, "SOFT" 30, "WONK" 1;
  font-size: 1.42rem;
  letter-spacing: -0.005em;
  line-height: 1;
  display: inline-flex;
  align-items: baseline;
  padding-block: 0.2em;
}
.logo .omega {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.04em;
  line-height: 1;
  margin-right: 0.02em;
}
.logo .rest {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  max-width: 11ch;
  transition: max-width var(--t-move) var(--ease), opacity 200ms var(--ease);
}
.nav[data-lifted="true"] .logo .rest { max-width: 0; opacity: 0; }


/* ---- Nav -------------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-3) var(--gutter);
  background: var(--bg);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-left: var(--s-4);
}
.nav-link {
  padding: 0.45rem 0.7rem;
  border-radius: var(--r-full);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  transition: color var(--t-hover) var(--ease), background var(--t-hover) var(--ease);
}
.nav-link:hover { background: var(--glass-light); }
.nav-link[aria-current="page"] { color: var(--text); background: var(--glass-light); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); }

.nav .nav-toggle { display: none; }

@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav .nav-toggle { display: inline-flex; }
  .desktop-only { display: none !important; }
}

/* On a phone the chrome keeps the logo, the theme and the way in. The rest of
   the bar is a swipe away in the sheet. */
@media (max-width: 520px) {
  .nav { gap: var(--s-3); padding-inline: var(--gutter); }
  .nav .nav-end .btn-primary { display: none; }
  .logo { font-size: 1.28rem; }
}

/* ---- Buttons ---------------------------------------------------------- */

.btn {
  --btn-bg: var(--glass-light);
  --btn-fg: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.62rem 1.05rem;
  border-radius: var(--r-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 0.93rem;
  font-weight: 450;
  letter-spacing: -0.006em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease),
              border-color var(--t-hover) var(--ease), transform var(--t-press) var(--ease),
              opacity var(--t-hover) var(--ease);
  touch-action: manipulation;
}

/* Feedback lands on the press, not on the release. */
.btn:active, .btn[data-pressed="true"] { transform: scale(0.97); }

.btn-primary { --btn-bg: var(--text); --btn-fg: var(--text-invert); font-weight: 500; }
.btn-primary:hover { --btn-bg: color-mix(in oklab, var(--text) 88%, var(--bg)); }

.btn-ghost { --btn-bg: var(--surface-2); }
.btn-ghost:hover { --btn-bg: var(--surface-3); }

.btn-quiet { --btn-bg: transparent; color: var(--text-2); }
.btn-quiet:hover { --btn-bg: var(--glass-light); }

.btn-sm { padding: 0.4rem 0.75rem; font-size: 0.85rem; }
.btn-lg { padding: 0.8rem 1.4rem; font-size: 1rem; }
.btn-icon { padding: 0.5rem; width: 2.25rem; height: 2.25rem; border-radius: var(--r-full); }

.btn .arrow { transition: transform var(--t-hover) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ---- Card ------------------------------------------------------------- */

.card {
  position: relative;
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  transition: border-color var(--t-hover) var(--ease), background var(--t-hover) var(--ease),
              box-shadow var(--t-hover) var(--ease);
}
a.card:hover, button.card:hover {
  background: var(--surface-2);
  box-shadow: var(--lift-quiet);
}
a.card:active, button.card:active { transition-duration: var(--t-press); }

.card-title { font-family: var(--font-head); font-size: 1.12rem; line-height: 1.25; letter-spacing: -0.014em; font-weight: 500; }
.card-body { color: var(--text-2); font-size: 0.93rem; line-height: 1.5; margin: var(--s-2) 0 0; }


/* ---- A card that leads somewhere ---------------------------------------
   A rectangle, nothing cut out of it. Hovering does nothing; pressing it
   scales it very slightly, because that is contact. */

.card-link {
  position: relative;
  display: block;
}
.card-link .card { transition: transform var(--t-press) var(--ease); }
.card-link:active .card { transform: scale(0.994); }
.card-link:focus-visible { outline-offset: 3px; }

/* ---- Pills, badges, chips --------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.22rem 0.6rem;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--glass-light);
  font-size: 0.76rem;
  letter-spacing: 0.005em;
  color: var(--text-2);
  white-space: nowrap;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.pill-ok { color: var(--ok); border-color: color-mix(in oklab, var(--ok) 35%, transparent); }
.pill-pending { color: var(--pending); border-color: color-mix(in oklab, var(--pending) 35%, transparent); }
.pill-drift { color: var(--drift); border-color: color-mix(in oklab, var(--drift) 35%, transparent); }

/* ---- Code line with copy ---------------------------------------------- */

.cmd {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: fit-content;
  max-width: 100%;
  padding: 0.55rem 0.55rem 0.55rem 1rem;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--text-2);
  overflow: hidden;
}
.cmd code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmd .prompt { color: var(--text-3); }
.copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem; height: 1.9rem;
  flex: none;
  border-radius: var(--r-full);
  background: var(--glass-light);
  color: var(--text-2);
  transition: background var(--t-hover) var(--ease), color var(--t-hover) var(--ease), transform var(--t-press) var(--ease);
}
.copy:hover { background: var(--surface-3); }
.copy:active { transform: scale(0.9); }
.copy[data-done="true"] { color: var(--ok); }
.copy svg { position: absolute; transition: opacity var(--t-press) var(--ease), transform 200ms var(--ease); }
.copy .check { opacity: 0; transform: scale(0.6); }
.copy[data-done="true"] .clip { opacity: 0; transform: scale(0.6); }
.copy[data-done="true"] .check { opacity: 1; transform: scale(1); }

/* ---- Reveal on scroll -------------------------------------------------- */

/* Hidden only when a script is there to reveal it again. */
html[data-js] [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  transition: opacity 620ms var(--ease), transform 720ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
html[data-js] [data-reveal][data-shown="true"] { opacity: 1; transform: none; }

/* ---- Sheet and scrim --------------------------------------------------- */

.scrim {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--scrim);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--t-move) var(--ease);
}
.scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

.sheet {
  position: fixed;
  z-index: 90;
  left: 0; right: 0; bottom: 0;
  background: var(--glass);
  backdrop-filter: blur(30px) saturate(180%);
  -webkit-backdrop-filter: blur(30px) saturate(180%);
  border-top: 1px solid var(--glass-edge);
  border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-lg);
  padding: var(--s-3) var(--gutter) calc(var(--s-6) + env(safe-area-inset-bottom));
  transform: translate3d(0, 100%, 0);
  visibility: hidden;
  touch-action: none;
}
.sheet[data-open="true"] { visibility: visible; }
.sheet .grabber {
  width: 40px; height: 4px;
  margin: 0 auto var(--s-4);
  border-radius: var(--r-full);
  background: var(--line-strong);
}
.sheet-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0.25rem;
  font-size: 1.05rem;
  border-bottom: 1px solid var(--line);
  transition: background var(--t-press) var(--ease), padding-left var(--t-hover) var(--ease);
  border-radius: var(--r-sm);
}
.sheet-link:active { background: var(--glass-light); padding-left: 0.6rem; }

/* ---- Toast ------------------------------------------------------------- */

.toasts {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--s-2);
  width: min(30rem, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0.7rem 0.7rem 0.7rem 1rem;
  border-radius: var(--r-full);
  background: var(--glass);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-md);
  font-size: 0.9rem;
  pointer-events: auto;
}
.toast .msg { flex: 1; min-width: 0; }

/* ---- Footer -------------------------------------------------------------
   The brand and what it is on the left, the map of the site on the right, and
   the name once more underneath, big and nearly out of sight. */

.footer { border-top: 1px solid var(--line); margin-top: var(--s-8); padding-top: var(--s-8); overflow: hidden; }

.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr);
  gap: var(--s-7) var(--s-6);
  padding-bottom: var(--s-8);
}

.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.footer-brand .logo { margin-bottom: var(--s-1); }
.footer-line { color: var(--text-2); font-size: 0.96rem; line-height: 1.5; max-width: 34ch; margin: 0; }
.footer-mark {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--accent);
}
.footer-brand .btn { margin-top: var(--s-2); }

.footer-cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-5);
}
.footer h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 var(--s-3);
}
.footer-cols a {
  display: block;
  width: fit-content;
  color: var(--text-2);
  font-size: 0.95rem;
  padding: 0.35rem 0.55rem;
  margin-left: -0.55rem;
  border-radius: var(--r-full);
  transition: background var(--t-hover) var(--ease);
}
.footer-cols a:hover { background: var(--glass-light); }

/* The name at the size of the page, sitting just above the floor. */
.footer-wordmark {
  font-family: var(--font-logo);
  font-variation-settings: "opsz" 144, "wght" 400, "SOFT" 20, "WONK" 1;
  font-size: clamp(2.6rem, 15.6vw, 17rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-align: center;
  color: color-mix(in oklab, var(--text) 9%, transparent);
  padding: var(--s-6) var(--gutter) calc(var(--s-5) + env(safe-area-inset-bottom));
  user-select: none;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .footer-top { grid-template-columns: 1fr; gap: var(--s-6); }
}
@media (max-width: 520px) {
  .footer-cols { grid-template-columns: 1fr 1fr; gap: var(--s-4) var(--s-5); }
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--text); color: var(--text-invert);
  padding: 0.6rem 1rem; border-radius: 0 0 var(--r-md) 0;
}
.skip:focus { left: 0; }

/* Reduced motion: keep the feedback, drop the travel. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 120ms !important;
  }
  html[data-js] [data-reveal] { transform: none; }
}