/* The public site's design system: soft structuralism. A silver-white ground, big bold Geist,
   and everything that matters floating on it as machined hardware: a white core sitting in a
   translucent tray with a hairline rim (the "bezel"), lit by very soft, blue-tinted shadows.
   Actions are ink pills with their arrow in a circle of its own; motion is springy and
   heavy. Plain CSS on top of Tailwind's preflight, loaded by every public page (body.site).
   The home page adds home.css, the guides guide.css. The dashboard and node pages don't use it. */

:root {
  --c-ground: #eef1f3;
  --c-ground-2: #f6f7f8;
  --c-surface: #ffffff;
  --c-ink: #0b1418;
  --c-text: #1d2a30;
  --c-muted: #5d6a70;
  --c-hair: rgb(15 46 59 / 0.08);
  --c-tray: rgb(255 255 255 / 0.5);

  /* kept for the guide and the app fragment */
  --c-night: #09090b;
  --c-paper: #fafafa;
  --c-cloud: #e4ebee;
  --c-sky: #9fc8d9;
  --c-deep: #0f2e3b;
  --c-yellow: oklch(85% 0.155 89);

  --font: "Geist", ui-sans-serif, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* taste-skill-ignore: only real <code> uses it */

  --step-micro: 0.6875rem;
  --step-small: 0.9375rem;
  --step-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --step-lead: clamp(1.25rem, 1.05rem + 0.7vw, 1.625rem);
  --step-head: clamp(2.5rem, 1.4rem + 3.6vw, 5rem);
  --step-display: clamp(3.5rem, 1.6rem + 7vw, 8.5rem);

  --margin: clamp(1rem, 4vw, 3rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --measure: 80rem;
  --section: clamp(96px, 12vw, 168px);

  /* the bezel: core radius, then a translucent tray and a hairline rim drawn as rings, so
     the curves stay concentric without a second element */
  --r: 2rem;
  --tray: 6px;
  --r-core: calc(var(--r) - var(--tray));
  --shadow-soft: 0 1px 2px rgb(15 46 59 / 0.04), 0 16px 40px -18px rgb(15 46 59 / 0.16), 0 48px 96px -40px rgb(15 46 59 / 0.2);
  --bezel: inset 0 1px 1px rgb(255 255 255 / 0.9), 0 0 0 var(--tray) var(--c-tray), 0 0 0 calc(var(--tray) + 1px) var(--c-hair), var(--shadow-soft);

  --spring: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-press: 160ms;
  --t-hover: 500ms;
  --t-reveal: 1000ms;
}

:root:has(body.site) { color-scheme: light; }

body.site {
  background: var(--c-ground);
  color: var(--c-text);
  font-family: var(--font);
  font-size: var(--step-body);
  line-height: 1.55;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
body.site > main { flex: 1; }
body.site::after { display: none; }

.site h1, .site h2, .site h3 { color: var(--c-ink); font-weight: 700; letter-spacing: -0.03em; text-wrap: balance; }
.site h1, .site h2 { font-weight: 750; }
.site p { text-wrap: pretty; max-width: 62ch; }
.site strong { font-weight: 650; color: var(--c-ink); }
:where(.site) a { color: inherit; }
.site :focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; }
.site .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site .nums { font-variant-numeric: tabular-nums; }
.skip:not(:focus) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.skip:focus { position: fixed; top: 12px; left: 12px; z-index: 60; padding: 10px 18px; border-radius: 999px; background: var(--c-ink); color: #fff; font-weight: 600; }

/* the page's column; backgrounds belong to the section around it */
.wrap { width: 100%; max-width: calc(var(--measure) + 2 * var(--margin)); margin-inline: auto; padding-inline: var(--margin); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.display { font-size: var(--step-display); line-height: 0.92; letter-spacing: -0.055em; font-weight: 800; }
.head { font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.045em; }
.lead { font-size: var(--step-lead); line-height: 1.4; letter-spacing: -0.015em; }
.small { font-size: var(--step-small); line-height: 1.5; }
.muted { color: var(--c-muted); }

/* A section: the ground in one of two tones. The old colour names survive as those tones. */
.field { background: var(--field, var(--c-ground)); color: var(--c-text); }
.f-cloud, .f-sky, .f-yellow, .f-s4 { --field: var(--c-ground); }
.f-night, .f-deep, .f-zinc, .f-s1, .f-s2, .f-s3 { --field: var(--c-ground-2); }
.pad { padding-block: var(--section); }

/* every page opens under a soft overhead light, and clears the floating nav */
body.site > header {
  padding-top: 96px;
  background-color: var(--c-ground);
  background-image:
    radial-gradient(60rem 36rem at 72% -12rem, rgb(255 255 255 / 0.95), transparent 70%),
    radial-gradient(40rem 24rem at -8rem 0%, rgb(159 200 217 / 0.2), transparent 70%);
}

/* ---------- small pieces ---------- */

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; width: fit-content;
  padding: 6px 12px; border-radius: 999px;
  background: rgb(15 46 59 / 0.06); box-shadow: inset 0 0 0 1px var(--c-hair);
  font-size: var(--step-micro); font-weight: 500; line-height: 1.3; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--c-deep);
}
.eyebrow + h1, .eyebrow + h2 { margin-top: 24px; }

/* a floating card: the bezel on a white core */
.card {
  position: relative; border-radius: var(--r-core);
  background: var(--c-surface); box-shadow: var(--bezel);
  padding: clamp(24px, 3vw, 44px);
  transition: transform var(--t-hover) var(--spring), box-shadow var(--t-hover) var(--spring);
}
.card--ink { background: var(--c-ink); color: var(--c-paper); box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.12), 0 0 0 var(--tray) rgb(255 255 255 / 0.55), 0 0 0 calc(var(--tray) + 1px) var(--c-hair), var(--shadow-soft); }
.card--ink h2, .card--ink h3, .card--ink strong { color: #fff; }
.card--ink .eyebrow { background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12); color: var(--c-paper); }
@media (hover: hover) and (pointer: fine) {
  a.card:hover, .card--lift:hover { transform: translateY(-4px); }
}

