:root {
  color-scheme: light dark;
  --bg: #f8faf9;
  --surface: #ffffff;
  --surface-soft: #edf4f1;
  --text: #0e1715;
  --muted: #5c6a65;
  --line: #d8e2de;
  --accent: #0ca66f;
  --accent-strong: #087150;
  --accent-soft: #e0f3ea;
  --principle-icon: var(--accent-strong);
  --principle-icon-hover: var(--accent);
  --principle-icon-soft-opacity: .62;
  --rack-surface: #e8eeeb;
  --rack-surface-strong: #dfe7e3;
  --rack-line: #c4d0ca;
  --rack-highlight: color-mix(in srgb, white 48%, transparent);
  --rack-lowlight: color-mix(in srgb, black 16%, transparent);
  --rack-shadow: 0 18px 38px rgb(39 58 51 / 12%);
  --violet: #7057ff;
  --amber: #f4b400;
  --shadow: 0 16px 40px rgb(26 46 38 / 10%);
  --radius: 8px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #07100f;
    --surface: #0d1716;
    --surface-soft: #101f1d;
    --text: #edf6f3;
    --muted: #9eaaa5;
    --line: #22332f;
    --accent: #18c782;
    --accent-strong: #18c782;
    --accent-soft: #102d23;
    --principle-icon: var(--accent);
    --principle-icon-hover: color-mix(in srgb, var(--accent) 76%, white);
    --principle-icon-soft-opacity: .58;
    --rack-surface: #0d1716;
    --rack-surface-strong: #101d1b;
    --rack-line: #22332f;
    --rack-highlight: color-mix(in srgb, white 7%, transparent);
    --rack-lowlight: color-mix(in srgb, black 34%, transparent);
    --rack-shadow: 0 18px 50px rgb(0 0 0 / 32%);
    --shadow: 0 18px 50px rgb(0 0 0 / 32%);
  }
}

html[data-theme="light"] {
  color-scheme: light;
  --bg: #f7f9f8;
  --surface: #ffffff;
  --surface-soft: #edf4f1;
  --text: #0e1715;
  --muted: #5c6a65;
  --line: #d8e2de;
  --accent: #0ca66f;
  --accent-strong: #087150;
  --accent-soft: #e0f3ea;
  --principle-icon: var(--accent-strong);
  --principle-icon-hover: var(--accent);
  --principle-icon-soft-opacity: .62;
  --rack-surface: #e8eeeb;
  --rack-surface-strong: #dfe7e3;
  --rack-line: #c4d0ca;
  --rack-highlight: color-mix(in srgb, white 48%, transparent);
  --rack-lowlight: color-mix(in srgb, black 16%, transparent);
  --rack-shadow: 0 18px 38px rgb(39 58 51 / 12%);
  --shadow: 0 16px 40px rgb(26 46 38 / 10%);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #07100f;
  --surface: #0d1716;
  --surface-soft: #101f1d;
  --text: #edf6f3;
  --muted: #9eaaa5;
  --line: #22332f;
  --accent: #18c782;
  --accent-strong: #18c782;
  --accent-soft: #102d23;
  --principle-icon: var(--accent);
  --principle-icon-hover: color-mix(in srgb, var(--accent) 76%, white);
  --principle-icon-soft-opacity: .58;
  --rack-surface: #0d1716;
  --rack-surface-strong: #101d1b;
  --rack-line: #22332f;
  --rack-highlight: color-mix(in srgb, white 7%, transparent);
  --rack-lowlight: color-mix(in srgb, black 34%, transparent);
  --rack-shadow: 0 18px 50px rgb(0 0 0 / 32%);
  --shadow: 0 18px 50px rgb(0 0 0 / 32%);
}

html {
  /* reserve the scrollbar's space so content keeps its padding beside it
     instead of sliding under the scrollbar when one appears */
  scrollbar-gutter: stable;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(circle at 82% 18%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 28rem),
    linear-gradient(180deg, var(--bg), color-mix(in srgb, var(--bg), var(--surface-soft) 18%));
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  color: var(--accent-strong);
}

button,
input {
  font: inherit;
}

button,
a,
input {
  outline-offset: 3px;
}

:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 70%, white);
}

.skip-link {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  transform: translateY(-160%);
  z-index: 10;
  padding: .65rem .9rem;
  background: var(--text);
  color: var(--bg);
  border-radius: var(--radius);
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  max-width: 1180px;
  margin-inline: auto;
  padding: 1rem clamp(1rem, 3vw, 2rem);
  backdrop-filter: blur(18px);
}

.brand {
  justify-self: start;
  font-weight: 750;
  font-size: 1.2rem;
}

.brand span {
  display: inline-block;
  margin-inline-start: .08em;
  transform-origin: 50% 100%;
}

.brand span,
.landing-grid > h1 span,
.eyebrow {
  color: var(--accent);
}

.site-header nav {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(.6rem, 2vw, 2rem);
  font-size: .84rem;
}

.site-header nav a {
  position: relative;
  padding: .5rem .1rem;
}

.site-header nav a.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 2.35rem;
  padding: .55rem .8rem;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 760;
  box-shadow: 0 10px 28px rgb(0 0 0 / 8%);
}

.site-header nav a.nav-cta::before,
.site-header nav a.nav-cta::after {
  display: none;
}

.nav-cta-icon,
.nav-cta-arrow {
  inline-size: 1rem;
  block-size: 1rem;
  flex: 0 0 auto;
}

.nav-cta-arrow {
  inline-size: 1.05rem;
}

.nav-mail-flap,
.nav-cta-arrow {
  transform-box: fill-box;
  transform-origin: center;
}

.site-header nav a.nav-cta:hover,
.site-header nav a.nav-cta.active {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 82%, var(--surface));
}

.site-header nav a.nav-cta:hover .nav-mail-flap,
.site-header nav a.nav-cta.active .nav-mail-flap {
  transform: translateY(-1px);
}

.site-header nav a.nav-cta:hover .nav-cta-arrow,
.site-header nav a.nav-cta.active .nav-cta-arrow {
  transform: translateX(.12rem);
}

.site-header nav a.nav-github {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
  min-height: 2.35rem;
  padding: .55rem .75rem;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--text) 18%);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 82%, var(--text) 6%);
  color: var(--text);
  font-weight: 760;
}

.site-header nav a.nav-github svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  flex: 0 0 auto;
}

.site-header nav a.nav-github::after {
  display: none;
}

.site-header nav a.nav-github:hover {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}

.site-header nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  inset-block-end: .18rem;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 50% 50%;
  background: var(--accent);
}

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

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.35rem;
  block-size: 2.35rem;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  transition:
    background 180ms var(--ease),
    color 180ms var(--ease),
    border-color 180ms var(--ease);
}

