/**
 * site.css
 * All the styles for kinderforce.org: one dark design, whatever the
 * visitor's system asks for. The surfaces are near-blacks tinted toward the
 * logo's magenta, lit by soft glows in the logo's colours; headings and
 * labels are set in Saira Semi Condensed and everything else in Instrument
 * Sans, both self-hosted (see src/lib/fonts.mjs). Cards and chips have
 * hairline borders, and their corners are cut on the diagonal, like the
 * logo's circuitry, in browsers that support `corner-shape`; elsewhere
 * they're rounded.
 *
 * Everything that moves is in the "Motion" section at the end, inside
 * `prefers-reduced-motion: no-preference`, so visitors who ask for reduced
 * motion get a still page. Scroll-linked effects are also behind
 * `@supports`, so browsers without them simply show the content.
 *
 * Created: 2026-11-04
 * Last modified: 2026-11-04
 */

/* ---------- Fonts ---------- */

/* The Latin subset of each, as published by @fontsource under the SIL Open
   Font License (see /assets/fonts/LICENSE-*.txt). Characters outside it
   fall back to the system font. */
@font-face {
  font-family: "Saira Semi Condensed";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/saira-semi-condensed-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Instrument Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/instrument-sans-latin-wght-italic.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Tokens ---------- */

@property --border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  color-scheme: dark;

  --gap: 24px;
  --content-gap: 22px;
  --nav-width: 1120px;
  --main-width: 720px;
  --radius: 12px;
  --radius-small: 7px;

  /* Surfaces: near-blacks with a wine tint, darkest at the hero */
  --night: #050407;
  --ground: #0c0710;
  --ground-deep: #08050b;
  --surface: #140c18;
  --surface-raised: #1c1222;
  --line: #2a1b30;
  --line-strong: #44304c;

  /* Text, with contrast on --surface of 17.7:1, 12.9:1 and 7.1:1 */
  --text-strong: #fbf4f8;
  --text: #ddd0d8;
  --text-muted: #ab98a5;

  /* The logo's own colours */
  --magenta: #d5066b;
  --lime: #aadc05;
  --cyan: #16a7ce;

  /* Accents as text: the magenta lightened to 6.8:1 on --surface, and
     the cyan lightened to match */
  --pink: #ff5fa2;
  --sky: #46c9ee;
  --code-text: #ffc6de;

  /* Cards: a hairline border, a faint lift at the top edge and a little
     magenta light held inside */
  --card-background: linear-gradient(180deg, #1a1020, #120b16);
  --card-shadow:
    inset 0 1px 0 rgba(255, 214, 236, 0.06),
    inset 0 0 48px rgba(213, 6, 107, 0.05),
    0 18px 40px rgba(0, 0, 0, 0.32);
  --card-shadow-hover:
    inset 0 1px 0 rgba(255, 214, 236, 0.08),
    inset 0 0 56px rgba(213, 6, 107, 0.1),
    0 22px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 95, 162, 0.18);

  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
  --font-display: "Saira Semi Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-code: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--ground);
}

/* A wash of magenta light from the top right of every page */
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background:
    radial-gradient(1100px 620px at 92% -240px, rgba(213, 6, 107, 0.17), transparent 70%),
    radial-gradient(760px 480px at -12% -140px, rgba(22, 167, 206, 0.06), transparent 70%),
    var(--ground);
  background-repeat: no-repeat;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Decorations that reach past the content column are cut off at the
   window's edge, rather than widening the page. */
main {
  flex: 1;
  overflow-x: clip;
}

h1,
h2,
h3,
h4 {
  color: var(--text-strong);
  line-height: 1.2;
}

h1,
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.005em;
  text-wrap: balance;
}

h3,
h4 {
  font-weight: 650;
}

strong {
  color: var(--text-strong);
  font-weight: 650;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

code,
pre {
  font-family: var(--font-code);
}

::selection {
  background: var(--magenta);
  color: #fff;
}

:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 3px;
}

/* Anchored headings and sections clear the sticky header. */
[id] {
  scroll-margin-top: 96px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--nav-width) + var(--gap) * 2);
  margin: 0 auto;
  padding: 0 var(--gap);
}

.wrap--prose {
  max-width: calc(var(--main-width) + var(--gap) * 2);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gap);
  z-index: 50;
  padding: 10px 18px;
  border-radius: var(--radius-small);
  background: var(--lime);
  color: var(--night);
  font-size: 16px;
  font-weight: 650;
}

.skip-link:focus {
  top: 10px;
}

.icon {
  width: 24px;
  height: 24px;
  flex: none;
}

