* {
  box-sizing: border-box;
}

:root {
  --ink: #11110f;
  --bone: #f0ecdf;
  --paper: #f8f5eb;
  --muted: #716f67;
  --line: rgba(17, 17, 15, .25);
  --acid: #d7ff38;
  --blue: #607dff;
  --orange: #ff6a35;
  --pink: #ef88aa;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Arial, Helvetica, sans-serif;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.45;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
}

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

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

.masthead {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 74px;
  padding: 0 2.5vw;
  border-bottom: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.wordmark {
  display: flex;
  gap: .8rem;
  align-items: center;
  text-decoration: none;
}

.wordmark span:first-child {
  display: grid;
  width: 2.25rem;
  height: 2.25rem;
  place-items: center;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bone);
}

.masthead nav {
  display: flex;
  gap: clamp(1rem, 4vw, 4rem);
}

.masthead nav a,
.project-link,
.footer-meta a {
  text-underline-offset: .3em;
  text-decoration-thickness: 1px;
}

.hero {
  min-height: calc(100vh - 74px);
  display: grid;
  grid-template-columns: 1.4fr minmax(280px, .65fr);
  grid-template-rows: 1fr auto;
  gap: 2rem 5vw;
  padding: clamp(3rem, 7vw, 7rem) 2.5vw 2rem;
  overflow: hidden;
}

.hero-copy {
  align-self: center;
}

.eyebrow,
.label,
.section-heading > p,
.footer-kicker {
  margin: 0 0 1.5rem;
  font: .7rem/1.2 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 8ch;
  margin: 0;
  font-size: clamp(4.8rem, 13.4vw, 13rem);
  font-weight: 800;
  line-height: .73;
  letter-spacing: -.09em;
}

.role {
  max-width: 35ch;
  margin: 3rem 0 0;
  font-size: clamp(1.15rem, 2vw, 1.8rem);
  line-height: 1.15;
}

.portrait-wrap {
  position: relative;
  align-self: start;
  width: 100%;
  max-width: 460px;
  margin: 0;
  padding-top: 2rem;
}

.portrait-wrap img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  filter: grayscale(1) contrast(1.08);
  border: 1px solid var(--ink);
}

.portrait-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  right: -1rem;
  width: 46%;
  height: 36%;
  background: var(--acid);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.crop {
  position: absolute;
  z-index: 1;
  width: 22px;
  height: 22px;
  border-color: var(--ink);
}

.crop-a { top: 1rem; left: -1rem; border-top: 1px solid; border-left: 1px solid; }
.crop-b { right: -1rem; bottom: 1rem; border-right: 1px solid; border-bottom: 1px solid; }

.portrait-wrap figcaption {
  display: flex;
  justify-content: space-between;
  padding-top: .55rem;
  font: .65rem var(--mono);
  text-transform: uppercase;
}

.hero-note {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 2fr;
  align-items: start;
  padding-top: 1rem;
  border-top: 1px solid var(--ink);
}

.measure {
  font: .7rem var(--mono);
  letter-spacing: .15em;
}

.summary {
  max-width: 70ch;
  font-size: clamp(1rem, 1.5vw, 1.3rem);
}

.summary p {
  margin: 0 0 .8em;
}

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

.section-heading {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 2fr;
  min-height: 46vh;
  padding: 3rem 2.5vw;
  background: var(--ink);
  color: var(--bone);
}

.section-heading h2 {
  align-self: end;
  margin: 0;
  font-size: clamp(4rem, 10vw, 10rem);
  line-height: .78;
  letter-spacing: -.075em;
}

.section-count {
  position: absolute;
  top: 2.5rem;
  right: 2.5vw;
  font: clamp(2rem, 4vw, 4rem) var(--mono);
}

.specimen {
  --accent: var(--acid);
  min-height: 85vh;
  padding: 0 2.5vw 5rem;
  border-top: 1px solid var(--ink);
  background: var(--paper);
}