.theme-toggle:hover {
  background: color-mix(in srgb, var(--text) 9%, transparent);
  border-color: color-mix(in srgb, var(--text) 18%, transparent);
  color: var(--accent-strong);
}

.theme-glyph {
  inline-size: 1.25rem;
  block-size: 1.25rem;
}

.theme-icon {
  display: none;
  line-height: 0;
}

.theme-icon-sun {
  display: inline-flex;
}

@media (prefers-color-scheme: dark) {
  .theme-icon-sun {
    display: none;
  }

  .theme-icon-moon {
    display: inline-flex;
  }
}

html[data-theme="light"] .theme-icon-sun {
  display: inline-flex;
}

html[data-theme="light"] .theme-icon-moon {
  display: none;
}

html[data-theme="dark"] .theme-icon-sun {
  display: none;
}

html[data-theme="dark"] .theme-icon-moon {
  display: inline-flex;
}

main {
  max-width: 1180px;
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 2rem);
}

.landing-grid {
  display: grid;
  grid-template-columns: minmax(18rem, .82fr) minmax(31rem, 1.18fr);
  gap: clamp(1rem, 2.6vw, 2.25rem) clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  min-height: calc(100vh - 9rem);
}

.landing-grid > .eyebrow,
.landing-grid > h1 {
  grid-column: 1 / -1;
}

.intro-copy {
  grid-column: 1;
  display: grid;
  gap: 1rem;
}

.intro-copy p {
  margin: 0;
}

.landing-grid > h1,
.page-heading h1,
.page-heading h2,
.newsletter-copy h1,
.article-page h1 {
  margin: 0;
  font-size: clamp(2.4rem, 5.2vw, 5rem);
  line-height: .98;
  letter-spacing: 0;
}

.intro-copy p,
.page-heading p,
.newsletter-copy p,
.article-page header p {
  color: var(--muted);
  max-width: 42rem;
}

.eyebrow {
  text-transform: uppercase;
  font-size: .78rem;
  font-weight: 750;
}

.project-list {
  grid-column: 2;
  grid-row: 3 / span 4;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  align-content: start;
  align-items: end;
}

/* ---------- modular server-rack project cards ---------- */
.server-unit {
  position: relative;
  align-self: end;
  overflow: hidden;
  padding: 1rem 1.15rem 1.7rem;
  border: 1px solid var(--rack-line);
  border-radius: 9px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--rack-surface) 82%, white 10%),
      var(--rack-surface-strong));
  box-shadow:
    inset 0 1px 0 var(--rack-highlight),
    inset 0 -1px 0 var(--rack-lowlight),
    var(--rack-shadow);
}

.su-full {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 4.8rem 1fr;
  grid-template-areas:
    "mark main"
    "aspects aspects";
  gap: .7rem 1.2rem;
  align-items: center;
  padding: 1.2rem 3.9rem 1.2rem 1.3rem;
}

.su-full .su-mark {
  grid-area: mark;
}

.su-full .su-main {
  grid-area: main;
}

/* rack screws */
.su-screw {
  position: absolute;
  inline-size: 7px;
  block-size: 7px;
  border-radius: 50%;
  opacity: .5;
  background:
    radial-gradient(circle at 36% 30%, color-mix(in srgb, white 30%, transparent), transparent 55%),
    color-mix(in srgb, var(--text) 14%, var(--rack-surface));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, black 30%, transparent);
}

.su-screw-tl { inset-block-start: 7px; inset-inline-start: 7px; }
.su-screw-tr { inset-block-start: 7px; inset-inline-end: 7px; }
.su-screw-bl { inset-block-end: 7px; inset-inline-start: 7px; }
.su-screw-br { inset-block-end: 7px; inset-inline-end: 7px; }

/* recessed perforated cooling vent: a thin band along the bottom of the
   compact units, a tall band on the right of the wide Rama unit. */
.su-vent {
  position: absolute;
  inset-inline: 16px;
  inset-block-end: 10px;
  block-size: 11px;
  border-radius: 4px;
  pointer-events: none;
  /* much lower contrast in light mode so the grille reads as a quiet detail
     rather than grabbing attention; unchanged (deep recess) in dark mode */
  --vent-panel: light-dark(color-mix(in srgb, black 7%, var(--rack-surface-strong)), color-mix(in srgb, black 26%, var(--surface)));
  --vent-hole: light-dark(color-mix(in srgb, black 34%, transparent), color-mix(in srgb, black 72%, transparent));
  --vent-edge: light-dark(color-mix(in srgb, black 12%, transparent), color-mix(in srgb, black 34%, transparent));
  --vent-shade: light-dark(color-mix(in srgb, black 12%, transparent), color-mix(in srgb, black 48%, transparent));
  background-color: var(--vent-panel);
  background-image: radial-gradient(circle, var(--vent-hole) 1.3px, transparent 1.75px);
  background-size: 4.5px 4.5px;
  background-position: center;
  box-shadow:
    inset 0 0 0 1px var(--vent-edge),
    inset 0 2px 6px var(--vent-shade);
}

.su-full .su-vent {
  inset-block: 18px;
  inset-inline-start: auto;
  inset-inline-end: 10px;
  inline-size: 46px;
  block-size: auto;
}

/* power + network-activity LEDs: top-right cluster on compact units,
   stacked beside the vent on the wide Rama unit. */
.su-leds {
  position: absolute;
  inset-block-start: 13px;
  inset-inline-end: 14px;
  display: flex;
  gap: 5px;
}

.su-full .su-leds {
  inset-block-start: 20px;
  inset-inline-end: 63px;
  flex-direction: column;
}

.su-led {
  inline-size: 6px;
  block-size: 6px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 24%, var(--line));
}

.su-led-pwr {
  background: var(--amber);
  box-shadow: 0 0 5px color-mix(in srgb, var(--amber) 80%, transparent);
}

.su-led-act {
  background: var(--accent);
  box-shadow: 0 0 6px color-mix(in srgb, var(--accent) 75%, transparent);
}

.su-head {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin-block-end: .45rem;
  position: relative;
}

.server-unit h2 {
  margin: 0;
  font-size: 1.02rem;
}

.server-unit h2 sup {
  margin-inline-start: .04em;
  font-size: .55em;
  line-height: 0;
}

.su-desc {
  margin: 0 0 .7rem;
  color: var(--muted);
  font-size: .85rem;
}

.su-full .su-main {
  align-self: center;
}

.su-full .su-desc {
  margin: .15rem 0 0;
}

/* icon as a status panel on the compact units */
.project-icon {
  color: var(--accent);
}

