:root{
  --paper:#f6f4ef; --ink:#14120f; --muted:#6a655c; --rule:#ded9ce; --accent:#0d6b45;
  --matrix-opacity:.32;
  --serif:Georgia,"Iowan Old Style","Times New Roman",serif;
  --sans:-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root{ --paper:#0e100f; --ink:#e9e6df; --muted:#8f8a80; --rule:#262a27; --accent:#5fd39c; --matrix-opacity:.22; }
}
*,*::before,*::after{ box-sizing:border-box }
html{ color-scheme:light dark }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  counter-reset:sec;
}
::selection{ background:var(--accent); color:var(--paper) }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:2px }
a{
  color:inherit; text-decoration-line:underline; text-decoration-color:var(--accent);
  text-decoration-thickness:1px; text-underline-offset:.22em;
}
a:hover{ color:var(--accent) }
a[href^="http"]::after{
  content:"\2197"; display:inline-block; margin-left:.22em;
  font-size:.72em; color:var(--accent);
}
.skip{ position:absolute; left:-9999px }
.skip:focus{
  left:1rem; top:1rem; z-index:9; padding:.55rem .9rem;
  background:var(--ink); color:var(--paper); text-decoration:none;
  font-family:var(--mono); font-size:.8125rem;
}

.wrap{ width:min(100% - 2.5rem, 64rem); margin-inline:auto; padding-block:clamp(3rem,8vw,6rem) }

header{ padding-bottom:clamp(2.5rem,6vw,4rem) }
h1{
  font-family:var(--serif); font-weight:400; letter-spacing:-.025em; line-height:.93;
  font-size:clamp(2.75rem,9.5vw,5.75rem); text-wrap:balance; margin:0 0 1.1rem;
}
.eyebrow{
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.08em;
  color:var(--muted); margin:0 0 clamp(1.5rem,4vw,2.5rem);
}
.role{
  font-family:var(--mono); font-size:clamp(.8125rem,1.8vw,.9375rem);
  text-transform:uppercase; letter-spacing:.15em; margin:0 0 1.6rem;
}
.role::before{
  content:""; display:inline-block; width:.5em; height:.5em;
  background:var(--accent); margin-right:.7em;
}
.lede{
  font-size:clamp(1.125rem,2.2vw,1.375rem); line-height:1.5; max-width:54ch;
  margin:0 0 clamp(2rem,4vw,2.75rem);
}
.contact{
  display:flex; flex-wrap:wrap; gap:.5rem 2.25rem;
  font-family:var(--mono); font-size:.875rem;
}

section{ padding-block:clamp(2.5rem,5vw,4rem); border-top:1px solid var(--rule); counter-increment:sec }
h2{
  font-family:var(--mono); font-size:.8125rem; font-weight:500; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted); margin:0;
}
h2::before{ content:counter(sec,decimal-leading-zero) " / "; color:var(--accent) }
p{ margin:0 0 1.1em; max-width:64ch }
p:last-child{ margin-bottom:0 }

@media (min-width:62rem){
  section{ display:grid; grid-template-columns:13rem minmax(0,1fr); gap:clamp(2rem,4vw,4rem); align-items:start }
  h2{ position:sticky; top:2.5rem; padding-top:.35rem }
}

.log{ list-style:none; margin:0; padding:0 }
.log li{ display:grid; grid-template-columns:11rem minmax(0,1fr); gap:.35rem 2rem }
.log li + li{ border-top:1px solid var(--rule); margin-top:1.75rem; padding-top:1.75rem }
.when{
  grid-column:1; font-family:var(--mono); font-size:.8125rem;
  letter-spacing:.04em; color:var(--muted); margin:0;
}
.log li > :not(.when){ grid-column:2 }
.log h3{
  font-family:var(--serif); font-weight:400; letter-spacing:-.01em; line-height:1.2;
  font-size:clamp(1.25rem,2.4vw,1.5rem); margin:0 0 .5rem;
}

.spec{ margin:0 }
.spec > div{
  display:grid; grid-template-columns:11rem minmax(0,1fr); gap:.25rem 2rem;
  padding-top:1rem; border-top:1px solid var(--rule);
}
.spec > div:first-child{ border-top:0; padding-top:0 }
.spec > div + div{ margin-top:1rem }
.spec dt{
  font-family:var(--mono); font-size:.8125rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted);
}
.spec dd{ margin:0 }

.links{
  list-style:none; margin:0; padding:0; display:grid; gap:.6rem;
  font-family:var(--mono); font-size:.9375rem;
}
.links a{ text-decoration-color:var(--rule) }
.links a:hover{ text-decoration-color:currentcolor }

footer{
  border-top:1px solid var(--rule); padding-top:2rem;
  font-family:var(--mono); font-size:.8125rem; color:var(--muted);
}

@media (max-width:46rem){
  .log li{ grid-template-columns:1fr; gap:.3rem }
  .log li > :not(.when){ grid-column:1 }
  .when{ grid-column:1; margin-bottom:.15rem }
  .log h3{ margin-top:.35rem }
  .spec > div{ grid-template-columns:1fr; gap:.2rem }
}

header{ display:flex; flex-wrap:wrap; align-items:center; gap:clamp(1.5rem,4vw,2.75rem) }
.intro{ flex:1 1 22rem; min-width:0 }

.matrix{
  position:fixed; inset:0; z-index:0; width:100%; height:100%;
  pointer-events:none; opacity:var(--matrix-opacity);
  -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 72%);
  mask-image:linear-gradient(to bottom, #000 0%, transparent 72%);
}
.wrap{ position:relative; z-index:1 }

html{ scroll-behavior:smooth }

@keyframes rise{ from{ opacity:0; transform:translateY(14px) } to{ opacity:1; transform:none } }

.intro > *{ animation:rise .7s cubic-bezier(.2,.7,.3,1) both }
.intro .eyebrow{ animation-delay:.06s }
.intro h1{ animation-delay:.12s }
.intro .role{ animation-delay:.18s }
.intro .lede{ animation-delay:.24s }
.intro .contact{ animation-delay:.3s }

a{ transition:color .15s ease, text-decoration-color .15s ease }
.links a{ display:inline-block; transition:color .15s ease, transform .18s ease }
.links a:hover{ transform:translateX(3px) }

.js .reveal > *{
  opacity:0; transform:translateY(14px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1);
}
.js .reveal.is-visible > *{ opacity:1; transform:none }
.js .reveal > :nth-child(2){ transition-delay:.12s }
.js .reveal > :nth-child(3){ transition-delay:.24s }
.js .reveal > :nth-child(n+4){ transition-delay:.32s }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important }
  html{ scroll-behavior:auto }
  .js .reveal > *{ opacity:1; transform:none }
  .matrix{ display:none }
}