@font-face {
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/fonts/space-grotesk-latin.woff2') format('woff2')}

@font-face {
  font-family:'IBM Plex Mono';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('/fonts/ibm-plex-mono-latin-400.woff2') format('woff2')}

:root {
  color-scheme:dark;
  --background:#0b0e0e;
  --ink:#e9e9df;
  --muted:#a1a79f;
  --accent:#a9b58a;
  --line:#2a302d;
  --gutter:clamp(22px,4.3vw,76px);
  --mono:'IBM Plex Mono',monospace;
  background:var(--background);
  color:var(--ink);
  font-family:'Space Grotesk',Arial,sans-serif;
  font-synthesis:none}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px}
body {
  margin:0}
a {
  color:inherit;
  text-decoration:none}
p {
  line-height:1.7}
button,a {
  -webkit-tap-highlight-color:transparent}
::selection {
  background:var(--accent);
  color:var(--background)}
:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:6px}
a:hover {
  color:var(--accent)}

.skip-link {
  position:fixed;
  top:12px;
  left:var(--gutter);
  z-index:10;
  padding:14px;
  background:var(--ink);
  color:var(--background);
  transform:translateY(-180%)}
.skip-link:focus {
  transform:translateY(0)}

.identity {
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  min-height:760px;
  min-height:max(760px,100svh)}

.identity::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:radial-gradient(ellipse at 73% 45%,#a9b58a0e,transparent 40%),repeating-radial-gradient(ellipse at 83% 47%,transparent 0 13px,#a9b58a17 13px 14px,transparent 14px 27px),linear-gradient(#90a09107 1px,transparent 1px),linear-gradient(90deg,#90a09107 1px,transparent 1px);
  background-size:auto,auto,62px 62px,62px 62px}

.identity.canvas-ready::before {
  visibility:hidden}
.field {
  position:absolute;
  inset:0;
  z-index:-1;
  width:100%;
  height:100%;
  pointer-events:none}

.top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin:0 var(--gutter);
  padding:22px 0;
  border-bottom:1px solid var(--line)}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--mono);
  font-size:.75rem;
  line-height:1.5;
  letter-spacing:.035em;
  min-height:44px}

.mark {
  display:grid;
  place-items:center;
  flex:0 0 29px;
  width:29px;
  height:29px;
  border:1px solid var(--accent);
  color:var(--accent);
  font-family:'Space Grotesk',Arial,sans-serif;
  font-size:.875rem;
  font-weight:500;
  line-height:1}

.navigation {
  display:flex;
  gap:32px;
  margin-left:auto;
  margin-right:32px}
.navigation a {
  display:flex;
  align-items:center;
  min-height:44px;
  font-family:var(--mono);
  font-size:.75rem}

.location {
  font-family:var(--mono);
  font-size:.6875rem;
  line-height:1.5;
  letter-spacing:.09em;
  color:var(--muted)}

.core {
  position:relative;
  display:flex;
  flex:1;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  padding:65px var(--gutter) 55px}

.kicker,.section-label,.micro-label {
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:400;
  line-height:1.6;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--accent)}
.kicker {
  margin:0 0 23px;
  letter-spacing:.17em}

.name {
  margin:0;
  max-width:100%;
  font-size:clamp(3.5rem,10.5vw,10rem);
  font-weight:500;
  line-height:.99;
  letter-spacing:-.066em}
.first {
  display:block;
  margin-bottom:3px;
  font-size:.67em;
  line-height:1.1;
  letter-spacing:-.045em}
.last {
  display:block;
  overflow-wrap:anywhere}
.period {
  color:var(--accent)}

.hero-copy {
  margin:28px 0 0;
  max-width:580px;
  color:#b5bbb3;
  font-size:clamp(1rem,1.3vw,1.1875rem);
  line-height:1.7}

.contacts {
  display:flex;
  flex-wrap:wrap;
  gap:12px 28px;
  margin-top:22px}
.contact {
  display:inline-flex;
  align-items:center;
  gap:20px;
  min-height:44px;
  padding:9px 0;
  border-bottom:1px solid #535a51;
  font-family:var(--mono);
  font-size:.8125rem;
  line-height:1.5;
  transition:color 180ms,border-color 180ms}