.server-unit .project-icon {
  display: grid;
  place-items: center;
  inline-size: 2.7rem;
  block-size: 2.7rem;
  flex: 0 0 auto;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, currentColor 18%, var(--rack-line));
  background: color-mix(in srgb, currentColor 9%, var(--rack-surface));
}

.server-unit .project-icon svg {
  inline-size: 1.7rem;
  block-size: 1.7rem;
  display: block;
}

.project-card.netstack .project-icon {
  color: var(--violet);
}

/* Rama keeps its bare line-art mark, no status box */
.su-full .project-icon {
  inline-size: 4.6rem;
  block-size: 4.6rem;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
}

.su-full .project-icon svg,
.su-full .project-icon .rama-mark {
  inline-size: 4.6rem;
  block-size: 4.6rem;
}

/* Rama open-source / commercial aspects */
.rama-aspects {
  grid-area: aspects;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem 2rem;
  margin-block-start: .3rem;
  padding-block-start: .85rem;
  border-block-start: 1px solid var(--rack-line);
}

.rama-aspect {
  display: grid;
  gap: .2rem;
  align-content: start;
}

.rama-aspect-h {
  margin: 0 0 .15rem;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}

/* links */
.project-links {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .3rem;
  font-size: .8rem;
  font-weight: 700;
  color: var(--accent-strong);
}

.rama-aspect .project-link {
  inline-size: 100%;
  align-items: start;
}

.rama-aspect .link-icon,
.rama-aspect .link-arrow {
  margin-block-start: .12rem;
}

.rama-aspect .project-link-note {
  white-space: normal;
}

.project-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .5rem;
  border: 1px solid transparent;
  border-radius: 7px;
  color: var(--accent-strong);
  background: transparent;
  transition:
    border-color 180ms var(--ease),
    background-color 180ms var(--ease),
    box-shadow 180ms var(--ease),
    color 180ms var(--ease);
}

.project-link:hover,
.project-link:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 34%, transparent);
  background: color-mix(in srgb, var(--accent-soft) 78%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 12%, transparent);
  text-decoration: none;
}

.project-link-text {
  display: grid;
  gap: .05rem;
  min-inline-size: 0;
  /* fill the row so the trailing arrow lands at the link's right edge,
     keeping arrows aligned down a stacked column of links */
  flex: 1;
}

.project-link-label,
.project-link-note {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-link-note {
  color: color-mix(in srgb, currentColor 58%, var(--muted));
  font-size: .64rem;
  font-weight: 620;
  letter-spacing: 0;
}

.link-icon,
.link-arrow {
  inline-size: 1rem;
  block-size: 1rem;
  flex: 0 0 auto;
}

.link-icon {
  opacity: .72;
}

.intro-contact {
  font-size: .9rem;
  color: var(--muted);
}

.intro-contact a {
  color: var(--accent-strong);
  font-weight: 700;
}

.intro-contact a:hover {
  text-decoration: underline;
}

.link-arrow {
  justify-self: end;
}

.audio-link {
  color: var(--violet);
}

.docs-link {
  color: var(--accent-strong);
}

.service-link {
  color: var(--accent-strong);
}

.source-link {
  color: var(--accent-strong);
}

.rust-roots {
  position: relative;
  isolation: isolate;
  margin-block: clamp(1.2rem, 3vw, 2.2rem);
  padding-block: clamp(1rem, 2.4vw, 1.45rem);
}

.rust-roots::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset-block: 0;
  inset-inline-start: 50%;
  inline-size: 100vw;
  transform: translateX(-50%);
  border-block: 1px solid var(--line);
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--rack-surface) 54%, transparent),
      color-mix(in srgb, var(--accent-soft) 32%, transparent) 48%,
      transparent);
}

.rust-roots-inner {
  display: grid;
  grid-template-columns: minmax(20rem, 1fr) minmax(12rem, 22rem);
  gap: clamp(1.25rem, 4vw, 3.5rem);
  align-items: center;
}

.rust-roots-copy {
  display: grid;
  gap: .55rem;
  max-width: 43rem;
}

.rust-roots-copy h2,
.rust-roots-copy p {
  margin: 0;
}

.rust-roots-copy h2 {
  font-size: clamp(1.35rem, 2.45vw, 2rem);
  line-height: 1.05;
}

.rust-roots-copy p:not(.eyebrow) {
  color: var(--muted);
  font-size: clamp(.94rem, 1.2vw, 1.02rem);
  max-width: 42rem;
}

.rust-roots-copy a {
  color: var(--accent-strong);
  font-weight: 760;
  text-decoration: none;
}

.rust-roots-copy a:hover,
.rust-roots-copy a:focus-visible {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: .18em;
}

.rust-roots-links {
  align-self: stretch;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(3, minmax(3rem, 1fr));
  gap: .45rem;
  inline-size: min(100%, 22rem);
  justify-self: end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rust-roots-links li {
  display: grid;
}

.rust-root-link {
  display: grid;
  grid-template-columns: 1.55rem minmax(0, 1fr);
  align-items: center;
  gap: .55rem;
  block-size: 100%;
  min-block-size: 3.15rem;
  padding: .62rem .78rem;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--rack-line));
  border-radius: 7px;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--rack-surface) 68%, white 8%),
      color-mix(in srgb, var(--rack-surface-strong) 88%, transparent));
  box-shadow:
    inset 0 1px 0 var(--rack-highlight),
    inset 0 -1px 0 var(--rack-lowlight);
  color: var(--text);
  font-size: .82rem;
  font-weight: 760;
  line-height: 1;
  white-space: nowrap;
  transition:
    border-color 180ms var(--ease),
    background-color 180ms var(--ease),
    color 180ms var(--ease);
}

.rust-root-link:hover,
.rust-root-link:focus-visible {
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 48%, var(--rack-line));
  background: color-mix(in srgb, var(--accent-soft) 76%, var(--surface));
}

.rust-root-icon {
  inline-size: 1.35rem;
  block-size: 1.35rem;
  color: var(--accent-strong);
  transition: transform 180ms var(--ease), color 180ms var(--ease);
}

.rust-root-link:hover .rust-root-icon,
.rust-root-link:focus-visible .rust-root-icon {
  color: var(--accent);
}

.rust-root-network circle,
.rust-root-guide path,
.rust-root-code path {
  transform-box: fill-box;
  transform-origin: center;
}

.rust-root-network {
  inline-size: 1.6rem;
  block-size: 1.6rem;
  margin-inline-start: -.05rem;
}

.rust-root-link:hover .rust-root-network circle {
  transform: translateY(-1px);
}

.rust-root-link:hover .rust-root-guide path:last-child {
  transform: translateX(1px);
}

.rust-root-link:hover .rust-root-code path:last-child {
  transform: translateX(1px);
}