/* a closing call to action: an ink island floating on the ground */
.closing { padding: clamp(40px, 7vw, 112px); }
.closing h2 { color: #fff; max-width: 12ch; }
.closing .lead { margin-top: 28px; max-width: 36ch; color: rgb(250 250 250 / 0.72); }
.closing .acts { margin-top: 44px; }

/* ---------- controls ---------- */

/* The action: an ink pill. Its arrow, when it has one, rides in a circle of its own. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  min-height: 3.25rem; padding: 0 1.6rem; border-radius: 999px;
  background: var(--c-ink); color: #fff;
  font-size: var(--step-small); font-weight: 600; letter-spacing: -0.005em; text-decoration: none; white-space: nowrap;
  box-shadow: 0 12px 28px -14px rgb(15 46 59 / 0.6);
  transition: transform var(--t-hover) var(--spring), box-shadow var(--t-hover) var(--spring), background-color var(--t-hover) var(--spring);
}
.btn:has(.btn__icon) { padding: 6px 6px 6px 1.5rem; }
.btn__icon {
  display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 999px;
  background: rgb(255 255 255 / 0.14); font-size: 1rem; line-height: 1;
  transition: transform var(--t-hover) var(--spring);
}
.btn:active { transform: scale(0.98); }
.btn--ink { background: var(--c-ink); color: #fff; }
.btn--paper { background: var(--c-surface); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-hair), 0 10px 24px -14px rgb(15 46 59 / 0.35); }
.btn--paper .btn__icon { background: rgb(15 46 59 / 0.06); }
.btn--yellow { background: var(--c-yellow); color: var(--c-ink); }
.btn--yellow .btn__icon { background: rgb(9 9 11 / 0.08); }
.btn--small { min-height: 2.75rem; padding: 0 1.15rem; }
.btn--small:has(.btn__icon) { padding: 4px 4px 4px 1.1rem; }
.btn--small .btn__icon { width: 2.125rem; height: 2.125rem; }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.25em; text-decoration-thickness: 1px; transition: text-decoration-color var(--t-hover) var(--spring), color var(--t-hover) var(--spring); }
.link-plain { text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; text-decoration-color: rgb(15 46 59 / 0.3); color: var(--c-ink); font-weight: 500; transition: text-decoration-color var(--t-hover) var(--spring); }
.card--ink .link-plain { color: #fff; text-decoration-color: rgb(255 255 255 / 0.4); }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { box-shadow: 0 18px 36px -16px rgb(15 46 59 / 0.7); }
  .btn:hover .btn__icon { transform: translate(3px, -1px) scale(1.05); }
  .btn--paper:hover { background: #fbfcfc; }
  .link:hover { text-decoration-color: currentColor; color: var(--c-ink); }
  .link-plain:hover { text-decoration-color: currentColor; }
}

/* ---------- the floating nav: a glass island, and a full-screen menu on phones ---------- */

.nav { position: fixed; top: 16px; left: 0; right: 0; z-index: 40; display: flex; justify-content: center; padding-inline: 12px; pointer-events: none; }
.island {
  pointer-events: auto;
  display: flex; align-items: center; gap: 28px; width: max-content; max-width: 100%;
  padding: 6px 6px 6px 18px; border-radius: 999px;
  background: rgb(255 255 255 / 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.9), 0 0 0 1px var(--c-hair), 0 12px 32px -16px rgb(15 46 59 / 0.3);
}
.wordmark { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.03em; text-decoration: none; color: var(--c-ink); }
.wordmark img { width: 26px; height: 26px; }
.island__links { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; font-size: var(--step-small); font-weight: 500; color: var(--c-muted); }
.island .btn { min-height: 2.5rem; }

.burger { display: none; position: relative; width: 2.75rem; height: 2.75rem; border-radius: 999px; background: var(--c-ink); }
.burger span { position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; border-radius: 2px; background: #fff; transition: transform var(--t-hover) var(--spring); }
.burger span:first-child { transform: translate(-50%, -4px); }
.burger span:last-child { transform: translate(-50%, 3px); }
.burger[aria-expanded="true"] span:first-child { transform: translate(-50%, -0.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child { transform: translate(-50%, -0.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 30; display: none;
  padding: 112px var(--margin) 40px;
  background: rgb(246 247 248 / 0.82);
  -webkit-backdrop-filter: blur(40px) saturate(1.4); backdrop-filter: blur(40px) saturate(1.4);
  opacity: 0; visibility: hidden;
  transition: opacity 600ms var(--spring), visibility 0s linear 600ms;
}
.menu.is-open { opacity: 1; visibility: visible; transition: opacity 600ms var(--spring), visibility 0s; }
.menu ol { list-style: none; margin: 0; padding: 0; }
.menu li { overflow: hidden; }
.menu li a {
  display: block; padding-block: 10px; text-decoration: none;
  font-size: clamp(2.25rem, 10vw, 3.25rem); font-weight: 750; letter-spacing: -0.045em; line-height: 1.05; color: var(--c-ink);
  transform: translateY(110%); opacity: 0;
  transition: transform 800ms var(--spring), opacity 800ms var(--spring);
  transition-delay: calc(var(--i, 0) * 50ms + 80ms);
}
.menu.is-open li a { transform: none; opacity: 1; }
.menu__foot { margin-top: 40px; }
.menu__foot .btn { width: 100%; justify-content: space-between; }

/* ---------- page opening ---------- */

.opening { padding-block: clamp(56px, 8vw, 120px) clamp(80px, 10vw, 144px); }
.opening h1 { max-width: 14ch; }
.opening__lead { margin-top: 28px; color: var(--c-muted); }
.opening .acts { margin-top: 40px; }
.opening--split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: center; }
.opening--split > .opening__text { grid-column: 1 / span 7; }
.opening--split > .opening__pic { grid-column: 8 / span 5; }

/* a split section: heading left, matter right */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 28px; }
.split > .split__head { grid-column: 1 / span 5; }
.split > .split__body { grid-column: 7 / span 6; }
.split .split__body > * + * { margin-top: 20px; }
.split__body > p:not(.lead) { color: var(--c-muted); }
.split__body ul { list-style: none; padding: 0; }
.split__body li + li { margin-top: 12px; }

/* pictures: the image is the core of a bezel */
.pic { margin: 0; }
.pic .frame { position: relative; overflow: hidden; border-radius: var(--r-core); background: var(--c-surface); box-shadow: var(--bezel); }
.pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pic figcaption { margin-top: 18px; font-size: var(--step-small); color: var(--c-muted); }
.pic--43 .frame { aspect-ratio: 4 / 3; }
.pic--wide .frame { aspect-ratio: 16 / 9; background: var(--c-night); }
.pic--natural .frame { background: var(--c-night); }
.pic--natural img { height: auto; }
/* a device cut out on its transparent ground, floating on a long soft shadow */
.cutout { margin: 0; }
.cutout img { display: block; width: 100%; height: auto; max-height: 76svh; object-fit: contain; filter: drop-shadow(0 40px 48px rgb(15 46 59 / 0.22)); }
.cutout--side img { margin-inline: auto; width: auto; }

/* ---------- code: a dark plate in a tray, the copy button beside it ---------- */

.code {
  position: relative; display: flex; align-items: stretch; gap: 6px; padding: var(--tray);
  border-radius: 1.5rem; background: var(--c-tray); box-shadow: inset 0 0 0 1px var(--c-hair), var(--shadow-soft);
}
.code pre {
  flex: 1; min-width: 0; margin: 0; padding: 18px 22px; overflow-x: auto;
  border-radius: calc(1.5rem - var(--tray)); background: var(--c-ink); color: #e9eef0;
  box-shadow: inset 0 1px 1px rgb(255 255 255 / 0.1);
  font-size: clamp(0.875rem, 0.82rem + 0.2vw, 1rem); line-height: 1.6;
}
.code pre[hidden] { display: none; }
.code code, .site code { font-family: var(--mono); }
.code .btn { align-self: center; min-height: 2.75rem; padding: 0 1.25rem; margin-inline: 6px; background: var(--c-surface); color: var(--c-ink); box-shadow: inset 0 0 0 1px var(--c-hair); }
.code-note { margin-top: 12px; font-size: var(--step-small); color: var(--c-muted); }
.site :not(pre) > code { font-size: 0.88em; padding: 0.12em 0.45em; border-radius: 6px; background: rgb(15 46 59 / 0.07); color: var(--c-deep); }

.os { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(15 46 59 / 0.06); box-shadow: inset 0 0 0 1px var(--c-hair); }
.os button { min-height: 40px; padding: 0 18px; border-radius: 999px; font-size: var(--step-small); font-weight: 500; color: var(--c-muted); transition: background-color var(--t-hover) var(--spring), color var(--t-hover) var(--spring), box-shadow var(--t-hover) var(--spring); }
.os button[aria-selected="true"] { background: var(--c-surface); color: var(--c-ink); box-shadow: 0 4px 12px -6px rgb(15 46 59 / 0.35); }

/* ---------- long-form reading (legal, release notes) ---------- */

.reading { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.reading__toc { grid-column: 1 / span 3; position: sticky; top: 104px; }
.reading__toc nav { padding: 24px; border-radius: 1.5rem; background: var(--c-tray); box-shadow: inset 0 0 0 1px var(--c-hair); }
.reading__toc h2 { font-size: var(--step-micro); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted); }
.reading__toc ol { list-style: none; margin: 16px 0 0; padding: 0; }
.reading__toc li + li { margin-top: 10px; }
.reading__toc a { font-size: var(--step-small); color: var(--c-muted); }
.prose { grid-column: 5 / span 8; }
.reading > .prose { border-radius: var(--r-core); background: var(--c-surface); box-shadow: var(--bezel); padding: clamp(28px, 4vw, 64px); }
.prose > section + section { margin-top: 56px; }
.prose h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; scroll-margin-top: 104px; }
.prose h2 + * { margin-top: 18px; }
.prose p + p, .prose p + ul, .prose ul + p { margin-top: 16px; }
.prose ul { padding-left: 1.2em; list-style: disc; }
.prose li + li { margin-top: 10px; }
.prose li::marker { color: var(--c-muted); }
.prose a { text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 1px; color: var(--c-ink); }
.prose > section > p > span:first-child { font-weight: 650; color: var(--c-ink); }
/* release-note sections: the matter floats in a card beside its heading */
.split > .split__body.prose { border-radius: var(--r-core); background: var(--c-surface); box-shadow: var(--bezel); padding: clamp(24px, 3vw, 44px); }
.split__body.prose ul.lead { padding-left: 1.1em; font-size: var(--step-body); }

/* ---------- steps: numbered cards, one per step ---------- */

.steps { list-style: none; margin: 0; padding: clamp(32px, 4vw, 56px) 0; counter-reset: step; }
.steps > li { counter-increment: step; padding-block: clamp(16px, 2vw, 28px); background: transparent; }
.steps > li > .split { width: calc(100% - 2 * var(--margin)); padding: clamp(28px, 4vw, 56px); border-radius: var(--r-core); background: var(--c-surface); box-shadow: var(--bezel); max-width: calc(var(--measure)); }
.steps h2 { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.5rem); line-height: 1; letter-spacing: -0.045em; }
.steps .split__head::before {
  content: "Step " counter(step);
  display: flex; width: fit-content; margin-bottom: 20px; padding: 6px 12px; border-radius: 999px;
  background: rgb(15 46 59 / 0.06); box-shadow: inset 0 0 0 1px var(--c-hair);
  font-size: var(--step-micro); font-weight: 500; line-height: 1.3; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-deep);
}
.choice { list-style: none; padding: 0; display: grid; gap: 12px; }
.split__body .choice li + li { margin-top: 0; }
.choice li { padding: 20px 24px; border-radius: 1.25rem; background: var(--c-ground-2); box-shadow: inset 0 0 0 1px var(--c-hair); font-size: var(--step-body); }
.choice strong { display: block; }