/* ---------- Header ---------- */

.site-header {
  position: relative;
  z-index: 20;
  border-bottom: 1px solid rgba(68, 48, 76, 0.55);
  background: rgba(12, 7, 16, 0.8);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 28px;
  min-height: 68px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
}

/* The mark sits on the logo's own near-black; lighten lets the header
   show through it, so it has no visible box. */
.brand__mark,
.site-footer__mark {
  mix-blend-mode: lighten;
}

.brand__mark {
  width: 45px;
  height: 30px;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav a {
  position: relative;
  display: inline-block;
  padding: 10px 0;
  color: var(--text);
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s;
}

.site-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 4px;
  left: 0;
  height: 2px;
  background: var(--line-strong);
  transform: scaleX(0);
}

.site-nav a:hover {
  color: var(--text-strong);
}

.site-nav a:hover::after {
  transform: scaleX(1);
}

.site-nav a[aria-current="page"] {
  color: var(--text-strong);
  font-weight: 650;
}

.site-nav a[aria-current="page"]::after {
  background: linear-gradient(90deg, var(--magenta) 70%, var(--lime) 70%);
  transform: scaleX(1);
}

/* ---------- Footer ---------- */

.site-footer {
  margin-top: 112px;
  padding: 32px 0;
  border-top: 1px solid var(--line);
  background: var(--ground-deep);
  color: var(--text-muted);
  font-size: 15px;
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
}

.site-footer p {
  margin: 0;
}

.site-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.site-footer__mark {
  width: 36px;
  height: 24px;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer a {
  display: inline-block;
  padding: 4px 0;
  color: var(--text-muted);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.site-footer a:hover {
  color: var(--pink);
  text-decoration-color: currentColor;
}

/* ---------- Shared pieces ---------- */

/* A small label over a heading. Its rule is a short trace ending in a
   lime pad, like the circuitry around the logo. */
.kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  color: var(--pink);
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.3;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  flex: none;
  width: 34px;
  height: 6px;
  background:
    linear-gradient(currentColor, currentColor) 0 50% / 24px 2px no-repeat,
    linear-gradient(var(--lime), var(--lime)) 100% 50% / 6px 6px no-repeat;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border: 1px solid #ec2c86;
  border-radius: var(--radius-small);
  background: var(--magenta);
  color: #fff;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(213, 6, 107, 0.28);
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.button:hover {
  border-color: var(--pink);
  background: #b8055c;
  box-shadow: 0 14px 38px rgba(213, 6, 107, 0.45), 0 0 0 4px rgba(213, 6, 107, 0.16);
}

.button__icon {
  width: 18px;
  height: 18px;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  color: var(--text-muted);
  font-size: 15px;
}

.breadcrumbs li:not(:last-child)::after {
  content: "/";
  margin: 0 10px;
  color: var(--line-strong);
}

.breadcrumbs a {
  color: var(--text-muted);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
}

.breadcrumbs a:hover {
  color: var(--pink);
  text-decoration-color: currentColor;
}

/* The top of every inner page. It's its own stacking context, so the
   circuit traces sit behind its text. */
.page-heading {
  position: relative;
  isolation: isolate;
  padding: 80px 0 40px;
}

.page-heading h1 {
  margin: 0;
  font-size: clamp(46px, 7vw, 80px);
  line-height: 1;
  letter-spacing: -0.012em;
}

.page-heading .lede {
  max-width: 34em;
  margin: 20px 0 0;
  color: var(--text);
  font-size: 21px;
  line-height: 1.55;
}

.page-heading .lede a {
  color: var(--text-strong);
  text-decoration-color: var(--pink);
  text-underline-offset: 4px;
}

.page-heading .lede a:hover {
  color: var(--pink);
}

/* Positioned, so the visually hidden text in its cells is clipped with
   the rest of the table rather than widening the page. */
.table-scroll {
  position: relative;
  max-width: 100%;
  margin: 0 0 var(--content-gap);
  overflow-x: auto;
  scrollbar-color: var(--line-strong) transparent;
}

/* ---------- Circuit traces ---------- */

.circuit {
  overflow: visible;
  pointer-events: none;
}

.circuit__trace--magenta {
  color: #e8217f;
}

.circuit__trace--cyan {
  color: #22b4dc;
}

.circuit__trace--lime {
  color: var(--lime);
}

.circuit__line {
  fill: none;
  stroke: currentColor;
  stroke-width: 0.45;
  opacity: 0.4;
}

.circuit__pad {
  fill: var(--night);
  stroke: currentColor;
  stroke-width: 0.45;
  opacity: 0.7;
}

.circuit__glow,
.circuit__spark {
  fill: none;
  stroke-linecap: round;
  visibility: hidden;
}

.circuit__glow {
  stroke: currentColor;
  stroke-width: 3.2;
  opacity: 0.45;
}

.circuit__spark {
  stroke: color-mix(in srgb, currentColor 35%, #fff);
  stroke-width: 0.85;
}

/* Each trace's rhythm: how long one pulse takes, and when it starts */
.circuit__trace--a {
  --pulse-duration: 3s;
  --pulse-delay: 0s;
}

.circuit__trace--b {
  --pulse-duration: 3.7s;
  --pulse-delay: 0.9s;
}

.circuit__trace--c {
  --pulse-duration: 4.3s;
  --pulse-delay: 1.8s;
}

.circuit__trace--d {
  --pulse-duration: 3.4s;
  --pulse-delay: 2.5s;
}

.circuit__trace--e {
  --pulse-duration: 4s;
  --pulse-delay: 0.5s;
}

/* On inner pages the traces come in from the right-hand edge of the
   window and stop just past the column the title sits in. Where there's
   no room beside the column, they run faintly behind the top of the
   heading instead (see "Phones and narrow windows"). */
.circuit--heading {
  position: absolute;
  top: 56px;
  left: calc(100% + 12px);
  z-index: -1;
  width: 560px;
  height: auto;
}

.circuit--heading .circuit__line {
  stroke-width: 1.1;
  opacity: 0.5;
}

.circuit--heading .circuit__pad {
  fill: var(--ground);
  stroke-width: 1.1;
  opacity: 0.9;
}

/* ---------- Home: hero ---------- */

/* The darkest part of the site: the logo's own near-black, lit from behind
   the logo. The hero is its own stacking context, so its decorative layers
   sit behind the content and the logo can blend with them (see
   .hero__logo). */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--night);
  color: var(--text);
}

/* A faint circuit grid, fading out away from the logo */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(255, 95, 162, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 95, 162, 0.07) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 60% 85% at 76% 50%, #000 10%, transparent 70%);
  mask-image: radial-gradient(ellipse 60% 85% at 76% 50%, #000 10%, transparent 70%);
}

/* Coloured light from the logo, and a little lime from the far corner */
.hero::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(circle at 70% 48%, rgba(213, 6, 107, 0.24), transparent 32%),
    radial-gradient(circle at 64% 30%, rgba(22, 167, 206, 0.1), transparent 30%),
    radial-gradient(circle at 18% 92%, rgba(170, 220, 5, 0.07), transparent 30%);
}

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
  align-items: center;
  gap: 32px 72px;
  padding-top: 96px;
  padding-bottom: 96px;
}