.principles {
  padding-block: 1.5rem 2.5rem;
}

.principles h2 {
  color: var(--accent-strong);
  font-size: 1rem;
}

.principle-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

.principle-card {
  min-height: 8rem;
}

.principle-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  margin-block-end: .6rem;
  color: var(--principle-icon);
  transition: color 180ms var(--ease);
}

.principle-card:hover .principle-mark {
  color: var(--principle-icon-hover);
}

.principle-svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.pulse-svg .pl-ring,
.pulse-svg .pl-base,
.pulse-svg .pl-lead {
  stroke: var(--principle-icon);
  transition: stroke 180ms var(--ease);
}

.principle-card:hover .pulse-svg .pl-ring,
.principle-card:hover .pulse-svg .pl-lead {
  stroke: var(--principle-icon-hover);
}

.cl-person,
.cl-arm,
.cl-clasp,
.pl-ring,
.pl-lead,
.enc-shackle,
.enc-bit,
.eu-dot,
.eu-pin,
.eu-pin-dot {
  transform-box: fill-box;
  transform-origin: center;
}

.principle-grid h3 {
  margin: 0 0 .25rem;
  font-size: .95rem;
}

.principle-grid p {
  margin: 0;
  color: var(--muted);
  font-size: .84rem;
}

.page-heading,
.newsletter-layout,
.article-page,
.status-page {
  padding-block: clamp(2rem, 7vw, 5rem);
}

.blog-heading {
  padding-block: clamp(1.15rem, 4vw, 2.7rem);
}

.blog-tools {
  display: grid;
  gap: 1rem;
  margin-block: .4rem 1.65rem;
}

.blog-tools form,
.admin-tools,
.admin-tools form {
  display: flex;
  gap: .6rem;
}

.blog-filter-row {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
}

.admin-section {
  display: grid;
  gap: 1rem;
  margin-block: 0 clamp(2rem, 6vw, 4rem);
}

.admin-section .page-heading {
  padding-block: 0;
}

.admin-tools {
  flex-wrap: wrap;
  align-items: stretch;
}

.admin-tools form {
  flex: 1 1 auto;
}

.admin-tools > button {
  flex: 0 0 auto;
}

.admin-row-toggle {
  flex: 0 0 auto;
}

.admin-delete {
  display: grid;
  gap: .75rem;
  min-width: min(24rem, calc(100vw - 3rem));
}

.admin-delete input {
  min-height: 2.6rem;
}

.danger {
  border-color: color-mix(in srgb, #ff5b6b 48%, var(--line));
  color: #ff7a86;
}

.danger:hover,
.danger:focus-visible {
  background: color-mix(in srgb, #ff5b6b 14%, var(--surface));
}

.confirm-dialog {
  max-inline-size: min(28rem, calc(100vw - 2rem));
  padding: 1.1rem;
  border: 1px solid color-mix(in srgb, #ff5b6b 38%, var(--line));
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow);
}

.confirm-dialog::backdrop {
  background: rgb(0 0 0 / 58%);
  backdrop-filter: blur(2px);
}

.confirm-dialog h3,
.confirm-dialog p {
  margin: 0;
}

.confirm-dialog p {
  color: var(--muted);
}

.dialog-actions {
  display: flex;
  justify-content: end;
  gap: .65rem;
}

.search-submit {
  display: inline-grid;
  place-items: center;
  min-inline-size: 3rem;
  padding-inline: .75rem;
}

.search-submit svg {
  inline-size: 1.2rem;
  block-size: 1.2rem;
}

input {
  min-height: 2.9rem;
  inline-size: 100%;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  padding: .75rem .9rem;
}

button,
.chip,
.feed-link {
  min-height: 2.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  padding: .55rem .9rem;
  cursor: pointer;
}

.feed-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--accent-strong);
  font-weight: 780;
  text-decoration: none;
}

.feed-link svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
}

.feed-link:hover,
.feed-link:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--accent-soft);
  text-decoration: none;
}

.tag-row,
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}

.chip.active,
.primary,
.article-tags span {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.primary {
  min-width: 9rem;
  font-weight: 750;
}

.article-list {
  display: grid;
}

.article-row {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: .45rem 1.2rem;
  align-items: start;
  padding-block: 1.15rem;
  border-bottom: 1px solid var(--line);
}

.article-row:last-child {
  border-bottom: 0;
}

.article-row time {
  grid-row: 1 / span 3;
  color: var(--muted);
  font-size: .82rem;
  padding-block-start: .18rem;
}

.article-row > a {
  font-weight: 720;
  font-size: 1.02rem;
}

.article-snippet {
  margin: 0;
  color: var(--muted);
  max-width: 68rem;
}

.article-snippet mark,
.article-row > a mark,
.article-page mark {
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 28%, transparent);
  color: var(--text);
  padding-inline: .12em;
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem 1rem;
  align-items: center;
}

.article-meta > span {
  color: var(--muted);
  font-size: .82rem;
}

.article-author,
.article-byline {
  color: var(--muted);
  font-weight: 650;
}

.article-byline {
  margin-block: .75rem 0;
}

.article-tags span {
  display: inline-flex;
  align-items: center;
  min-height: 1.6rem;
  padding: .25rem .5rem;
  border-radius: 5px;
  font-size: .76rem;
}

.article-page {
  max-width: 780px;
  margin-inline: auto;
}

.article-page header {
  margin-block-end: 2rem;
  padding-block-end: 1.3rem;
  border-bottom: 1px solid var(--line);
}

.clear-highlights {
  min-height: 2.15rem;
  margin-block-start: 1rem;
  padding: .45rem .7rem;
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent-strong);
  font: inherit;
  font-size: .78rem;
  font-weight: 750;
  cursor: pointer;
}

.clear-highlights:hover,
.clear-highlights:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  background: color-mix(in srgb, var(--accent) 18%, transparent);
}

.article-content {
  font-size: 1.05rem;
}

.article-content h2 {
  margin-block-start: 2rem;
}

.article-content blockquote {
  position: relative;
  margin: 1.6rem 0;
  padding: 1rem 1.15rem 1rem 1.45rem;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-inline-start: .28rem solid var(--accent);
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 13%, transparent),
    color-mix(in srgb, var(--surface) 92%, transparent)
  );
  color: var(--text);
}

.article-content blockquote::before {
  content: "\201C";
  position: absolute;
  inset-block-start: -.35rem;
  inset-inline-start: .65rem;
  color: color-mix(in srgb, var(--accent) 62%, transparent);
  font-size: 2.6rem;
  font-weight: 850;
  line-height: 1;
}

.article-content blockquote p {
  margin: 0;
  padding-inline-start: 1.25rem;
  color: var(--muted);
}