/* ---------- two cards side by side ---------- */

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); width: 100%; max-width: calc(var(--measure) + 2 * var(--margin)); margin-inline: auto; padding: var(--section) var(--margin); }
.pair > .field { display: flex; flex-direction: column; gap: 20px; border-radius: var(--r-core); background: var(--c-surface); box-shadow: var(--bezel); padding: clamp(24px, 3vw, 44px); }
.pair > .field > p { color: var(--c-muted); }
.pair h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); line-height: 1.05; letter-spacing: -0.04em; }
.pair .pic { margin-top: auto; }
.pair .pic .frame { box-shadow: inset 0 0 0 1px var(--c-hair); border-radius: 1.25rem; }

/* ---------- index with preview: rows of type, one floating frame ---------- */

.index { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.index__list { grid-column: 1 / span 7; list-style: none; margin: 0; padding: 0; }
.index__row { padding: 24px 28px; border-radius: 1.5rem; transition: background-color var(--t-hover) var(--spring), box-shadow var(--t-hover) var(--spring), opacity var(--t-hover) var(--spring); }
.index__row:hover, .index__row:focus-visible { background: var(--c-surface); box-shadow: var(--bezel); outline: none; }
.index__row h3 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.75rem); line-height: 1; letter-spacing: -0.045em; }
.index__row p { margin-top: 12px; max-width: 48ch; color: var(--c-muted); }
.index__frame { grid-column: 9 / span 4; position: sticky; top: 14vh; align-self: start; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-core); background: var(--c-surface); box-shadow: var(--bezel); }
.index__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 700ms var(--spring), transform 900ms var(--spring); }
.index__frame img.is-on { opacity: 1; transform: none; }
.index__credit { position: absolute; right: 12px; bottom: 12px; z-index: 1; padding: 3px 10px; border-radius: 999px; background: rgb(255 255 255 / 0.8); color: var(--c-text); font-size: 12px; }
@media (hover: hover) and (pointer: fine) {
  .index__list:hover .index__row:not(:hover) { opacity: 0.5; }
}