.hero h1 {
  max-width: 11em;
  margin: 0;
  color: #fff;
  font-size: clamp(44px, 5.6vw, 78px);
  letter-spacing: -0.015em;
  line-height: 1;
}

.hero__lede {
  max-width: 34em;
  margin: 24px 0 0;
  color: var(--text);
  font-size: 21px;
  line-height: 1.6;
}

/* The evidence under the introduction: ruled rows of a label and a link.
   Each row's label and the short stroke over its rule take one of the
   logo's three colours, lightened where needed to read on the near-black.
   The whole row is the link, through the link's stretched ::after. */
.ledger {
  max-width: 40em;
  margin: 40px 0 0;
  border-bottom: 1px solid rgba(255, 214, 236, 0.12);
}

.ledger__row {
  --row-colour: var(--pink);
  position: relative;
  display: grid;
  grid-template-columns: 11em minmax(0, 1fr);
  gap: 2px 20px;
  padding: 16px 0;
  border-top: 1px solid rgba(255, 214, 236, 0.12);
  transition: background-color 0.2s;
}

.ledger__row:nth-child(2) {
  --row-colour: var(--lime);
}

.ledger__row:nth-child(3) {
  --row-colour: var(--sky);
}

.ledger__row::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--row-colour);
  transition: width 0.3s var(--ease-out);
}

.ledger__row:hover::before {
  width: 72px;
}