.article-content ol,
.article-content ul {
  padding-inline-start: 1.35rem;
}

.article-content li + li {
  margin-block-start: .75rem;
}

.article-content a,
.back-link,
.site-footer a {
  color: var(--accent-strong);
  font-weight: 720;
}

.home-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.8rem;
  margin-block-start: 1rem;
  padding: .7rem 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent-strong);
  font-weight: 760;
  text-decoration: none;
}

.home-cta:hover {
  border-color: color-mix(in srgb, var(--accent) 70%, var(--line));
  transform: translateY(-1px);
}

.newsletter-layout {
  --newsletter-art-size: clamp(6.75rem, 11vw, 9rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--newsletter-art-size);
  gap: clamp(.75rem, 2vw, 1.25rem);
  align-items: start;
}

.newsletter-copy {
  grid-column: 1;
}

.newsletter-art {
  grid-column: 2;
  grid-row: 1;
  inline-size: var(--newsletter-art-size);
  justify-self: end;
  color: var(--accent);
}

.mail-mark {
  inline-size: 100%;
  block-size: auto;
}

.newsletter-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(18rem, .9fr) minmax(20rem, 1.1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  padding: 1.4rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  box-shadow: var(--shadow);
}

.newsletter-panel.compact {
  grid-template-columns: 1fr;
  max-width: 42rem;
}

.newsletter-layout.dashboard .newsletter-panel {
  grid-template-columns: minmax(14rem, .45fr) minmax(22rem, 1fr);
}

.signed-in-strip {
  display: grid;
  gap: .8rem;
  align-content: start;
  min-width: 0;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 6px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    color-mix(in srgb, var(--surface) 78%, transparent);
}

.signed-in-strip span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 720;
}

.text-button {
  justify-self: start;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  font-weight: 760;
}

.text-button:hover {
  text-decoration: underline;
  text-underline-offset: .2em;
}

.email-field {
  display: grid;
  gap: .75rem;
  min-width: 0;
}

.newsletter-panel .form-status {
  grid-column: 1 / -1;
}

.newsletter-panel .primary {
  grid-column: 1;
  align-self: end;
  inline-size: 100%;
  min-block-size: 3rem;
}

.topic-fieldset {
  grid-column: 2;
  grid-row: span 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 1rem;
  min-width: 0;
}

fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

legend,
.email-field label {
  font-weight: 720;
}

.topic-fieldset legend {
  grid-column: 1;
  min-width: 0;
  padding: 0;
  font-weight: 720;
}

.topic-fieldset .topic-toggle {
  grid-column: 2;
  justify-self: end;
}

.topic-options {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  gap: .6em .6em;
  margin-block-start: .15rem;
}

.checkline {
  display: flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
  margin: 0;
  padding: .45rem .55rem;
  border: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-radius: 6px;
  background: color-mix(in srgb, var(--surface) 66%, transparent);
}

.checkline span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.checkline input {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  min-height: 0;
  accent-color: var(--accent);
}

.topic-toggle {
  --toggle-state: var(--accent);
  --toggle-bg: color-mix(in srgb, var(--toggle-state) 18%, var(--surface));
  --toggle-fg: var(--accent-strong);
  --toggle-knob-bg: color-mix(in srgb, var(--surface) 88%, white 8%);
  --toggle-knob-fg: var(--accent-strong);
  display: inline-grid;
  grid-template-columns: minmax(5.6rem, auto) 2.75rem;
  align-items: center;
  gap: .65rem;
  min-block-size: 2.35rem;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--toggle-state) 40%, var(--line));
  border-radius: 999px;
  background: var(--toggle-bg);
  color: var(--toggle-fg);
  cursor: pointer;
}

.topic-toggle[aria-pressed="true"] {
  --toggle-state: #ff6b64;
  --toggle-bg: color-mix(in srgb, var(--toggle-state) 86%, var(--surface));
  --toggle-fg: #260707;
  --toggle-knob-bg: color-mix(in srgb, #17201d 92%, black);
  --toggle-knob-fg: #ff8b86;
}

.topic-toggle[aria-pressed="false"] {
  --toggle-state: var(--accent);
  --toggle-bg: color-mix(in srgb, var(--accent) 86%, var(--surface));
  --toggle-fg: #062018;
  --toggle-knob-bg: color-mix(in srgb, #17201d 92%, black);
  --toggle-knob-fg: var(--accent);
}

.topic-toggle-text {
  grid-column: 1;
  grid-row: 1;
  padding-inline-start: 1rem;
  font-weight: 760;
  line-height: 1;
  transition:
    opacity 180ms var(--ease),
    transform 220ms var(--ease);
}

.topic-toggle-clear {
  opacity: 0;
  transform: translateY(.45rem);
}

.topic-toggle[aria-pressed="true"] .topic-toggle-select {
  opacity: 0;
  transform: translateY(-.45rem);
}

.topic-toggle[aria-pressed="true"] .topic-toggle-clear {
  opacity: 1;
  transform: translateY(0);
}

.topic-toggle-track {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.95rem;
  block-size: 1.95rem;
  margin-inline-end: .25rem;
  border-radius: 50%;
  background: var(--toggle-knob-bg);
  color: var(--toggle-knob-fg);
  box-shadow: 0 2px 8px rgb(0 0 0 / 16%);
  transition:
    transform 260ms var(--ease),
    color 180ms var(--ease),
    background 180ms var(--ease);
}

.topic-toggle-glyph {
  inline-size: 1.1rem;
  block-size: 1.1rem;
}

.topic-toggle-check,
.topic-toggle-line {
  transition:
    stroke-dashoffset 260ms var(--ease),
    opacity 180ms var(--ease),
    transform 220ms var(--ease);
}

.topic-toggle-check {
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
  opacity: 0;
}

.topic-toggle-line {
  stroke-dasharray: 10;
  stroke-dashoffset: 0;
  opacity: 1;
}

.topic-toggle[aria-pressed="true"] .topic-toggle-track {
  transform: rotate(-8deg);
}

.topic-toggle[aria-pressed="true"] .topic-toggle-check {
  stroke-dashoffset: 0;
  opacity: 1;
}

.topic-toggle[aria-pressed="true"] .topic-toggle-line {
  stroke-dashoffset: 10;
  opacity: 0;
  transform: scaleX(.6);
}

.topic-toggle:hover {
  border-color: color-mix(in srgb, var(--toggle-state) 68%, var(--line));
}

.topic-toggle:hover .topic-toggle-track {
  transform: translateX(2px) rotate(-8deg);
}

.newsletter-promises {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  text-align: center;
}

.newsletter-promises article {
  padding: 1rem;
}

.newsletter-promises h2 {
  font-size: .95rem;
  margin: .2rem 0;
}

.newsletter-promises p,
.muted {
  color: var(--muted);
}

.form-status {
  position: relative;
  display: grid;
  gap: .2rem;
  padding: .85rem 1rem;
  padding-inline-end: 6.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.form-status.ok {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
}

.form-status.error {
  border-color: #e05f5f;
}

.form-status p {
  margin: 0;
  color: var(--muted);
}

.status-dismiss {
  position: absolute;
  inset-block-start: .55rem;
  inset-inline-end: .55rem;
  min-height: 0;
  padding: .35rem .55rem;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 740;
}

.status-dismiss:hover,
.status-dismiss:focus-visible {
  color: var(--text);
  border-color: currentColor;
}

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 58rem;
}

caption {
  padding: .85rem 1rem;
  color: var(--muted);
  text-align: left;
  font-weight: 720;
}

th,
td {
  padding: .75rem .85rem;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  color: var(--muted);
  font-size: .78rem;
  text-transform: uppercase;
}

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  margin-block: 1.2rem;
}

.pagination .disabled {
  color: var(--muted);
  opacity: .55;
}

.site-footer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2rem;
  max-width: 1180px;
  margin-inline: auto;
  padding: 2rem;
  color: var(--muted);
  border-top: 1px solid var(--line);
  font-size: .88rem;
}