/* ---------- release rows ---------- */

.release { padding-block: clamp(14px, 2vw, 24px); background: transparent; }
.release:first-child { padding-top: var(--section); }
.release:last-child { padding-bottom: var(--section); }
.release > .split { width: calc(100% - 2 * var(--margin)); align-items: center; padding: clamp(24px, 3.5vw, 48px); border-radius: var(--r-core); background: var(--c-surface); box-shadow: var(--bezel); max-width: var(--measure); }
.release .split__head .lead { font-size: var(--step-body); font-weight: 600; color: var(--c-ink); }
.release .split__head p.nums { display: inline-flex; margin-top: 10px; padding: 6px 12px; border-radius: 999px; background: rgb(15 46 59 / 0.06); box-shadow: inset 0 0 0 1px var(--c-hair); font-size: var(--step-micro); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-deep); }
.release h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); line-height: 1.05; letter-spacing: -0.04em; }
.release .split__body > p:first-of-type { margin-top: 14px; }
.release-nav { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* ---------- footer: an ink island, then the map of the site ---------- */

.foot { background: var(--c-ground); color: var(--c-text); padding: clamp(64px, 8vw, 112px) 0 32px; }
.foot__inner { width: 100%; max-width: calc(var(--measure) + 2 * var(--margin)); margin-inline: auto; padding-inline: var(--margin); }
.foot__cta { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; row-gap: 32px; padding: clamp(32px, 5vw, 72px); }
.foot__cta-text { grid-column: 1 / span 7; }
/* a page that ends on its own call to action doesn't get a second one */
body:has(.closing, .g-end) .foot__cta { display: none; }
body:has(.closing, .g-end) .foot__cols { margin-top: 0; }
.foot__cta h2 { font-size: var(--step-head); line-height: 0.98; letter-spacing: -0.045em; }
.foot__cta-act { grid-column: 9 / span 4; justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; text-align: right; }
.foot__cta-act p { color: rgb(250 250 250 / 0.7); }
.foot__cols { margin-top: clamp(56px, 7vw, 96px); row-gap: 32px; }
.foot__brand { grid-column: 1 / span 4; }
.foot__brand p { margin-top: 14px; max-width: 30ch; color: var(--c-muted); }
.foot__col { grid-column: span 2; }
.foot__col:first-of-type { grid-column: 5 / span 2; }
.foot__col h2 { font-size: var(--step-micro); font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-muted); }
.foot__col ul { list-style: none; margin: 16px 0 0; padding: 0; }
.foot__col li + li { margin-top: 8px; }
.foot__col a { font-size: var(--step-small); color: var(--c-text); }
.foot__credits { margin-top: 56px; max-width: 80ch; font-size: 0.8125rem; color: var(--c-muted); }
.foot__last { margin-top: 24px; padding-top: 24px; box-shadow: inset 0 1px 0 var(--c-hair); display: flex; justify-content: space-between; align-items: center; gap: 16px; color: var(--c-muted); }