.ledger__label {
  grid-row: span 2;
  padding-top: 3px;
  color: var(--row-colour);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ledger__name,
.ledger__detail {
  margin: 0;
}

.ledger__name a {
  color: #fff;
  font-size: 18px;
  font-weight: 650;
  line-height: 1.4;
  text-decoration: none;
}

.ledger__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.ledger__row:hover .ledger__name a {
  text-decoration: underline;
  text-decoration-color: var(--row-colour);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.ledger__detail {
  color: var(--text-muted);
  font-size: 15px;
}

.hero__art {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 340px;
}

/* A pool of magenta light directly behind the logo */
.hero__art::before {
  content: "";
  position: absolute;
  inset: -14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(213, 6, 107, 0.34), rgba(213, 6, 107, 0.1) 60%, transparent);
}

/* The logo sits on its own near-black; lighten lets the hero's light
   show through it, so the square has no visible edge. */
.hero__logo {
  display: block;
  width: 100%;
  mix-blend-mode: lighten;
}

/* Circuit traces running out from the logo, drawn in home.mjs. The layer
   is three logo-widths wide and 2.2 tall, centred on the logo, and fades
   out towards its edges. Like the glow, it sits behind the logo, so the
   traces show through the logo's dark border and read as its own. Still,
   they're faint lines; with motion, current pulses along them (see
   "Motion"). */
.circuit--hero {
  position: absolute;
  top: -60%;
  left: -100%;
  z-index: -1;
  width: 300%;
  height: 220%;
  -webkit-mask-image: radial-gradient(ellipse farthest-side, #000 35%, transparent);
  mask-image: radial-gradient(ellipse farthest-side, #000 35%, transparent);
}

/* ---------- Home: bands ---------- */

.band {
  padding: 104px 0 0;
}

.band__title {
  margin: 0 0 32px;
  font-size: clamp(36px, 4.2vw, 54px);
  line-height: 1.02;
}

.band__more {
  margin: 24px 0 0;
  color: var(--text-muted);
  font-size: 16px;
}

.band__more a {
  color: var(--text-strong);
  text-decoration-color: var(--pink);
  text-underline-offset: 4px;
}

.band__more a:hover {
  color: var(--pink);
}

/* Every work area in a ruled list on one card: the title on the left,
   then what it covers and the post that shows it in practice. */
.focus-list {
  margin: 0;
  padding: 6px 36px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-background);
  box-shadow: var(--card-shadow);
}

.focus {
  display: grid;
  grid-template-columns: minmax(0, 15em) minmax(0, 1fr);
  gap: 8px 48px;
  padding: 26px 0;
}

.focus + .focus {
  border-top: 1px solid var(--line);
}

.focus__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.15;
}

.focus__title a {
  text-decoration: none;
  transition: color 0.2s;
}

.focus__title a:hover {
  color: var(--pink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.focus__summary {
  margin: 0;
  font-size: 17px;
}

.focus__writing {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 15px;
}

.focus__writing-label {
  margin-right: 6px;
  color: var(--lime);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.focus__writing a {
  color: var(--text);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 4px;
  transition: color 0.2s, text-decoration-color 0.2s;
}

.focus__writing a:hover {
  color: var(--pink);
  text-decoration-color: currentColor;
}

.badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.badge {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 20px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-background);
  box-shadow: var(--card-shadow);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.badge:hover {
  border-color: rgba(170, 220, 5, 0.4);
  box-shadow: var(--card-shadow-hover);
}

.badge__icon {
  flex: none;
  width: 32px;
  height: 32px;
  padding: 6px;
  border: 1px solid rgba(170, 220, 5, 0.35);
  border-radius: var(--radius-small);
  background: rgba(170, 220, 5, 0.08);
  color: var(--lime);
}

.badge__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.badge__name {
  color: var(--text-strong);
  font-weight: 650;
  line-height: 1.35;
}

.badge__kind {
  color: var(--text-muted);
  font-size: 14px;
}

/* The pointer to the blog: the darkest card, lit from two corners, with a
   slowly turning border in the logo's colours */
.teaser {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  padding: 48px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 100% 0%, rgba(170, 220, 5, 0.12), transparent 42%) padding-box,
    radial-gradient(circle at 0% 100%, rgba(213, 6, 107, 0.22), transparent 55%) padding-box,
    linear-gradient(var(--night), var(--night)) padding-box,
    conic-gradient(from var(--border-angle), rgba(213, 6, 107, 0.9), rgba(68, 48, 76, 0.6), rgba(170, 220, 5, 0.85), rgba(68, 48, 76, 0.6), rgba(213, 6, 107, 0.9)) border-box;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  color: var(--text);
}

.teaser .band__title {
  margin-bottom: 12px;
  color: #fff;
}

.teaser .teaser__kicker {
  color: var(--lime);
}

.teaser .teaser__kicker::before {
  background:
    linear-gradient(currentColor, currentColor) 0 50% / 24px 2px no-repeat,
    linear-gradient(var(--pink), var(--pink)) 100% 50% / 6px 6px no-repeat;
}

.teaser p {
  max-width: 36em;
  margin: 0;
}

/* ---------- Prose: about, work, contact and posts ---------- */

.prose {
  font-size: 18px;
  line-height: 1.7;
}

.prose > :first-child {
  margin-top: 8px;
}

.prose h2 {
  margin: 56px 0 18px;
  font-size: 36px;
  line-height: 1.08;
}

.prose h3 {
  margin: 36px 0 12px;
  font-size: 23px;
}

.prose h4 {
  margin: 28px 0 12px;
  font-size: 19px;
}

.prose p,
.prose ul,
.prose ol,
.prose blockquote,
.prose pre {
  margin: 0 0 var(--content-gap);
}

.prose ul,
.prose ol {
  padding-left: 1.4em;
}

.prose li {
  margin-top: 8px;
}

.prose li::marker {
  color: var(--pink);
}

.prose ol > li::marker {
  font-family: var(--font-display);
  font-weight: 700;
}

.prose li > p {
  margin: 0;
}

.prose a,
.area a,
.contact__handle {
  color: var(--text-strong);
  text-decoration-color: var(--pink);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.15s, text-decoration-thickness 0.15s;
}

.prose a:hover,
.area a:hover,
.contact__handle:hover {
  color: var(--pink);
  text-decoration-thickness: 2px;
}

.prose blockquote {
  margin-left: 0;
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--lime);
  color: var(--text);
}

.prose hr {
  margin: 40px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.prose code {
  padding: 2px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-raised);
  color: var(--code-text);
  font-size: 0.84em;
}

/* Code blocks: a well darker than the page, with a trace of the logo's
   magenta and lime down the left */
.prose pre {
  max-width: 100%;
  padding: 18px 22px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background:
    linear-gradient(var(--magenta), var(--lime)) 0 0 / 3px 100% no-repeat,
    var(--ground-deep);
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.45);
  color: #eee5eb;
  font-size: 15px;
  line-height: 1.6;
  scrollbar-color: var(--line-strong) transparent;
}

.prose pre code {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font-size: inherit;
}

.prose .table-scroll {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.prose table {
  min-width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.55;
}

.prose th,
.prose td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.prose th + th,
.prose td + td {
  border-left: 1px solid var(--line);
}

.prose tbody tr:last-child td {
  border-bottom: 0;
}

.prose th {
  background: var(--surface-raised);
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Screenshots sit in a dark frame, so light ones don't glare against the
   page. */
.post-content img {
  display: block;
  margin: 28px auto;
  padding: 6px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--surface-raised), var(--surface));
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.post-content .post-image {
  display: block;
}

.post-content .post-image:hover img {
  border-color: var(--pink);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.5), 0 0 0 4px rgba(213, 6, 107, 0.16);
}

.principles {
  padding-left: 1.2em;
}

/* ---------- Work ---------- */

.contents ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 32px;
  padding: 0;
  list-style: none;
}

