:root {
  --ink:#16201d;
  --paper:#f2f0eb;
  --lime:#d7ff63;
  --line:rgba(22,32,29,.18);
  --muted:#69716e
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:Manrope,Arial,sans-serif
}

.grain {
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9;
  opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.25'/%3E%3C/svg%3E");
  mix-blend-mode:multiply
}

.site-header {
  height:84px;
  padding:0 clamp(24px,5vw,84px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:1
}

.logo {
  color:var(--ink);
  font-weight:800;
  font-size:22px;
  text-decoration:none;
  letter-spacing:-1px
}

.logo span {
  color:#8bb700
}

nav {
  display:flex;
  gap:28px
}

a {
  color:inherit
}

nav a,.nav-contact {
  font-family:'DM Mono',monospace;
  font-size:11px;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:.03em
}

.nav-contact {
  border-bottom:1px solid var(--ink);
  padding-bottom:3px
}

.nav-contact span {
  color:#77a000;
  font-size:15px
}

.hero {
  padding:clamp(80px,13vw,180px) clamp(24px,9vw,154px) 62px;
  min-height:calc(100vh - 84px);
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  border-bottom:1px solid var(--line)
}

.eyebrow,.section-label,.project-type,.date,.project-years {
  font-family:'DM Mono',monospace;
  font-size:11px;
  letter-spacing:.06em;
  text-transform:uppercase
}

.eyebrow {
  margin:0 0 28px;
  display:flex;
  align-items:center;
  gap:10px
}

.eyebrow span {
  height:7px;
  width:7px;
  border-radius:50%;
  background:#8ab400
}

.hero h1 {
  font-size:clamp(42px,7.1vw,110px);
  max-width:1100px;
  line-height:.99;
  letter-spacing:-.075em;
  margin:0;
  font-weight:700
}

.hero em,h2 em {
  font-weight:400;
  font-family:Georgia,serif;
  letter-spacing:-.08em
}

.hero-bottom {
  margin-top:52px;
  display:flex;
  justify-content:space-between;
  gap:32px;
  align-items:end;
  max-width:870px
}

.hero-bottom p {
  width:275px;
  line-height:1.65;
  font-size:15px;
  margin:0;
  color:#46514c
}

.button {
  background:var(--ink);
  color:var(--paper);
  padding:15px 17px;
  font-size:12px;
  text-decoration:none;
  font-weight:700;
  transition:transform .2s
}

.button:hover {
  transform:translateY(-3px)
}

.button span {
  margin-left:20px;
  color:var(--lime);
  font-size:18px
}

.hero-mark {
  position:absolute;
  right:5vw;
  bottom:38px;
  font:12px 'DM Mono';
  color:var(--muted)
}

.section {
  padding:clamp(72px,10vw,145px) clamp(24px,9vw,154px);
  border-bottom:1px solid var(--line)
}

.section-label {
  margin:0;
  color:var(--muted)
}

.intro {
  display:grid;
  grid-template-columns:20% 1fr;
  gap:25px
}

.intro-copy {
  max-width:810px
}

.intro h2,.experience h2,.skills h2,.contact h2 {
  font-size:clamp(36px,4.6vw,70px);
  line-height:1.04;
  letter-spacing:-.065em;
  margin:0 0 35px
}

.intro-copy>p {
  font-size:clamp(17px,2vw,23px);
  line-height:1.55;
  max-width:710px;
  margin:0;
  color:#38433e
}

.facts {
  margin-top:55px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:repeat(3,1fr)
}

.facts div {
  padding:15px 18px 0 0
}

.facts span {
  display:block;
  color:var(--muted);
  font:10px 'DM Mono';
  text-transform:uppercase;
  margin-bottom:8px
}

.facts strong {
  font-size:13px
}

.experience-heading {
  margin:37px 0 54px;
  display:flex;
  justify-content:space-between;
  align-items:end
}

.experience .cv-icon {
  font: 42px / 1 Arial, sans-serif;
}

.experience-heading h2 {
  margin:0
}

.experience-heading>p {
  max-width:170px;
  font-size:13px;
  line-height:1.55;
  color:var(--muted)
}

.timeline {
  border-top:1px solid var(--ink)
}

.timeline-item {
  display:grid;
  grid-template-columns:18% 34% 1fr;
  gap:20px;
  padding:27px 0;
  border-bottom:1px solid var(--line)
}

.date {
  color:var(--muted);
  margin:4px 0
}

.timeline h3 {
  font-size:18px;
  letter-spacing:-.04em;
  margin:0 0 7px
}

.company {
  font-size:13px;
  margin:0;
  color:var(--muted)
}

.company span:before {
  content:'·';
  margin:0 6px
}

.detail {
  font-size:14px;
  line-height:1.6;
  margin:0;
  max-width:360px;
  color:#44504a
}

.project-card {
  background:var(--ink);
  color:var(--paper);
  margin-top:37px;
  padding:clamp(28px,5vw,74px);
  display:grid;
  grid-template-columns:14% 48% 1fr;
  min-height:550px;
  position:relative;
  overflow:hidden
}

.project-card:after {
  content:'';
  position:absolute;
  right:-11%;
  bottom:-55%;
  width:500px;
  height:500px;
  border:1px solid rgba(215,255,99,.22);
  border-radius:50%
}

.project-years {
  color:var(--lime);
}

.project-type {
  color:#a6afab;
  margin:4px 0 20px
}

.project-main h2 {
  font-size:clamp(58px,8vw,118px);
  letter-spacing:-.09em;
  line-height:.8;
  margin:0 0 32px
}

.project-main h2 span {
  color:var(--lime)
}

.project-description {
  max-width:440px;
  line-height:1.7;
  font-size:14px;
  color:#d4d9d5
}

.metrics {
  display:flex;
  gap:45px;
  margin:35px 0
}

.metrics strong {
  display:block;
  font-size:29px;
  letter-spacing:-.06em;
  color:var(--lime)
}

.metrics span {
  font:10px 'DM Mono';
  color:#a6afab;
  text-transform:uppercase
}

.project-link {
  font-size:12px;
  font-weight:700;
  text-decoration:none;
  border-bottom:1px solid var(--lime);
  padding-bottom:6px;
  color: #d4d9d5;
}

.project-link span {
  color:var(--lime);
  margin-left:18px
}

.code-window {
  align-self:center;
  border:1px solid rgba(242,240,235,.22);
  z-index:1;
  background:#1d2924;
  min-width:260px
}

.window-bar {
  height:34px;
  border-bottom:1px solid rgba(242,240,235,.17);
  display:flex;
  align-items:center;
  gap:5px;
  padding:0 12px;
  color:#94a09a;
  font:9px 'DM Mono'
}

.window-bar i {
  display:block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#65726b
}

.window-bar span {
  margin-left:7px
}

.code-window pre {
  padding:23px;
  margin:0;
  font:12px/1.9 'DM Mono';
  white-space:pre-wrap;
  color:#b9c3bd
}

.code-window b {
  color:#d7ff63;
  font-weight:400
}

.code-window strong {
  color:#e9aaff;
  font-weight:400
}

.code-window em {
  color:#72c9ff;
  font-style:normal
}

.code-window span {
  color:#ffa46b
}

.skills-grid {
  display:grid;
  grid-template-columns:45% 1fr;
  gap:8%;
  margin-top:36px
}

.skills h2 {
  margin:0
}

.skill-list {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-content:start
}

.skill-list span {
  padding:11px 14px;
  border:1px solid var(--ink);
  transition:.2s
}

.skill-list span:hover {
  background:var(--ink);
  color:var(--lime)
}

.contact {
  display:grid;
  grid-template-columns:20% 1fr;
  background:var(--lime)
}

.availability {
  font-size:11px;
  text-transform:uppercase;
  margin:0 0 30px
}

.availability span {
  display:inline-block;
  background:#6d9100;
  width:7px;
  height:7px;
  border-radius:50%;
  margin-right:7px
}

.contact h2 {
  max-width:720px;
  margin-bottom:25px
}

.email {
  font-size:clamp(18px,2.6vw,38px);
  font-weight:700;
  letter-spacing:-.05em;
  text-decoration:none;
  border-bottom:2px solid var(--ink)
}

.email span {
  font-size:.7em;
  margin-left:13px
}

footer {
  padding:26px clamp(24px,5vw,84px);
  display:flex;
  gap:25px;
  justify-content:flex-end;
  background:var(--ink);
  color:var(--paper);
  font:10px 'DM Mono';
  text-transform:uppercase
}

footer p {
  margin:0 auto 0 0
}

footer a {
  text-decoration:none;
  color:#b9c3bd
}

@media(max-width:760px) {
  .site-header {
    height:69px
  }

  .site-header nav {
    display:none
  }

  .hero {
    min-height:630px
  }

  .hero-bottom {
    align-items:start;
    flex-direction:column;
    margin-top:35px
  }

  .hero-mark {
    display:none
  }

  .intro,.contact {
    grid-template-columns:1fr;
    gap:32px
  }

  .facts {
    grid-template-columns:1fr
  }

  .facts div {
    padding-top:14px
  }

  .experience-heading {
    display:block;
    margin-bottom:35px
  }

  .experience-heading>p {
    margin-top:18px
  }

  .timeline-item {
    grid-template-columns:1fr;
    gap:9px;
    padding:22px 0
  }

  .date {
    margin:0
  }

  .detail {
    margin-top:4px
  }

  .project-card {
    grid-template-columns:1fr;
    padding:32px;
    gap:25px
  }

  .project-years {
    writing-mode:horizontal-tb
  }

  .code-window {
    max-width:100%
  }

  .skills-grid {
    grid-template-columns:1fr;
    gap:34px
  }

  .contact {
    padding-bottom:88px
  }

  footer {
    flex-wrap:wrap;
    justify-content:start
  }

  footer p {
    width:100%;
    flex-basis:100%
  }
}