.footer-legal {
  margin: 0;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: .8rem 1.4rem;
}

.footer-colophon {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .82rem;
  color: var(--muted);
}

.sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body[data-copied="true"]::after {
  content: "Copied";
  position: fixed;
  inset-inline-end: 1rem;
  inset-block-end: 1rem;
  padding: .7rem .9rem;
  border-radius: var(--radius);
  background: var(--text);
  color: var(--bg);
  box-shadow: var(--shadow);
}

.rama-mark {
  position: relative;
  overflow: visible;
}

.rama-mark-svg {
  inline-size: 100%;
  block-size: 100%;
  display: block;
  overflow: visible;
  transform-origin: 50% 60%;
}

.wave-bar,
.wave-cap,
.cap-top,
.cap-base,
.cap-tassel,
.link-icon,
.link-arrow {
  transform-box: fill-box;
}

.cap-top {
  transform-origin: 50% 74%;
}

.cap-base {
  transform-origin: 50% 50%;
}

.cap-tassel {
  transform-origin: 50% 0;
}

@media (prefers-reduced-motion: no-preference) {
  .site-header nav a::after,
  .site-header nav a.nav-cta,
  .nav-mail-flap,
  .nav-cta-arrow,
  .site-header nav a.nav-github,
  .brand span,
  .link-arrow,
  .rama-mark-svg,
  .wave-cap,
  .cap-top,
  .cap-tassel,
  .letter,
  .dot,
  .principle-card,
  .cl-person,
  .cl-arm,
  .cl-clasp,
  .pl-ring,
  .enc-shackle,
  .enc-bit,
  .eu-dot,
  .eu-pin,
  .eu-pin-dot {
    transition: transform 260ms var(--ease), opacity 220ms var(--ease), stroke-dashoffset 420ms var(--ease);
  }

  .theme-glyph {
    transition: transform 180ms var(--ease);
  }

  .theme-toggle:hover .theme-glyph {
    transform: rotate(-8deg) scale(1.05);
  }

  .theme-toggle:active .theme-glyph {
    transform: rotate(8deg) scale(.92);
  }

  .brand span {
    animation: terminal-cursor 1.35s steps(2, end) infinite;
  }

  .project-link {
    transition:
      border-color 180ms var(--ease),
      background-color 180ms var(--ease),
      box-shadow 180ms var(--ease),
      color 180ms var(--ease),
      transform 180ms var(--ease);
  }

  .project-link:hover,
  .project-link:focus-visible {
    transform: translateY(-1px);
  }

  .project-link:hover .link-arrow,
  .project-link:focus-visible .link-arrow {
    transform: translateX(3px);
  }

  .project-link:hover .link-icon,
  .project-link:focus-visible .link-icon {
    opacity: 1;
  }

  .project-card.rama:hover .rama-mark-svg {
    transform: translateY(-2px) scale(1.04) rotate(-2deg);
  }

  .project-card.netstack:hover .wave-bar-1,
  .project-card.netstack:hover .wave-bar-3 {
    animation: wave-up 760ms var(--ease) infinite alternate;
  }

  .project-card.netstack:hover .wave-bar-2,
  .project-card.netstack:hover .wave-bar-4 {
    animation: wave-down 760ms var(--ease) infinite alternate;
  }

  .project-card.netstack:hover .wave-bar-2 {
    animation-delay: 90ms;
  }

  .project-card.netstack:hover .wave-bar-3 {
    animation-delay: 160ms;
  }

  .project-card.netstack:hover .wave-bar-4 {
    animation-delay: 230ms;
  }

  .project-card.netstack:hover .wave-cap-left {
    transform: translateX(-2px);
  }

  .project-card.netstack:hover .wave-cap-right {
    transform: translateX(2px);
  }

  .project-card.elementary:hover .cap-top {
    transform: translateY(-3px) rotate(-1.5deg);
  }

  .project-card.elementary:hover .cap-tassel {
    transform: translateY(-1px) rotate(6deg);
  }

  /* network-activity LEDs flicker in organic bursts; the two activity LEDs run
     at different (intentionally desynced) rates, the power LED breathes slowly.
     Hovering a unit makes it look busier. */
  .su-led-pwr {
    animation: su-pwr 4s ease-in-out infinite;
  }

  /* Each card runs a different mix of burst patterns + rates (offset delays)
     so no two cards blink alike and the whole rack reads as live traffic. */
  .project-card.netstack .su-led-act {
    animation: su-act-a 2.3s linear infinite;
  }
  .project-card.netstack .su-led-act2 {
    animation: su-act-c 3.1s linear infinite;
    animation-delay: -1.1s;
  }
  .project-card.netstack .su-led-pwr {
    animation-duration: 4.7s;
  }

  .project-card.elementary .su-led-act {
    animation: su-act-b 2.7s linear infinite;
    animation-delay: -.7s;
  }
  .project-card.elementary .su-led-act2 {
    animation: su-act-d 3.7s linear infinite;
    animation-delay: -2.2s;
  }
  .project-card.elementary .su-led-pwr {
    animation-duration: 3.3s;
  }

  .project-card.rama .su-led-act {
    animation: su-act-c 2.1s linear infinite;
    animation-delay: -.5s;
  }
  .project-card.rama .su-led-act2 {
    animation: su-act-a 3.5s linear infinite;
    animation-delay: -1.9s;
  }
  .project-card.rama .su-led-pwr {
    animation-duration: 5.3s;
  }

  .server-unit:hover .su-led-act,
  .server-unit:hover .su-led-act2 {
    animation-duration: 1.1s;
  }

  @keyframes su-pwr {
    0%, 100% { opacity: .66; }
    50% { opacity: 1; }
  }

  @keyframes su-act-a {
    0%, 3% { opacity: .14; }
    4%, 5% { opacity: 1; } 7% { opacity: .14; }
    16%, 17% { opacity: 1; } 19% { opacity: .14; }
    30%, 31% { opacity: 1; } 33% { opacity: .14; } 34%, 35% { opacity: 1; } 37% { opacity: .14; }
    52%, 53% { opacity: 1; } 55% { opacity: .14; }
    68%, 69% { opacity: 1; } 71% { opacity: .14; }
    82%, 83% { opacity: 1; } 85%, 100% { opacity: .14; }
  }

  @keyframes su-act-b {
    0% { opacity: .14; }
    8%, 9% { opacity: 1; } 10% { opacity: .14; } 12%, 13% { opacity: 1; } 14% { opacity: .14; } 16%, 17% { opacity: 1; } 18% { opacity: .14; }
    40% { opacity: .14; } 41%, 42% { opacity: 1; } 44% { opacity: .14; }
    60%, 61% { opacity: 1; } 62% { opacity: .14; } 64%, 65% { opacity: 1; } 66% { opacity: .14; }
    90% { opacity: .14; } 91%, 92% { opacity: 1; } 94%, 100% { opacity: .14; }
  }

  @keyframes su-act-c {
    0%, 11% { opacity: .14; }
    12%, 13% { opacity: 1; } 15% { opacity: .14; }
    38% { opacity: .14; } 40%, 41% { opacity: 1; } 43% { opacity: .14; }
    62%, 63% { opacity: 1; } 65% { opacity: .14; }
    78%, 79% { opacity: 1; } 81%, 100% { opacity: .14; }
  }

  @keyframes su-act-d {
    0%, 4% { opacity: .14; }
    5%, 6% { opacity: 1; } 7% { opacity: .14; } 8%, 9% { opacity: 1; } 11% { opacity: .14; }
    35% { opacity: .14; } 36%, 37% { opacity: 1; } 38% { opacity: .14; } 39%, 40% { opacity: 1; } 42% { opacity: .14; }
    64%, 65% { opacity: 1; } 66% { opacity: .14; } 67%, 68% { opacity: 1; } 70% { opacity: .14; }
    88%, 89% { opacity: 1; } 91%, 100% { opacity: .14; }
  }

  .newsletter-art:hover .letter {
    transform: translateY(-7px) rotate(2deg);
  }

  .newsletter-art:hover .dot-a {
    transform: translate(-5px, -5px);
  }

  .newsletter-art:hover .dot-b {
    transform: translate(5px, -4px);
  }

  /* Open by default — two people clasp into a handshake on hover */
  .collab-svg .cl-clasp {
    opacity: 0;
  }

  .collab-svg .cl-arm-l {
    transform: translateX(-3px);
  }

  .collab-svg .cl-arm-r {
    transform: translateX(3px);
  }

  .principle-card:hover .cl-arm-l,
  .principle-card:hover .cl-arm-r {
    transform: translateX(0);
  }

  .principle-card:hover .cl-clasp {
    opacity: 1;
    animation: cl-shake 520ms var(--ease) infinite;
  }

  .principle-card:hover .cl-person-l,
  .principle-card:hover .cl-body-l {
    transform: translateX(1.5px);
  }

  .principle-card:hover .cl-person-r,
  .principle-card:hover .cl-body-r {
    transform: translateX(-1.5px);
  }

  /* Built for reliability — a pulse sweeps the uptime monitor */
  .pulse-svg .pl-lead {
    stroke-dasharray: 6 250;
    stroke-dashoffset: 60;
  }

  .principle-card:hover .pl-lead {
    animation: pl-travel 1.6s linear infinite;
  }

  .principle-card:hover .pl-ring {
    animation: pl-ring 1.6s var(--ease) infinite;
  }

  /* Privacy first — the lock stays shut while the data encrypts (scrambles) */
  .principle-card:hover .enc-bit-1 {
    animation: enc-scramble-1 600ms steps(3) infinite;
  }

  .principle-card:hover .enc-bit-2 {
    animation: enc-scramble-2 600ms steps(3) infinite;
  }

  .principle-card:hover .enc-bit-3 {
    animation: enc-scramble-3 600ms steps(3) infinite;
  }

  .principle-card:hover .enc-bit-4 {
    animation: enc-scramble-4 600ms steps(3) infinite;
  }

  .principle-card:hover .enc-shackle {
    transform: translateY(1.5px);
  }

  .principle-card:hover .eu-dot {
    animation: eu-dot-breathe 980ms var(--ease) infinite alternate;
  }

  .principle-card:hover .eu-dot:nth-of-type(2n) {
    animation-delay: 90ms;
  }

  .principle-card:hover .eu-dot:nth-of-type(3n) {
    animation-delay: 180ms;
  }

  .principle-card:hover .eu-pin {
    transform: translateY(-2px);
  }

  .principle-card:hover .eu-pin-dot {
    transform: scale(1.18);
  }

  @keyframes cl-shake {
    0%,
    100% {
      transform: translateY(-1px);
    }
    50% {
      transform: translateY(1px);
    }
  }

  @keyframes pl-travel {
    from {
      stroke-dashoffset: 60;
    }
    to {
      stroke-dashoffset: -200;
    }
  }

  @keyframes pl-ring {
    0%,
    100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.07);
    }
  }

  @keyframes wave-up {
    from {
      transform: translateY(3px);
    }
    to {
      transform: translateY(-6px);
    }
  }

  @keyframes wave-down {
    from {
      transform: translateY(-3px);
    }
    to {
      transform: translateY(6px);
    }
  }

  @keyframes terminal-cursor {
    0%,
    52% {
      opacity: 1;
      transform: translateY(0) scaleX(1);
      filter: drop-shadow(0 0 0 color-mix(in srgb, var(--accent) 0%, transparent));
    }
    53%,
    78% {
      opacity: .18;
      transform: translateY(.03em) scaleX(.82);
      filter: drop-shadow(0 0 .35rem color-mix(in srgb, var(--accent) 55%, transparent));
    }
    79%,
    100% {
      opacity: 1;
      transform: translateY(0) scaleX(1);
      filter: drop-shadow(0 0 .25rem color-mix(in srgb, var(--accent) 35%, transparent));
    }
  }

  @keyframes enc-scramble-1 {
    0% {
      transform: scaleX(1);
    }
    33% {
      transform: scaleX(.4) translateX(4px);
    }
    66% {
      transform: scaleX(1.6);
    }
  }

  @keyframes enc-scramble-2 {
    0% {
      transform: scaleX(1);
    }
    33% {
      transform: scaleX(1.5) translateX(-3px);
    }
    66% {
      transform: scaleX(.5);
    }
  }

  @keyframes enc-scramble-3 {
    0% {
      transform: scaleX(1);
    }
    33% {
      transform: scaleX(.6);
    }
    66% {
      transform: scaleX(1.4) translateX(3px);
    }
  }

  @keyframes enc-scramble-4 {
    0% {
      transform: scaleX(1);
    }
    33% {
      transform: scaleX(1.4);
    }
    66% {
      transform: scaleX(.5) translateX(-2px);
    }
  }

  @keyframes eu-dot-breathe {
    from {
      transform: scale(.88);
      opacity: var(--principle-icon-soft-opacity);
    }
    to {
      transform: scale(1.12);
      opacity: 1;
    }
  }
}