.contact span {
  color:var(--accent);
  font-family:Arial,sans-serif;
  font-size:1rem}
.contact:hover {
  border-color:var(--accent)}

.hero-bottom,.bottom {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:0 var(--gutter);
  padding:10px 0;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-family:var(--mono);
  font-size:.6875rem;
  line-height:1.6}
.hero-bottom a,.bottom>a:not(.brand) {
  display:flex;
  align-items:center;
  gap:30px;
  min-height:44px}
.hero-bottom a {
  color:var(--ink)}
.hero-bottom a span {
  color:var(--accent);
  font-size:1rem}

.tick {
  position:absolute;
  width:9px;
  height:9px;
  border-top:1px solid var(--accent);
  border-left:1px solid var(--accent);
  opacity:.65;
  pointer-events:none}
.tick-tl {
  left:calc(var(--gutter) - 14px);
  top:24px}
.tick-tr {
  right:calc(var(--gutter) - 14px);
  top:24px;
  transform:rotate(90deg)}
.tick-bl {
  left:calc(var(--gutter) - 14px);
  bottom:24px;
  transform:rotate(-90deg)}
.tick-br {
  right:calc(var(--gutter) - 14px);
  bottom:24px;
  transform:rotate(180deg)}

.section {
  margin:0 var(--gutter);
  padding:80px 0}
.section+.section {
  border-top:1px solid var(--line)}
.section-label {
  margin:0 0 31px}
.section-label>span {
  margin-right:20px;
  color:var(--muted)}

/* Stack icons are local Devicon SVGs; license: /assets/stack/LICENSE.txt. */
.hero-stack {
  margin:0 var(--gutter);
  padding:0 0 28px;
  scroll-margin-top:24px}
.stack-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 20px;
  margin-bottom:14px}
.stack-heading .micro-label {
  margin:0;
  font-size:.6875rem}
.stack-meta,.contribution-note {
  margin:0;
  color:var(--muted);
  font-family:var(--mono);
  font-size:.6875rem;
  line-height:1.6}
.contribution-note {
  margin-top:12px;
  font-size:.625rem}
.stack-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#0b0e0e38}
.stack-grid>li {
  min-width:0}
.stack-tile {
  --skill-light:0;
  appearance:none;
  width:100%;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  text-align:center;
  cursor:pointer;
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  height:132px;
  padding:28px 8px 14px;
  border-right:1px solid #a9b58a18;
  transition:background 180ms}