.specimen:nth-child(4n+2) { --accent: var(--blue); }
.specimen:nth-child(4n+3) { --accent: var(--orange); }
.specimen:nth-child(4n) { --accent: var(--pink); }

.specimen-head {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  gap: 2rem;
  align-items: baseline;
  padding: 1.2rem 0;
  border-bottom: 1px solid var(--ink);
}

.specimen-head p {
  margin: 0;
}

.specimen-no,
.dates {
  font: .72rem var(--mono);
  text-transform: uppercase;
}

.dates { text-align: right; }

.specimen-head h3 {
  margin: 0;
  font-size: clamp(1.4rem, 3vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.035em;
}

.specimen-head div p {
  margin-top: .45rem;
  color: var(--muted);
}

.specimen-body {
  display: grid;
  grid-template-columns: 1.05fr 1.5fr 1fr;
  gap: clamp(2rem, 5vw, 6rem);
  padding-top: clamp(3rem, 7vw, 7rem);
}

.display-sample {
  position: relative;
  min-height: 360px;
  overflow: hidden;
  background: var(--accent);
  border: 1px solid var(--ink);
}

.display-sample > span {
  position: absolute;
  top: 50%;
  left: 48%;
  font-size: clamp(15rem, 32vw, 31rem);
  font-weight: 800;
  line-height: .7;
  letter-spacing: -.12em;
  transform: translate(-50%, -48%);
}

.display-sample i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 19%;
  border-top: 1px dashed var(--ink);
}

.display-sample small {
  position: absolute;
  right: .75rem;
  bottom: .55rem;
  font: .7rem var(--mono);
}

.case-notes {
  align-self: center;
}

.descriptions {
  padding: 0;
  margin: 0 0 2.5rem;
  list-style: none;
}

.descriptions li {
  position: relative;
  padding: 1rem 0 1rem 1.8rem;
  border-top: 1px solid var(--line);
  font-size: clamp(1rem, 1.3vw, 1.2rem);
}

.descriptions li::before {
  content: "↳";
  position: absolute;
  left: 0;
  font-family: var(--mono);
}

.project-link {
  font: .72rem var(--mono);
  text-transform: uppercase;
}

.component-tray {
  align-self: end;
  padding: .7rem;
  border: 1px solid var(--ink);
  box-shadow: 8px 8px 0 var(--accent);
}

.browser-bar {
  display: flex;
  gap: .3rem;
  align-items: center;
  margin: -.7rem -.7rem 1.5rem;
  padding: .55rem .7rem;
  border-bottom: 1px solid var(--ink);
  font: .55rem var(--mono);
}

.browser-bar i {
  width: 6px;
  height: 6px;
  border: 1px solid;
  border-radius: 50%;
}

.browser-bar span { margin-left: auto; }

.tech-list {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  padding: 0;
  list-style: none;
}

.tech-list li {
  padding: .35rem .5rem;
  border: 1px solid var(--ink);
  font: .65rem var(--mono);
  transition: background-color .15s, color .15s, transform .15s;
}

.tech-list li:hover {
  background: var(--ink);
  color: var(--accent);
  transform: translateY(-2px);
}

.state-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .35rem;
  margin-top: 1.5rem;
  font: .5rem var(--mono);
  text-transform: uppercase;
}

.state-row span {
  padding-top: .5rem;
  border-top: 4px solid var(--line);
}

.state-row span:nth-child(2) { border-color: var(--accent); }
.state-row span:nth-child(3) { border-color: var(--ink); }

.index {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  border-top: 1px solid var(--ink);
  background: var(--bone);
}

.section-heading.compact {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  justify-content: space-between;
}

.section-heading.compact h2 {
  font-size: clamp(4rem, 8vw, 8rem);
}

.index-content {
  padding: clamp(3rem, 7vw, 7rem) 3vw;
}

.skills-block h3 {
  display: flex;
  justify-content: space-between;
  margin: 0 0 2rem;
  font-size: 1rem;
  font-family: var(--mono);
  text-transform: uppercase;
}