/* ---------- motion: heavy, springy, never instant ---------- */

@media (prefers-reduced-motion: no-preference) {
  .js [data-rise], .js .lines [data-line] { opacity: 0; transform: translateY(40px); filter: blur(8px); animation: rise var(--t-reveal) var(--spring) forwards; animation-delay: calc(var(--i, 0) * 90ms + 120ms); }
  .js .lines [data-line] { display: inline-block; }
  .js [data-reveal] { opacity: 0; transform: translateY(64px); transition: opacity 900ms var(--spring), transform var(--t-reveal) var(--spring); transition-delay: calc(var(--i, 0) * 90ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-rise], .js .lines [data-line], .js [data-reveal] { opacity: 1; transform: none; filter: none; animation: none; transition: none; }
  .menu, .menu li a, .burger span, .btn, .btn__icon, .card { transition: none; }
}
.lines .line { display: block; }
@keyframes rise { to { opacity: 1; transform: none; filter: none; } }

/* ---------- tablet ---------- */

@media (max-width: 1080px) {
  .split > .split__head { grid-column: 1 / span 12; }
  .split > .split__body { grid-column: 1 / span 12; margin-top: 8px; }
  .opening--split > .opening__text { grid-column: 1 / span 12; }
  .opening--split > .opening__pic { grid-column: 1 / span 8; margin-top: 56px; }
  .foot__cta-text { grid-column: 1 / -1; }
  .foot__cta-act { grid-column: 1 / -1; justify-self: start; align-items: flex-start; text-align: left; }
  .foot__brand { grid-column: 1 / -1; }
  .foot__col, .foot__col:first-of-type { grid-column: span 3; }
  .reading__toc { grid-column: 1 / span 4; }
  .prose { grid-column: 5 / span 8; }
}

/* ---------- phone: one column, w-full, px-4 ---------- */

@media (max-width: 767px) {
  .nav { top: 12px; }
  .island { width: 100%; justify-content: space-between; gap: 12px; padding-left: 16px; }
  .island__links, .island > .btn { display: none; }
  .burger { display: block; }
  .menu { display: block; }
  html:not(.js) .island__links { display: flex; gap: 14px; }
  html:not(.js) .burger { display: none; }

  body.site > header { padding-top: 80px; }
  .opening { padding-block: 32px 72px; }
  .opening--split, .split, .reading { display: block; }
  .opening--split > .opening__pic { margin-top: 48px; }
  .opening .acts .btn { width: 100%; justify-content: space-between; }
  .opening .acts .btn:not(:has(.btn__icon)) { justify-content: center; }
  .split__body { margin-top: 24px; }
  .reading__toc { position: static; margin-bottom: 32px; }

  .code { flex-direction: column; }
  .code .btn { align-self: stretch; margin: 0; }
  .code pre { padding: 16px; }
  [data-install] code { white-space: pre-wrap; word-break: break-all; }

  .pair { grid-template-columns: 1fr; }
  .index { display: block; }
  .index__frame { position: relative; top: 0; margin-bottom: 32px; aspect-ratio: 4 / 3; }
  .index__row { padding: 20px 4px; }
  .index__row:hover, .index__row:focus-visible { padding-inline: 20px; }

  .foot__cta { display: block; }
  .foot__cta-act { margin-top: 28px; }
  .foot__cta-act .btn { width: 100%; justify-content: space-between; }
  .foot__col, .foot__col:first-of-type { grid-column: span 6; }
  .foot__last { flex-direction: column; align-items: flex-start; }
}