.contents a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  text-decoration: none;
  transition: border-color 0.2s, background-color 0.2s, color 0.2s;
}

.contents a:hover {
  border-color: var(--pink);
  background: var(--surface-raised);
  color: var(--text-strong);
}

/* Each area, the projects and the credentials on a card of their own */
.area {
  padding: 36px 36px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-background);
  box-shadow: var(--card-shadow);
}

.area + .area {
  margin-top: 20px;
}

.area__heading {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 18px;
}

.area__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 95, 162, 0.32);
  border-radius: var(--radius-small);
  background: radial-gradient(circle at 30% 20%, rgba(213, 6, 107, 0.28), rgba(213, 6, 107, 0.08));
  color: var(--pink);
}

.area h2 {
  margin: 0;
  font-size: 32px;
  line-height: 1.1;
}

/* Sections without an icon beside their heading */
.area > h2 {
  margin-bottom: 14px;
}

.area p {
  margin: 0 0 16px;
}

.area__points {
  margin: 0 0 20px;
  padding-left: 1.3em;
}

.area__points li {
  margin-top: 6px;
}

.area__points li::marker {
  color: var(--pink);
}

.area__related-title,
.area__subtitle {
  margin: 0 0 8px;
  color: var(--lime);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.area__subtitle {
  margin: 36px 0 16px;
  font-size: 16px;
}

.area__related {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  font-size: 17px;
}

.area__related li {
  margin-top: 6px;
}

.projects {
  margin: 0;
  padding: 0;
  list-style: none;
}

.project {
  padding: 20px 0 6px;
}

.project + .project {
  border-top: 1px solid var(--line);
}

.project__name {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
}

.area .project__fork {
  margin: -2px 0 8px;
  color: var(--text-muted);
  font-size: 15px;
}

.area .project p {
  margin-bottom: 10px;
}

.area .project__stack {
  color: var(--text-muted);
  font-size: 15px;
}

.project__stack-label {
  margin-right: 6px;
  color: var(--text);
  font-weight: 650;
}

.credentials-summary {
  color: var(--text);
  font-size: 19px;
}

/* The certifications, a ruled list per group, and the superbadges */
.credential-group + .credential-group {
  margin-top: 28px;
}

.credential-group__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
}

