/* gpdev.in documentation: the portfolio's paper & ink, one acid-lime marker (see src/styles/site.css).
   One stylesheet for every project's docs; the pages are generated by scripts/build-docs.mjs. */

@font-face { font-family: "Clash Display"; src: url("/fonts/clash-display-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Clash Display"; src: url("/fonts/clash-display-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Satoshi"; src: url("/fonts/satoshi-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-italic.woff2") format("woff2"); font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --paper: #eeebe4;
  --paper-2: #e4e0d7;
  --paper-3: #f6f4ef;
  --ink: #0e0e0c;
  --ink-2: #57544e;
  --ink-3: #635f58;
  --line: rgba(14, 14, 12, 0.16);
  --lime: #cfff2e;
  --night: #0e0e0c;
  --night-ink: #eeebe4;
  --night-2: #a7a39b;
  --night-line: rgba(238, 235, 228, 0.16);
  --display: "Clash Display", "Satoshi", system-ui, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --body: "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --pad: clamp(16px, 4vw, 56px);
  --bar: 64px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  color-scheme: light;
}

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

/* page transitions with the portfolio (same origin; opted in by an inline style in each page's head, which the
   browser reads before this file arrives): the project's name carries over from its row into the title here,
   while the page you leave opens up and fades (the shards of the stone, when it shattered into it) */
::view-transition-group(*) { animation-duration: 0.7s; animation-timing-function: var(--ease); }
::view-transition-old(root) { animation: 0.6s cubic-bezier(0.5, 0, 0.75, 0) both vt-open; }
::view-transition-new(root) { animation: 0.5s var(--ease) 0.1s both vt-in; }
@keyframes vt-open { to { opacity: 0; transform: scale(1.12); } }
@keyframes vt-in { from { opacity: 0; } }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--bar) + 24px); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
/* paper grain, as on the portfolio */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 200; pointer-events: none; opacity: 0.08; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
h1, h2, h3, h4, h5, h6, p, dl, dd, figure, blockquote { margin: 0; }
a { color: inherit; }
em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
::selection { background: var(--lime); color: var(--ink); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
button { font: inherit; color: inherit; }
.mono { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 300; background: var(--ink); color: var(--paper); padding: 10px 16px; }
.skip:focus { top: 12px; }

/* ---------- the bar ---------- */
.bar {
  position: sticky; top: 0; z-index: 50; height: var(--bar);
  display: flex; align-items: center; gap: 24px; padding: 0 var(--pad);
  background: rgba(238, 235, 228, 0.88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.bar-mark { font: 700 24px/1 var(--display); letter-spacing: -0.03em; text-decoration: none; }
.bar-mark i { font-family: var(--serif); font-weight: 400; }
.bar-where { display: flex; gap: 10px; min-width: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-where a { color: var(--ink-3); text-decoration: none; }
.bar-where a:hover { color: var(--ink); }
.bar-where span { color: var(--ink-3); }
.bar-cta { margin-left: auto; flex: none; font: 500 14px/1 var(--body); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.bar-cta::before { content: "← "; }
.bar-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; overflow: hidden; }
.bar-progress i { display: block; height: 100%; background: var(--ink); transform-origin: 0 50%; transform: scaleX(var(--read, 0)); }
@media (max-width: 560px) { .bar-where a, .bar-where span { display: none; } .bar-cta { font-size: 13px; } }

/* ---------- the project, as the portfolio introduces a section ---------- */
.hero { display: grid; gap: 18px; padding: clamp(56px, 9vw, 136px) var(--pad) clamp(36px, 5vw, 64px); }
.hero-num { color: var(--ink-3); }
.hero-title { font: 600 clamp(64px, 12.5vw, 210px)/0.84 var(--display); letter-spacing: -0.045em; overflow-wrap: anywhere; }
.hero-title em { font-size: 1.04em; padding-right: 0.04em; }
.hero-side { display: grid; gap: 18px; max-width: 48ch; }
.hero-note { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.45; color: var(--ink-2); }
.hero-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 0 28px;
  margin-top: clamp(20px, 3vw, 40px); border-top: 1px solid var(--ink);
}
.hero-meta div { padding-top: 14px; }
.hero-meta dt { color: var(--ink-3); }
.hero-meta dd { margin-top: 8px; font-size: 15px; line-height: 1.5; }
.hero-meta dd span { color: var(--ink-3); }
.hero-meta a { font-weight: 500; text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.45s var(--ease); }
.hero-meta a:hover { background-size: 100% 1px; }
@media (min-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 40ch); column-gap: 56px; align-items: end; }
  .hero-num, .hero-title { grid-column: 1; }
  .hero-side { grid-column: 2; grid-row: 2; padding-bottom: 0.9em; }
  .hero-meta { grid-column: 1 / -1; }
}

/* tags: status, honest (as on the portfolio) */
.tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 3px;
  border: 1px solid currentColor; border-radius: 999px;
  font: 400 11px/1.2 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
.tag-live { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.tag-dev::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; }
.tag-ghost { border-style: dashed; opacity: 0.75; }

/* ---------- contents + the page ---------- */
.docs { display: grid; padding: 0 var(--pad); border-top: 1px solid var(--line); }
@media (min-width: 1000px) {
  .docs { grid-template-columns: 250px minmax(0, 1fr); column-gap: clamp(40px, 6vw, 110px); }
}
.toc-in { padding: 34px 0 40px; }
@media (min-width: 1000px) {
  .toc-in {
    position: sticky; top: var(--bar); max-height: calc(100vh - var(--bar)); overflow: auto;
    scrollbar-width: thin; scrollbar-color: var(--line) transparent; overscroll-behavior: contain;
  }
}
.search {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 44px;
  padding: 0 8px 0 18px; border: 1px solid var(--ink); border-radius: 999px; background: none;
  font: 500 14px/1 var(--body); color: var(--ink-2); cursor: pointer; transition: background-color 0.3s, color 0.3s;
}
.search:hover { background: var(--ink); color: var(--paper); }
.search:hover kbd { border-color: var(--night-line); color: var(--night-2); }
kbd {
  display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px;
  border: 1px solid var(--line); border-radius: 999px; font: 400 11px/1 var(--mono); color: var(--ink-3);
}
.toc-group { margin-top: 30px; }
.toc-cat { display: flex; gap: 10px; margin-bottom: 10px; color: var(--ink-3); }
.toc-cat span { color: var(--ink); }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc li a {
  display: block; margin-left: -1px; padding: 6px 0 6px 16px; border-left: 2px solid transparent;
  font-size: 15px; line-height: 1.35; color: var(--ink-2); text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.toc li a:hover { color: var(--ink); }
.toc li a[aria-current="true"] { color: var(--ink); border-left-color: var(--ink); font-weight: 500; }
.toc-open { display: none; }
/* phones and tablets: the contents open as a sheet */
@media (max-width: 999px) {
  /* a corner button, out of the text's way and under the thumb */
  .toc-open {
    position: fixed; right: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 61;
    display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px;
    border: 1px solid var(--ink); border-radius: 999px; background: var(--ink); color: var(--paper); cursor: pointer;
    font: 500 14px/1 var(--body); box-shadow: 0 0 0 1px rgba(238, 235, 228, 0.55), 0 14px 30px -14px rgba(14, 14, 12, 0.6);
  }
  .toc {
    position: fixed; inset: 0; z-index: 60; overflow: auto; background: var(--paper);
    padding: 24px var(--pad) 96px;
    visibility: hidden; transform: translateY(24px); opacity: 0;
    transition: transform 0.45s var(--ease), opacity 0.3s, visibility 0s linear 0.45s;
  }
  .toc-is-open .toc { visibility: visible; transform: none; opacity: 1; transition: transform 0.45s var(--ease), opacity 0.3s; }
  .toc-is-open, .toc-is-open body { overflow: hidden; }
  .toc-is-open .toc-open span { transform: rotate(45deg); }
  .toc-open span { display: inline-block; transition: transform 0.3s var(--ease); }
}

/* a screen tall before the markdown arrives, so the footer never shows and then jumps away */
.doc { min-width: 0; max-width: 1060px; min-height: 100vh; padding: 34px 0 clamp(72px, 9vw, 140px); outline: none; }
.doc-wait { color: var(--ink-3); padding-top: 8px; }
.page + .page { margin-top: clamp(72px, 9vw, 132px); }
.page-head { display: grid; gap: 14px; padding-top: 18px; margin-bottom: 30px; border-top: 1px solid var(--ink); }
.page-num { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; color: var(--ink-3); }
.page-num b { font-weight: 400; color: var(--ink); }
.page-title { font: 600 clamp(38px, 4.8vw, 68px)/0.98 var(--display); letter-spacing: -0.032em; }

/* ---------- the markdown ---------- */
.md > * + * { margin-top: 1.05em; }
.md > .code, .md > .diagram, .md > .table, .md > blockquote, .md > details { margin-block: 1.6em; }
/* prose keeps a reading measure; code, diagrams and tables take the whole column */
.md > :not(.code):not(.diagram):not(.table):not(hr) { max-width: 70ch; }
.md p, .md ul, .md ol { max-width: 70ch; }
.md [align] { text-align: inherit; } /* READMEs centre their intros; here everything reads from the left */
.md h3, .md h4, .md h5, .md h6 { position: relative; scroll-margin-top: calc(var(--bar) + 24px); }
.md h3 { font: 600 clamp(25px, 2.4vw, 31px)/1.1 var(--display); letter-spacing: -0.02em; margin-top: 2.1em; }
.md h4 { font: 600 20px/1.25 var(--display); letter-spacing: -0.01em; margin-top: 1.8em; }
.md h5, .md h6 { font: 400 12px/1.4 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); margin-top: 1.8em; }
.md h3 + *, .md h4 + *, .md h5 + *, .md h6 + * { margin-top: 0.7em; }
.anchor { position: absolute; right: 100%; padding-right: 0.3em; color: var(--ink-3); text-decoration: none; opacity: 0; transition: opacity 0.2s; font-family: var(--mono); font-weight: 400; }
.md h3:hover .anchor, .md h4:hover .anchor, .anchor:focus-visible { opacity: 1; }
.md a:not(.anchor) {
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(14, 14, 12, 0.35); transition: background-color 0.2s, text-decoration-color 0.2s;
}
.md a:not(.anchor):hover { background: var(--lime); text-decoration-color: var(--ink); }
.md strong { font-weight: 500; }
.md em { font-size: 1.08em; }
.md :not(pre) > code {
  font: 0.84em/1 var(--mono); background: var(--paper-2); padding: 0.2em 0.42em; border-radius: 6px;
  overflow-wrap: anywhere;
}
.md ul { list-style: none; padding: 0; }
.md ul > li { position: relative; padding-left: 22px; }
.md ul > li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 10px; height: 1px; background: currentColor; }
.md ol { padding-left: 1.6em; }
.md ol > li::marker { font: 12px var(--mono); color: var(--ink-3); }
.md li + li, .md li > ul, .md li > ol { margin-top: 0.45em; }
.md li > p + p { margin-top: 0.6em; }
.md ul > li:has(> input[type="checkbox"]) { padding-left: 28px; }
.md ul > li:has(> input[type="checkbox"])::before { display: none; }
.md li > input[type="checkbox"] {
  position: absolute; left: 0; top: 0.3em; width: 15px; height: 15px; margin: 0;
  appearance: none; -webkit-appearance: none; border: 1px solid var(--ink); border-radius: 4px; background: none;
}
.md li > input[type="checkbox"]:checked {
  background: var(--lime) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 8.5l3 3 6-7' fill='none' stroke='%230e0e0c' stroke-width='2'/></svg>") center / 12px no-repeat;
}
.md blockquote {
  padding: 18px 22px; background: var(--paper-2); border-left: 3px solid var(--ink); border-radius: 0 14px 14px 0; color: var(--ink-2);
}
.md blockquote > * + * { margin-top: 0.7em; }
.md blockquote p { max-width: none; }
.md hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.md img { max-width: 100%; height: auto; border-radius: 12px; vertical-align: middle; }
.md details { border: 1px solid var(--line); border-radius: 14px; padding: 14px 18px; }
.md summary { cursor: pointer; font-weight: 500; }
/* shields.io badges become the portfolio's tags */
.md p:has(> .badge, > a > .badge) { display: flex; flex-wrap: wrap; gap: 6px; }
.md p:has(> .badge, > a > .badge) > br { display: none; }
.badge {
  display: inline-flex; gap: 6px; padding: 4px 10px 3px; border: 1px solid var(--line); border-radius: 999px;
  font: 400 11px/1.2 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.badge b { font-weight: 400; color: var(--ink); }
.md a:has(> .badge) { text-decoration: none; }
.md a:has(> .badge):hover { background: none; }
.md a:has(> .badge):hover .badge { border-color: var(--ink); }

/* tables: hairlines and mono heads */
.table { overflow-x: auto; border-top: 1px solid var(--ink); }
.md table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.md th {
  padding: 12px 18px 10px 0; text-align: left; vertical-align: bottom; border-bottom: 1px solid var(--line);
  font: 400 11px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3);
}
.md td { padding: 12px 18px 12px 0; vertical-align: top; border-bottom: 1px solid var(--line); }
.md td:first-child { font-weight: 500; }
.md td code { white-space: nowrap; }