@media (max-width: 860px) {
  .site-header {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .65rem clamp(.55rem, 2vw, 1rem);
  }

  .brand {
    grid-row: 1;
    grid-column: 1;
  }

  .theme-toggle {
    grid-row: 1;
    grid-column: 3;
    justify-self: end;
  }

  .site-header nav {
    grid-row: 1;
    grid-column: 2;
    min-width: 0;
    justify-self: end;
    justify-content: flex-end;
    flex-wrap: nowrap;
    gap: .7rem clamp(.75rem, 2.6vw, 1.15rem);
    max-width: 100%;
  }

  .landing-grid > h1 {
    line-height: 1.06;
  }

  .site-header nav a:not(.nav-cta, .nav-github) {
    padding-inline: 0;
  }

  .site-header nav a.nav-cta {
    min-height: 2.2rem;
    padding: .48rem .7rem;
  }

  .site-header nav a.nav-github {
    min-height: 2.2rem;
    padding: .48rem .65rem;
  }

  .landing-grid,
  .newsletter-layout.dashboard .newsletter-panel,
  .newsletter-panel,
  .newsletter-promises {
    grid-template-columns: 1fr;
  }

  .newsletter-layout {
    --newsletter-art-size: clamp(6.25rem, 18vw, 8rem);
    grid-template-columns: minmax(0, 1fr) var(--newsletter-art-size);
    gap: clamp(.65rem, 1.8vw, .9rem);
  }

  .newsletter-copy {
    grid-column: 1;
    min-width: 0;
  }

  .principle-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem .9rem;
  }

  .rust-roots-inner {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: clamp(.55rem, 1.6vw, .85rem);
  }

  .rust-roots-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: minmax(3rem, 1fr);
    inline-size: 100%;
    justify-self: stretch;
  }

  .rust-roots-copy {
    align-self: auto;
    max-width: none;
  }

  .landing-grid > .eyebrow,
  .landing-grid > h1,
  .intro-copy,
  .project-list {
    grid-column: auto;
    grid-row: auto;
  }

  .newsletter-art {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    align-self: start;
    inline-size: var(--newsletter-art-size);
    max-width: none;
    margin: clamp(.15rem, .7vw, .45rem) 0 0;
    pointer-events: auto;
  }

  .topic-fieldset,
  .newsletter-panel .primary {
    grid-column: auto;
    grid-row: auto;
  }

  .topic-fieldset {
    grid-template-columns: 1fr;
    row-gap: .85rem;
  }

  .topic-fieldset .topic-toggle {
    grid-column: 1;
    justify-self: start;
    margin-block: .05rem .55rem;
  }

  .project-card {
    grid-template-columns: 5.1rem 1fr;
  }

  .project-links {
    grid-column: 1 / -1;
    border-inline-start: 0;
    border-top: 1px solid var(--line);
    padding: .9rem 0 0;
  }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .footer-nav {
    order: -1;
    justify-content: start;
  }

  .article-row {
    grid-template-columns: 1fr;
    gap: .4rem;
  }

  .article-row time {
    grid-row: auto;
    padding-block-start: 0;
  }

  .admin-tools,
  .admin-tools form {
    flex-direction: column;
    align-items: stretch;
  }
}

