:root {
  color-scheme: light;
  --paper: #f2f0e8;
  --ink: #202721;
  --muted: #4e5d51;
  --line: #c7cabe;
  --green: #244b38;
  --terminal: #192820;
  --phosphor: #c3f09a;
  --mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Consolas, monospace;
  --body: system-ui, -apple-system, "Segoe UI", sans-serif;
}

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

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font: 1rem/1.6 var(--body);
}

a { color: inherit; }

:focus-visible {
  outline: 3px solid #286b54;
  outline-offset: 5px;
}

h1, h2, h3, p { margin: 0; }

.frame {
  width: min(74rem, calc(100% - 2 * clamp(1.25rem, 5vw, 4rem)));
  margin-inline: auto;
}

.skip-link {
  position: fixed;
  z-index: 1;
  top: 1rem;
  left: 1rem;
  padding: .65rem 1rem;
  color: white;
  background: var(--green);
  transform: translateY(-200%);
}

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

.site-header, .site-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding-block: 1.15rem;
}

.site-header { border-bottom: 1px solid var(--line); }

.site-header nav, .site-footer {
  font: 600 .78rem/1.35 var(--mono);
}

.site-header nav a, .site-footer a, .project-link {
  display: inline-block;
  padding-block: .35rem;
  text-decoration-thickness: 1px;
  text-underline-offset: .25em;
}

.site-header nav a:hover, .site-footer a:hover, .project-link:hover { color: #296046; }

.wordmark {
  font: 900 1.65rem/1 var(--mono);
  letter-spacing: -.12em;
  text-decoration: none;
}

.wordmark span { color: #3a704e; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.25rem, 6vw, 6rem);
  padding-block: clamp(3rem, 8vw, 7rem);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  color: var(--green);
  font: 700 .8rem/1.4 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.eyebrow > span {
  width: .58rem;
  height: .58rem;
  background: #3d7753;
  border-radius: 50%;
}

.hero h1, .error-page h1 {
  margin-top: 1rem;
  max-width: 13ch;
  font-size: clamp(2.75rem, 6.2vw, 5.65rem);
  font-weight: 770;
  line-height: .98;
  letter-spacing: -.065em;
  text-wrap: balance;
}

.intro {
  max-width: 42ch;
  margin-top: 1.35rem;
  color: var(--muted);
  font-size: clamp(1rem, 1.65vw, 1.22rem);
  line-height: 1.55;
}

.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1.6rem;
  min-height: 2.85rem;
  padding: .6rem .95rem;
  border-radius: .3rem;
  color: #fff;
  background: var(--green);
  font: 700 .82rem/1.4 var(--mono);
  text-decoration: none;
}

.button:hover { background: #193526; }

.terminal {
  overflow: hidden;
  border: 1px solid #35483a;
  border-radius: .9rem;
  background: var(--terminal);
  color: var(--phosphor);
  box-shadow: .65rem .65rem 0 #d8ded0;
  font-family: var(--mono);
}

.terminal-top, .terminal-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  padding: .85rem clamp(.8rem, 2.5vw, 1.25rem);
  color: #b9cbb9;
  font-size: .72rem;
  letter-spacing: .035em;
}

.terminal-top { border-bottom: 1px solid #3c5241; }
.terminal-bottom { border-top: 1px solid #3c5241; }

.terminal-indicators { display: flex; gap: .32rem; }

.terminal-indicators i {
  width: .37rem;
  height: .37rem;
  border-radius: 50%;
  background: #80997d;
}

.terminal-indicators i:first-child { background: var(--phosphor); }

.terminal-screen {
  min-height: clamp(10rem, 24vw, 18rem);
  display: flex;
  justify-content: center;
  align-items: baseline;
  align-content: center;
  flex-wrap: wrap;
  gap: .8rem;
  padding: 1rem;
  background: repeating-linear-gradient(to bottom, transparent 0 5px, #fff1 6px 7px);
}

.terminal-mark {
  font-size: clamp(4.7rem, 13vw, 10.5rem);
  line-height: .86;
  font-weight: 900;
  letter-spacing: -.16em;
  padding-inline-end: .16em;
}

.terminal-cursor {
  width: clamp(.6rem, 2vw, 1rem);
  height: .16rem;
  background: var(--phosphor);
}

.projects { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .4rem 1.5rem;
  padding-bottom: .75rem;
}

.section-heading h2 {
  font-size: clamp(1.5rem, 3vw, 2.15rem);
  font-weight: 720;
  line-height: 1.15;
  letter-spacing: -.035em;
}

.section-note, .project-number {
  color: var(--muted);
  font: 600 .74rem/1.35 var(--mono);
}

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

.project {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  align-items: start;
  gap: .45rem 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.project-number { padding-top: .37rem; }

.project h3 {
  font-size: 1.23rem;
  letter-spacing: -.025em;
  line-height: 1.35;
}

.project p { margin-top: .15rem; color: var(--muted); }

.project-access { display: grid; justify-items: end; gap: .12rem; }

.status {
  justify-self: end;
  padding: .27rem .55rem;
  border: 1px solid #bbc5b8;
  border-radius: .28rem;
  color: #3d5143;
  font: 650 .72rem/1.3 var(--mono);
}

.status-restricted { background: #dce9d8; border-color: #bbd0b7; }
.project-link { color: var(--green); font: 650 .78rem/1.3 var(--mono); }

.site-footer {
  flex-wrap: wrap;
  border-top: 1px solid var(--line);
  color: var(--muted);
}

.site-footer p > span { padding-inline: .25em; }

.error-page { min-height: 55vh; padding-block: clamp(4rem, 10vw, 8rem); }

@media (max-width: 48rem) {
  .hero { grid-template-columns: 1fr; }
  .terminal { max-width: 32rem; }
  .terminal-mark { font-size: clamp(5rem, 22vw, 10rem); }
}

@media (max-width: 34rem) {
  .hero h1, .error-page h1 { font-size: clamp(2.25rem, 10.5vw, 3.2rem); }
  .project { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .project-access, .project > .status { grid-column: 2; justify-self: start; }
  .project-access { justify-items: start; }
}