.skill-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: skill;
}

.skill-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: .8rem 0;
  font-size: clamp(1.5rem, 3.3vw, 3.5rem);
  line-height: 1;
  letter-spacing: -.04em;
}

.skill-list i {
  border-bottom: 1px dotted var(--muted);
}

.skill-list small {
  font: .65rem var(--mono);
}

.credentials {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  margin-top: 6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--ink);
}

.credentials article {
  margin-bottom: 2rem;
}

.credentials h3,
.credentials p {
  margin: 0 0 .4rem;
}

.credentials h3 { font-size: 1rem; }
.credentials article p { color: var(--muted); }

.references {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 6vw;
  padding: clamp(4rem, 9vw, 9rem) 2.5vw;
  background: var(--blue);
  border-top: 1px solid var(--ink);
}

.reference-intro h2 {
  position: sticky;
  top: 2rem;
  margin: 0;
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: .85;
  letter-spacing: -.06em;
}

.quote-list figure {
  margin: 0;
  padding: 2rem 0 3rem;
  border-top: 1px solid var(--ink);
}

.quote-list blockquote {
  margin: 0 0 2rem;
  font-size: clamp(1.3rem, 2.4vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -.025em;
}

.quote-list figcaption {
  display: flex;
  flex-direction: column;
  font: .7rem/1.5 var(--mono);
}

footer {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 5rem 2.5vw 2rem;
  overflow: hidden;
  background: var(--ink);
  color: var(--bone);
}

.email {
  display: block;
  width: max-content;
  max-width: 100%;
  font-size: clamp(2.2rem, 7.3vw, 8rem);
  line-height: 1;
  letter-spacing: -.065em;
  overflow-wrap: anywhere;
  text-decoration-color: var(--acid);
  text-decoration-thickness: .07em;
  text-underline-offset: .12em;
}

.site-link {
  width: max-content;
  margin-top: 2rem;
  font-family: var(--mono);
}

.footer-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 8rem;
  padding-top: 1rem;
  border-top: 1px solid #68675f;
  font: .7rem var(--mono);
  text-transform: uppercase;
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr 38%;
  }

  .specimen-body {
    grid-template-columns: .8fr 1.2fr;
  }

  .component-tray {
    grid-column: 2;
  }

  .index,
  .references {
    grid-template-columns: 1fr;
  }

  .section-heading.compact {
    min-height: 55vh;
  }

  .reference-intro h2 {
    position: static;
  }
}

@media (max-width: 640px) {
  .masthead {
    padding-inline: 1rem;
  }

  .wordmark span:last-child { display: none; }
  .masthead nav { gap: 1rem; }

  .hero {
    display: flex;
    min-height: auto;
    flex-direction: column;
    padding: 3rem 1rem 2rem;
  }

  .hero h1 { font-size: clamp(4.2rem, 23vw, 7rem); }
  .portrait-wrap { width: 78%; margin-left: auto; }

  .hero-note {
    display: block;
  }

  .measure { display: block; margin-bottom: 2rem; }

  .section-heading {
    display: flex;
    min-height: 42vh;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem 1rem;
  }

  .section-heading h2 { font-size: clamp(3.5rem, 18vw, 6rem); }

  .specimen { padding-inline: 1rem; }

  .specimen-head {
    grid-template-columns: auto 1fr;
    gap: 1rem;
  }

  .dates { grid-column: 2; text-align: left; }

  .specimen-body {
    grid-template-columns: 1fr;
  }

  .display-sample { min-height: 280px; }
  .component-tray { grid-column: auto; }

  .index-content { padding-inline: 1rem; }
  .skill-list li { font-size: 1.55rem; }
  .credentials { grid-template-columns: 1fr; }

  .references { padding-inline: 1rem; }
  .quote-list blockquote { font-size: 1.4rem; }

  footer { padding-inline: 1rem; }
  .footer-meta { gap: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}