/* code: a night card, as the portfolio's dark sections */
.code { background: var(--night); color: var(--night-ink); border-radius: 16px; overflow: hidden; }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 8px 8px 18px; border-bottom: 1px solid var(--night-line); color: var(--night-2); }
.code-copy {
  height: 30px; padding: 0 14px; border: 1px solid var(--night-line); border-radius: 999px; background: none; cursor: pointer;
  font: 400 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--night-ink);
  transition: background-color 0.25s, color 0.25s, border-color 0.25s;
}
.code-copy:hover, .code-copy.done { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.code pre { margin: 0; padding: 18px 20px 20px; overflow-x: auto; font: 13.5px/1.7 var(--mono); tab-size: 2; scrollbar-width: thin; scrollbar-color: var(--night-line) transparent; }
.code code { font: inherit; }
.token.comment, .token.prolog, .token.doctype, .token.cdata { color: #8d897f; font-style: italic; }
.token.punctuation { color: #bfbbb2; }
.token.keyword, .token.atrule, .token.important, .token.rule, .token.inserted { color: var(--lime); }
.token.string, .token.char, .token.attr-value, .token.regex, .token.template-string { color: #ead190; }
.token.function, .token.class-name, .token.builtin { color: #a6d3ff; }
.token.number, .token.boolean, .token.constant, .token.symbol { color: #ffb48c; }
.token.property, .token.tag, .token.selector, .token.attr-name, .token.key { color: #cdbcff; }
.token.operator, .token.entity, .token.url, .token.variable { color: #e8e5dd; }
.token.deleted { color: #ff9a9a; }

/* diagrams: paper cards with a figure caption, as the portfolio captions its objects */
.diagram { padding: clamp(16px, 2.4vw, 28px); background: var(--paper-3); border: 1px solid var(--line); border-radius: 16px; }
/* drawn at their own size: centred when they fit, scrolled sideways when they don't (start-aligned then) */
.diagram .mermaid { overflow-x: auto; text-align: center; color: transparent; min-height: 60px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.diagram .mermaid[data-processed] { color: inherit; }
.diagram svg { display: inline-block; height: auto; vertical-align: top; }
.diagram figcaption { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-3); }
.diagram.failed .mermaid { color: var(--ink-2); white-space: pre-wrap; text-align: left; font: 13px/1.6 var(--mono); }

/* previous / next (docs read a page at a time) */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: clamp(56px, 7vw, 96px); padding-top: 18px; border-top: 1px solid var(--ink); }
.pager a {
  display: grid; gap: 8px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 16px; text-decoration: none;
  transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.pager a:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.pager a:hover span { color: var(--night-2); }
.pager span { color: var(--ink-3); }
.pager b { font: 600 clamp(18px, 1.8vw, 24px)/1.15 var(--display); letter-spacing: -0.015em; }
.pager .next { grid-column: 2; text-align: right; }
@media (max-width: 560px) { .pager { grid-template-columns: 1fr; } .pager .next { grid-column: 1; } }

/* ---------- search ---------- */
.found {
  position: fixed; inset: 0; z-index: 80; display: grid; align-items: start; justify-items: center;
  padding: max(10vh, 72px) var(--pad) 32px; background: rgba(14, 14, 12, 0.3);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.found[hidden] { display: none; }
.found-card {
  width: min(720px, 100%); max-height: min(72vh, 760px); display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--ink); border-radius: 20px; box-shadow: 0 40px 90px -40px rgba(14, 14, 12, 0.6);
}
.found-field { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 22px; border-bottom: 1px solid var(--line); }
.found-field input { flex: 1; min-width: 0; height: 48px; border: 0; background: none; outline: none; font: 500 19px/1 var(--body); color: var(--ink); }
.found-field input::placeholder { color: var(--ink-3); }
.found-field input::-webkit-search-cancel-button { display: none; }
.found-close { height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: none; cursor: pointer; font: 400 11px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.found-close:hover { border-color: var(--ink); color: var(--ink); }
.found-count { padding: 12px 22px 0; color: var(--ink-3); }
.found-count:empty { display: none; }
.found-list { list-style: none; margin: 0; padding: 8px; overflow: auto; }
.found-list a { display: grid; gap: 6px; padding: 14px; border-radius: 12px; text-decoration: none; }
.found-list a:hover, .found-list a[aria-selected="true"] { background: var(--paper-2); }
.found-top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.found-top b { font: 600 18px/1.2 var(--display); letter-spacing: -0.01em; }
.found-top span { flex: none; color: var(--ink-3); }
.found-snip { font-size: 14px; line-height: 1.5; color: var(--ink-2); }
mark { background: var(--lime); color: var(--ink); padding: 0 0.12em; border-radius: 2px; }

/* ---------- the footer: night, like the portfolio's ---------- */
.foot { background: var(--night); color: var(--night-ink); padding: clamp(48px, 7vw, 96px) var(--pad) 28px; border-radius: 24px 24px 0 0; }
.foot-label { color: var(--night-2); }
.foot-more { list-style: none; margin: 18px 0 0; padding: 0; border-top: 1px solid var(--night-line); }
.foot-more a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: baseline; gap: 20px;
  padding: 18px 0; border-bottom: 1px solid var(--night-line); text-decoration: none;
}
.foot-more b { font: 600 clamp(28px, 4.4vw, 60px)/1 var(--display); letter-spacing: -0.03em; transition: color 0.3s; }
.foot-more span { font: 400 12px/1 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--night-2); }
.foot-more i { font-style: normal; font-size: 22px; transition: transform 0.4s var(--ease), color 0.3s; }
.foot-more a:hover b, .foot-more a:hover i { color: var(--lime); }
.foot-more a:hover i { transform: translate(4px, -4px); }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px; margin-top: clamp(48px, 7vw, 96px); color: var(--night-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
.foot-row a { color: var(--night-ink); text-decoration: none; }
.foot-row a:hover { color: var(--lime); }
@media (max-width: 560px) { .foot-more span { display: none; } }

/* ---------- the cursor (mouse and trackpad), as on the portfolio ---------- */
.cursor { display: none; }
@media (pointer: fine) {
  .cursor {
    display: block; position: fixed; left: 0; top: 0; z-index: 250; pointer-events: none;
    width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: #fff; mix-blend-mode: difference;
    opacity: 0; transition: width 0.35s var(--ease), height 0.35s var(--ease), margin 0.35s var(--ease), opacity 0.3s;
  }
  .cursor.on { opacity: 1; }
  .cursor.big { width: 44px; height: 44px; margin: -22px 0 0 -22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .cursor { display: none; }
}
@media print {
  .bar, .toc, .toc-open, .foot, .cursor, .code-copy { display: none !important; }
  .docs { display: block; }
  body::after { display: none; }
}