@media (max-width: 560px) {
  .newsletter-layout {
    gap: .85rem;
  }

  .newsletter-art {
    inline-size: var(--newsletter-art-size);
    margin-block-start: .2rem;
  }

  .rust-roots-inner {
    gap: .5rem;
  }

  .rust-root-link {
    min-block-size: 2.9rem;
    padding: .55rem .65rem;
  }

  .project-list {
    grid-template-columns: 1fr;
  }

  /* the wide Rama unit is narrow now too — move its vent to the bottom */
  .su-full {
    padding-block-end: 1.7rem;
    padding-inline-end: 1.3rem;
  }

  .su-full .su-vent {
    inset-inline: 16px;
    inset-block-start: auto;
    inset-block-end: 10px;
    inline-size: auto;
    block-size: 11px;
  }

  .su-full .su-leds {
    inset-block-start: 13px;
    inset-inline-end: 14px;
    flex-direction: row;
  }
}

@media (max-width: 680px) {
  .site-header nav {
    gap: .65rem clamp(.75rem, 3.4vw, 1rem);
  }

  .site-header nav a.nav-cta,
  .site-header nav a.nav-github {
    flex: 0 0 auto;
    justify-content: center;
  }

  .site-header nav a.nav-cta,
  .site-header nav a.nav-github {
    inline-size: 2.55rem;
    min-height: 2.55rem;
    padding: 0;
    gap: 0;
  }

  .site-header nav a.nav-cta span,
  .site-header nav a.nav-github span {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .site-header nav a.nav-cta .nav-cta-arrow {
    display: none;
  }
}

@media (max-width: 430px) {
  .site-header {
    padding-inline: .85rem;
    gap: .55rem;
  }

  .brand {
    font-size: 1.08rem;
  }

  .site-header nav {
    gap: .58rem;
    font-size: .8rem;
  }

  .landing-grid > h1 {
    line-height: 1.12;
  }

  .site-header nav a.nav-cta,
  .site-header nav a.nav-github {
    inline-size: 2.35rem;
    min-height: 2.35rem;
  }

  .theme-toggle {
    inline-size: 2.25rem;
    block-size: 2.25rem;
  }
}

@media (max-width: 360px) {
  .site-header {
    grid-template-columns: 1fr auto;
  }

  .theme-toggle {
    grid-column: 2;
  }

  .site-header nav {
    grid-row: 2;
    grid-column: 1 / -1;
    justify-self: end;
    justify-content: flex-end;
  }
}

@media (max-width: 430px) {
  .rama-aspects {
    grid-template-columns: 1fr;
  }
}