.credential-group__count {
  min-width: 26px;
  padding: 0 7px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  line-height: 22px;
  text-align: center;
}

.credential-list {
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.credential {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 2px 20px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  line-height: 1.45;
}

.credential__name {
  color: var(--text-strong);
  font-weight: 600;
}

.credential__date {
  color: var(--text-muted);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

.area .credential__post {
  grid-column: 1;
  justify-self: start;
  color: var(--text);
  font-size: 15px;
}

.credential--retired .credential__name {
  color: var(--text-muted);
  font-weight: 500;
}

.credential__status {
  display: inline-block;
  margin-left: 6px;
  padding: 0 7px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 20px;
  text-transform: uppercase;
  vertical-align: 1px;
}

/* ---------- Contact ---------- */

.contacts {
  margin: 0 0 16px;
  padding: 4px 32px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-background);
  box-shadow: var(--card-shadow);
}

.contact {
  display: grid;
  grid-template-columns: 9em minmax(0, 1fr);
  align-items: baseline;
  gap: 4px 16px;
  padding: 20px 0;
}

.contact + .contact {
  border-top: 1px solid var(--line);
}

.contact__label {
  color: var(--lime);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.contact__handle {
  font-size: 19px;
  font-weight: 600;
}

/* ---------- Blog lists ---------- */

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tag {
  display: inline-block;
  padding: 3px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-small);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  line-height: 30px;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.tag:hover {
  border-color: var(--pink);
  background: var(--surface-raised);
  color: var(--text-strong);
}

.tag__count {
  margin-left: 6px;
  color: var(--lime);
  font-weight: 650;
}

.tag-nav {
  margin: 0 0 36px;
}

.entries {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The whole card is the link, through the title's stretched ::after. */
.entry {
  position: relative;
  margin-bottom: 18px;
  padding: 28px 72px 26px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-background);
  box-shadow: var(--card-shadow);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.entry:hover {
  border-color: rgba(255, 95, 162, 0.45);
  box-shadow: var(--card-shadow-hover);
}

.entry__title {
  margin: 0 0 10px;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}

.entry__title a {
  text-decoration: none;
  transition: color 0.2s;
}

.entry__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.entry:hover .entry__title a {
  color: var(--pink);
}

.entry__summary {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 16px;
}

.entry__arrow {
  position: absolute;
  top: 50%;
  right: 28px;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  color: var(--line-strong);
  transition: color 0.25s;
}

.entry:hover .entry__arrow {
  color: var(--pink);
}

.post-meta {
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
}

.page-heading .post-meta {
  margin-top: 18px;
  font-size: 15px;
}

/* ---------- A post ---------- */

.post .page-heading h1 {
  font-size: clamp(36px, 5.4vw, 58px);
  line-height: 1.04;
}

.post-footer {
  margin-top: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

.post-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 28px 0 0;
}

.post-nav__link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card-background);
  box-shadow: var(--card-shadow);
  color: var(--text-strong);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  text-decoration: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.post-nav__link:hover {
  border-color: rgba(255, 95, 162, 0.45);
  box-shadow: var(--card-shadow-hover);
}

.post-nav__link--older {
  grid-column: 2;
  text-align: right;
}

.post-nav__direction {
  color: var(--lime);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.post-footer__back {
  margin: 28px 0 0;
  font-size: 16px;
}

.post-footer__back a {
  color: var(--text-strong);
  text-decoration-color: var(--pink);
  text-underline-offset: 4px;
}

.post-footer__back a:hover {
  color: var(--pink);
}

/* ---------- Cut corners ---------- */

/* Where the browser can draw them, cards, chips and buttons have their
   corners cut on the diagonal: cards on two opposite corners, like a
   circuit board, and small pieces on all four. Elsewhere the rounded
   corners above stay. */
@supports (corner-shape: bevel) {
  .focus-list,
  .badge,
  .teaser,
  .area,
  .contacts,
  .entry,
  .post-nav__link {
    border-radius: 18px 3px;
    corner-shape: bevel;
  }

  .button,
  .tag,
  .contents a,
  .badge__icon,
  .area__icon,
  .credential__status,
  .credential-group__count {
    corner-shape: bevel;
  }

  .button {
    border-radius: 10px;
  }
}

/* ---------- Wider windows ---------- */

/* The header stays in view while scrolling where there's room for it. */
@media (min-width: 761px) {
  .site-header {
    position: sticky;
    top: 0;
  }

  /* With the text beside the logo, the circuit layer also fades out just
     left of the logo (its left edge is a third of the way across the
     layer), so no trace runs behind the text at any width. */
  .circuit--hero {
    -webkit-mask-image:
      radial-gradient(ellipse farthest-side, #000 35%, transparent),
      linear-gradient(90deg, transparent 29%, #000 34%);
    -webkit-mask-composite: source-in;
    mask-image:
      radial-gradient(ellipse farthest-side, #000 35%, transparent),
      linear-gradient(90deg, transparent 29%, #000 34%);
    mask-composite: intersect;
  }
}

/* ---------- Phones and narrow windows ---------- */

/* Tablets: a smaller logo, so the text beside it keeps room for the
   ledger's labels and links. */
@media (max-width: 1080px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 240px);
    gap: 32px 48px;
  }

  .ledger__row {
    grid-template-columns: 10em minmax(0, 1fr);
  }
}

/* No room beside the column: the heading's top two traces run in a band
   above it instead, from the right-hand edge, fading as they reach the
   left. The drawing keeps its scale and is cut off below the second
   trace (preserveAspectRatio "xMaxYMin slice" in circuit.mjs). */
@media (max-width: 1180px) {
  .page-heading {
    padding-top: 112px;
  }

  /* The band ends at the window's right-hand edge, half the difference
     between the window and the column to the right of the column. */
  .circuit--heading {
    top: 24px;
    right: calc((100% - 100vw) / 2);
    left: auto;
    width: min(100vw, 420px);
    aspect-ratio: 400 / 72;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3), #000 55%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.3), #000 55%);
  }
}

@media (max-width: 760px) {
  :root {
    --gap: 16px;
  }

  body {
    font-size: 17px;
  }

  [id] {
    scroll-margin-top: 16px;
  }

  .site-header__inner {
    min-height: 60px;
  }

  .site-nav {
    gap: 0 22px;
  }

  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 36px;
    padding-bottom: 52px;
  }

  .hero__art {
    order: -1;
    max-width: 160px;
  }

  .hero__lede {
    font-size: 18px;
  }

  .ledger__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .ledger__label {
    grid-row: auto;
  }

  .band {
    padding-top: 72px;
  }

  .band__title {
    margin-bottom: 24px;
  }

  .focus-list {
    padding: 2px 20px;
  }

  .focus {
    grid-template-columns: minmax(0, 1fr);
    padding: 22px 0;
  }

  .teaser {
    padding: 32px 24px;
  }

  .page-heading {
    padding-top: 96px;
    padding-bottom: 32px;
  }

  .circuit--heading {
    top: 16px;
  }

  .page-heading .lede {
    font-size: 19px;
  }

  .prose {
    font-size: 17px;
  }

  .prose h2 {
    margin-top: 44px;
    font-size: 30px;
  }

  .prose h3 {
    font-size: 21px;
  }

  .prose pre {
    padding: 16px 18px;
    font-size: 14px;
  }

  .prose table {
    font-size: 15px;
  }

  .prose th,
  .prose td {
    padding: 10px 12px;
  }

  .post-content img {
    padding: 4px;
  }

  .area {
    padding: 26px 20px 12px;
  }

  .area h2 {
    font-size: 26px;
  }

  .contents ul {
    gap: 8px;
  }

  .contents a {
    padding: 4px 12px;
    font-size: 14px;
  }

  .contacts {
    padding: 2px 20px;
  }

  .contact {
    grid-template-columns: minmax(0, 1fr);
    padding: 16px 0;
  }

  .entry {
    padding: 22px 20px;
  }

  .entry__title {
    font-size: 24px;
  }

  .entry__arrow {
    display: none;
  }

  .post-nav {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-nav__link--older {
    grid-column: 1;
  }

  .site-footer {
    margin-top: 80px;
  }
}

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Pages fade into each other, and the header stays put, in browsers
     with cross-document view transitions. */
  @view-transition {
    navigation: auto;
  }

  .site-header {
    view-transition-name: site-header;
  }

  ::view-transition-old(root) {
    animation: fade-out 0.18s ease both;
  }

  ::view-transition-new(root) {
    animation: rise 0.36s var(--ease-out) both;
  }

  /* Hover: underlines grow, cards and buttons lift, arrows nudge */
  .site-nav a::after {
    transition: transform 0.25s var(--ease-out);
  }

  .button,
  .badge,
  .entry,
  .post-nav__link {
    transition-property: background-color, border-color, box-shadow, translate;
    transition-duration: 0.25s;
    transition-timing-function: var(--ease-out);
  }

  .button:hover,
  .badge:hover,
  .post-nav__link:hover {
    translate: 0 -2px;
  }

  .entry:hover {
    translate: 0 -4px;
  }

  .button__icon,
  .entry__arrow {
    transition: translate 0.25s var(--ease-out), color 0.25s;
  }

  .button:hover .button__icon,
  .entry:hover .entry__arrow {
    translate: 4px 0;
  }

  /* The hero's heading is there from the first frame; the text under it
     comes in quickly, the logo fades up, and the background keeps gently
     alive. */
  .hero__text > :not(h1) {
    animation: rise 0.3s var(--ease-out) both;
  }

  .hero__text > .ledger {
    animation-delay: 0.05s;
  }

  .hero__logo {
    animation: logo-in 0.6s var(--ease-out) both;
  }

  .hero::before {
    animation: grid-drift 24s linear infinite;
  }

  .hero::after {
    animation: aurora 18s ease-in-out infinite alternate;
  }

  /* Current runs out along each circuit trace: a short spark, 9% of the
     trace long, travels from the logo to the end in the first 60% of the
     trace's cycle, and the pad at the end flashes as it arrives. */
  .circuit__glow,
  .circuit__spark {
    visibility: visible;
    stroke-dasharray: 9 100;
    stroke-dashoffset: 9;
    animation: current var(--pulse-duration) linear var(--pulse-delay) infinite both;
  }

  .circuit--hero .circuit__pad {
    animation: pad-flash var(--pulse-duration) linear var(--pulse-delay) infinite both;
  }

  .teaser {
    animation: border-spin 12s linear infinite;
  }

  /* Inner pages: the title is there from the first frame, and the rest
     of the heading comes in quickly around it. */
  .page-heading > :not(h1, .circuit) {
    animation: rise 0.3s var(--ease-out) both;
  }

  .page-heading > h1 ~ * {
    animation-delay: 0.05s;
  }

  .circuit--heading {
    animation: traces-in 0.8s var(--ease-out) both;
  }

  /* Cards and sections rise into place as they scroll into view */
  @supports (animation-timeline: view()) {
    .focus-list,
    .badge,
    .entry,
    .area,
    .contacts,
    .post-nav {
      animation: reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }

    .badges > :nth-child(2n) {
      animation-range: entry 6% entry 46%;
    }

    .teaser {
      animation:
        reveal linear both,
        border-spin 12s linear infinite;
      animation-timeline: view(), auto;
      animation-range: entry 0% entry 40%, normal;
    }
  }

  /* The header darkens and the reading-progress bar follows the scroll */
  @supports (animation-timeline: scroll()) {
    .site-header {
      animation: header-settle linear both;
      animation-timeline: scroll();
      animation-range: 0 120px;
    }

    body.post-page::before {
      content: "";
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      z-index: 30;
      height: 3px;
      background: linear-gradient(90deg, var(--magenta), var(--pink) 70%, var(--lime));
      transform-origin: 0 50%;
      animation: progress linear both;
      animation-timeline: scroll(root);
    }
  }
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translateY(28px) scale(0.98);
  }
}

@keyframes logo-in {
  from {
    opacity: 0;
    scale: 0.9;
  }
}

@keyframes traces-in {
  from {
    opacity: 0;
    translate: 48px 0;
  }
}

@keyframes grid-drift {
  to {
    background-position: 44px 44px, 44px 44px;
  }
}

@keyframes aurora {
  to {
    transform: translate(-3%, 4%) scale(1.06);
  }
}

@keyframes current {
  from {
    stroke-dashoffset: 9;
  }

  60%,
  to {
    stroke-dashoffset: -100;
  }
}

@keyframes pad-flash {
  from,
  52% {
    fill: var(--night);
    opacity: 0.7;
  }

  58% {
    fill: currentColor;
    opacity: 1;
  }

  80%,
  to {
    fill: var(--night);
    opacity: 0.7;
  }
}

@keyframes border-spin {
  to {
    --border-angle: 360deg;
  }
}

@keyframes header-settle {
  to {
    background-color: rgba(8, 5, 11, 0.9);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  }
}

@keyframes progress {
  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }
}