.stack-tile:hover,.stack-tile:focus-visible {
  background:#a9b58a09}
.stack-grid>li:last-child .stack-tile {
  border-right:0}
.stack-tile::before {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,#c5d8a518,transparent 72%);
  opacity:var(--skill-light)}
.stack-index {
  position:absolute;
  top:9px;
  left:10px;
  font-family:var(--mono);
  font-size:.5rem;
  color:#818b7c}
.stack-icon {
  display:block;
  flex-shrink:0;
  width:36px;
  height:36px;
  color:rgb(calc(127 + 105 * var(--skill-light)) calc(138 + 103 * var(--skill-light)) calc(113 + 86 * var(--skill-light)));
  filter:drop-shadow(0 0 12px rgb(195 217 157 / calc(var(--skill-light) * .5)))}
.stack-icon-go {
  width:52px}
.stack-icon-aws,.stack-icon-rancher {
  width:48px;
  height:40px}
.stack-name {
  display:block;
  align-content:center;
  min-height:3em;
  max-width:100%;
  font-family:var(--mono);
  font-size:.6875rem;
  line-height:1.5;
  color:var(--muted)}
.stack-arrow {
  position:absolute;
  right:9px;
  bottom:10px;
  font-size:.6875rem;
  color:var(--accent);
  opacity:0;
  transition:opacity 180ms}
.stack-tile:hover .stack-icon,.stack-tile:focus-visible .stack-icon,.stack-tile[aria-expanded="true"] .stack-icon {
  color:var(--ink);
  filter:drop-shadow(0 0 12px #c3d99d66)}
.stack-tile:hover .stack-name,.stack-tile:focus-visible .stack-name,.stack-tile[aria-expanded="true"] .stack-name {
  color:var(--ink)}
.stack-tile:hover .stack-arrow,.stack-tile:focus-visible .stack-arrow,.stack-tile[aria-expanded="true"] .stack-arrow {
  opacity:1}
.stack-tile:focus-visible {
  z-index:1;
  outline-offset:-4px}

.stack-tile[aria-expanded="true"] {
  box-shadow:inset 0 -2px var(--accent);
  background:#a9b58a08}
.stack-tile:disabled {
  cursor:default}
.stack-tile:disabled .stack-arrow {
  display:none}
.stack-inspector[hidden] {
  display:none}
.stack-inspector {
  position:fixed;
  z-index:20;
  width:min(380px,calc(100vw - 32px));
  max-height:calc(100svh - 24px);
  overflow:auto;
  padding:12px 22px 22px;
  color:var(--ink);
  background:#101510fa;
  border:1px solid #677657;
  box-shadow:0 18px 65px #0009,inset 0 0 38px #a9b58a04;
  backdrop-filter:blur(16px)}
.stack-inspector::before,.stack-inspector::after {
  content:'';
  position:absolute;
  width:9px;
  height:9px;
  pointer-events:none;
  border-color:var(--accent);
  border-style:solid}
.stack-inspector::before {
  top:4px;
  left:4px;
  border-width:1px 0 0 1px}
.stack-inspector::after {
  bottom:4px;
  right:4px;
  border-width:0 1px 1px 0}
.inspector-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:9px}
.inspector-topline .micro-label {
  font-size:.5625rem;
  color:var(--muted)}
.inspector-close {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  margin-right:-12px;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:1.5rem;
  cursor:pointer}
.inspector-close:hover {
  color:var(--ink)}
.inspector-heading {
  display:flex;
  align-items:center;
  gap:16px}
.inspector-symbol .stack-icon {
  width:32px;
  height:32px;
  color:var(--accent);
  filter:none}
.inspector-symbol .stack-icon-go {
  width:44px}
.inspector-heading h3 {
  margin:0;
  font-size:1.5rem;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.025em}
.stack-inspector:focus {
  outline:none}
#inspector-description {
  margin:18px 0;
  font-size:.9375rem;
  line-height:1.6;
  color:#bdc5b7}
.inspector-tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px 14px;
  margin:0;
  padding:14px 0 0;
  border-top:1px solid var(--line);
  list-style:none;
  font-family:var(--mono);
  font-size:.625rem;
  line-height:1.6;
  color:var(--accent)}

.area-list {
  margin:0;
  padding:0;
  list-style:none;
  border-top:1px solid var(--line)}
.area {
  border-bottom:1px solid var(--line);
  scroll-margin-top:25px}
.area-header {
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:24px;
  align-items:center;
  position:relative;
  padding:31px 0;
  cursor:default}
.area-number {
  font-family:var(--mono);
  color:var(--accent);
  font-size:.75rem;
  align-self:start;
  padding-top:7px}
.area-title {
  display:block;
  margin:0;
  font-size:clamp(1.4rem,2.4vw,2.25rem);
  line-height:1.18;
  letter-spacing:-.035em;
  font-weight:400}

.area-summary {
  max-width:760px;
  margin:12px 0 0;
  color:var(--muted);
  font-size:.9375rem;
  line-height:1.65}
/* Project logos and source notices: /assets/open-source/NOTICE.txt. */
.oss-mark {
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:27px;
  font-weight:500;
  line-height:1;
  letter-spacing:-.08em}
.oss-mark img,.oss-mark svg {
  display:block;
  width:100%;
  height:100%}
.oss-mark img {
  object-fit:contain;
  filter:grayscale(1) brightness(1.35)}
.stack-icon.oss-mark-wide {
  width:64px}
.oss-mark-code {
  font-family:var(--mono);
  font-size:25px;
  font-weight:400;
  letter-spacing:-.16em}
.oss-project {
  height:146px;
  padding-top:42px}
.oss-count {
  display:inline-flex;
  align-items:center;
  gap:5px;
  top:10px;
  left:9px;
  padding:2px 5px;
  border:1px solid #a9b58a30;
  border-radius:3px;
  background:#151b15;
  color:var(--accent);
  font-size:.625rem;
  line-height:1.4;
  white-space:nowrap}
.oss-count strong {
  font-weight:400;
  font-variant-numeric:tabular-nums}
.oss-count span {
  color:#b5bdae}
.oss-arrow {
  opacity:.55}

.contact-note {
  margin:0 0 18px;
  color:var(--muted);
  font-size:.9375rem}

.contact-layout {
  --contact-card-padding:30px;
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px}
.contact-intro {
  padding-top:calc(var(--contact-card-padding) + 1px)}
.email-address {
  display:inline-flex;
  align-items:center;
  gap:20px;
  min-height:44px;
  border-bottom:1px solid #535a51;
  font-size:clamp(1rem,2.2vw,1.8rem);
  letter-spacing:-.035em;
  line-height:1.6;
  overflow-wrap:anywhere}
.email-address>span {
  color:var(--accent);
  font-size:1.2rem}
.social-links {
  display:flex;
  gap:28px;
  margin-top:22px}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:18px;
  min-height:44px;
  font-family:var(--mono);
  font-size:.6875rem;
  border-bottom:1px solid #535a51}
.text-link>span {
  color:var(--accent)}

.pgp {
  scroll-margin-top:24px;
  border:1px solid var(--line);
  padding:var(--contact-card-padding);
  align-self:start;
  background:#a9b58a03}
.pgp>.micro-label {
  margin:0 0 13px}
.pgp h3 {
  margin:0;
  font-size:1.125rem;
  font-weight:500;
  letter-spacing:-.025em}
.pgp>p:not(.micro-label) {
  color:var(--muted);
  font-size:.875rem;
  line-height:1.75;
  margin:18px 0 9px}
.fingerprint {
  padding-top:21px;
  margin-top:24px;
  border-top:1px solid var(--line)}
.fingerprint>.micro-label {
  font-size:.5625rem;
  color:var(--muted)}
.fingerprint code {
  display:block;
  margin-top:12px;
  max-width:360px;
  font-family:var(--mono);
  font-size:.6875rem;
  color:var(--ink);
  line-height:1.9;
  word-spacing:.12em;
  overflow-wrap:anywhere;
  user-select:all}
.pgp>.pgp-note {
  font-size:.75rem!important;
  margin-bottom:0!important}
.bottom {
  padding-top:20px;
  padding-bottom:24px}
.bottom .brand {
  font-size:.625rem}
.bottom .mark {
  width:25px;
  height:25px;
  flex-basis:25px;
  font-size:.75rem}

@media(min-width:1800px) {
  .section {
  max-width:1500px;
  margin-left:auto;
  margin-right:auto}
.core {
  padding-top:95px;
  padding-bottom:75px}
.identity {
  min-height:900px}
.name {
  font-size:11rem}
}

@media(min-width:701px) and (max-width:1279px) {
.stack-grid {
  grid-template-columns:repeat(6,minmax(0,1fr))}
.stack-grid>li:nth-child(6n) .stack-tile {
  border-right:0}
.stack-grid>li:nth-child(n+7) {
  border-top:1px solid #a9b58a18}
}

@media(max-width:1000px) {
  .navigation {
  margin-right:0;
  gap:24px}
.location {
  display:none}
.area-header {
  grid-template-columns:35px minmax(0,1fr);
  gap:18px}
.contact-layout {
  --contact-card-padding:24px;
  gap:35px}
}

@media(max-width:700px) {
.hero-stack {
  padding-bottom:24px}
.stack-heading {
  gap:5px 16px;
  margin-bottom:12px}
.stack-meta {
  font-size:.625rem}
.stack-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.stack-grid>li:nth-child(2n) .stack-tile {
  border-right:0}
.stack-grid>li:nth-child(n+3) {
  border-top:1px solid #a9b58a12}
.stack-tile {
  gap:12px;
  height:124px;
  padding:26px 8px 12px}
.oss-project {
  height:142px;
  padding-top:42px}
.stack-icon {
  width:29px;
  height:29px}
.stack-icon-go {
  width:42px}
.stack-name {
  font-size:.625rem}
.stack-index {
  left:9px}
.oss-count {
  font-size:.625rem}
.stack-arrow {
  display:none}
.oss-arrow {
  display:block}

  .identity {
  min-height:750px;
  min-height:max(690px,95svh)}
.top {
  flex-wrap:wrap;
  gap:4px;
  padding:15px 0}
.brand {
  font-size:.6875rem;
  gap:8px}
.navigation {
  gap:19px}
.navigation a {
  font-size:.625rem}
.core {
  padding-top:64px;
  padding-bottom:50px}
.name {
  font-size:clamp(3.3rem,12.7vw,5.9rem)}
.kicker {
  font-size:.625rem;
  letter-spacing:.13em}
.contacts {
  gap:12px 26px;
  margin-top:24px}
.contact {
  font-size:.75rem;
  gap:18px}
.hero-bottom {
  font-size:.5625rem;
  gap:4px}
.hero-bottom a {
  gap:15px}
.section {
  padding:60px 0}
.section-label {
  margin-bottom:23px;
  font-size:.625rem}
.contact-layout {
  grid-template-columns:1fr;
  gap:24px}
.contact-intro {
  padding-top:0}
.area-list {
  margin-top:0}
.area-header {
  grid-template-columns:25px 1fr;
  gap:12px;
  padding:25px 0}
.area-number {
  font-size:.625rem;
  padding-top:4px}
.area-title {
  font-size:clamp(1.35rem,5.2vw,1.8rem)}
.contact-layout {
  gap:36px}
.email-address {
  font-size:clamp(1rem,5.2vw,1.5rem)}
.social-links {
  margin-top:18px}
.fingerprint code {
  max-width:330px;
  font-size:.6875rem}
.bottom {
  font-size:.5625rem;
  gap:10px}
.bottom>span {
  display:none}
.bottom .brand {
  font-size:.5625rem}
.bottom>a:not(.brand) {
  gap:10px}
.tick-tl,.tick-bl {
  left:10px}
.tick-tr,.tick-br {
  right:10px}
}

@media(min-width:480px) and (max-width:700px) {
.stack-grid {
  grid-template-columns:repeat(3,minmax(0,1fr))}
.stack-grid>li:nth-child(2n) .stack-tile {
  border-right:1px solid #a9b58a18}
.stack-grid>li:nth-child(3n) .stack-tile {
  border-right:0}
.stack-grid>li:nth-child(3) {
  border-top:0}
}

@media(max-width:390px) {
  .top {
  justify-content:flex-start}
.navigation {
  width:100%;
  justify-content:space-between;
  gap:20px;
  margin-left:0}
.top .brand {
  min-height:36px}
.navigation a {
  min-height:38px}
.core {
  padding-top:60px;
  padding-bottom:48px}
.contact-layout {
  --contact-card-padding:20px}
.fingerprint code {
  font-size:.625rem}
.bottom {
  align-items:flex-start}
.bottom .brand {
  max-width:200px}
}

@media(hover:none), (pointer:coarse) {
.stack-icon {
  color:var(--accent);
  filter:none}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*::before,*::after {
  transition:none!important}
}

@media(forced-colors:active) {
  .field,.identity::before,.tick,.stack-tile::before {
  display:none}
.stack-grid,.area,.top,.hero-bottom,.section,.bottom,.pgp,.fingerprint,.stack-inspector {
  border-color:CanvasText}
.text-link,.email-address,.contact {
  border-color:LinkText}
.stack-grid>li {
  border:1px solid CanvasText}
.stack-tile {
  border:0}
.stack-icon {
  color:LinkText!important;
  filter:none!important}
.stack-name {
  color:LinkText!important}
.stack-tile[aria-expanded="true"] {
  outline:2px solid Highlight;
  outline-offset:-4px}
.stack-inspector {
  background:Canvas;
  color:CanvasText}
.oss-count {
  border-color:CanvasText;
  background:Canvas;
  color:LinkText}
.oss-count span {
  color:LinkText}
:focus-visible {
  outline-color:Highlight}
}