/* Adapted from Brittany Chiang v4 (MIT).
   https://github.com/bchiang7/v4 - see assets/vendor/brittany-v4/LICENSE.
   Palette, type scale, numbered sections, tabs and motion follow the upstream design. */
@font-face {
  font-family:Inter;
  src:url("../../assets/fonts/inter-latin-wght-normal.woff2") format("woff2");
  font-weight:100 900;
  font-display:swap
}
@font-face {
  font-family:Geist Mono;
  src:url("../../assets/fonts/GeistMono-Variable.woff2") format("woff2");
  font-weight:100 900;
  font-display:swap
}
:root {
  --dark-navy:#020c1b;
  --navy:#0a192f;
  --light-navy:#112240;
  --lightest-navy:#233554;
  --navy-shadow:rgba(2,12,27,.7);
  --slate:#8892b0;
  --light-slate:#a8b2d1;
  --lightest-slate:#ccd6f6;
  --white:#e6f1ff;
  --green:#64ffda;
  --green-tint:rgba(100,255,218,.1);
  --font-sans:Inter,-apple-system,system-ui,sans-serif;
  --font-mono:'Geist Mono',monospace;
  --border-radius:4px;
  --nav-height:100px;
  --nav-scroll-height:70px;
  --tab-height:46px;
  --tab-width:150px;
  --easing:cubic-bezier(.645,.045,.355,1);
  --transition:all .25s var(--easing)
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:95px;
  scrollbar-color:#495670 var(--navy);
  scrollbar-width:thin
}
body {
  margin:0;
  background:var(--navy);
  color:var(--light-slate);
  font:16px/1.7 var(--font-sans);
  -webkit-font-smoothing:antialiased
}
::selection {
  background:var(--lightest-navy);
  color:var(--lightest-slate)
}
h1,h2,h3,h4 {
  margin:0 0 10px;
  font-weight:600;
  color:var(--lightest-slate);
  line-height:1.15
}
a {
  color:inherit;
  text-decoration:none;
  transition:var(--transition)
}
a:hover {
  color:var(--green)
}
p {
  margin:0 0 20px
}
button {
  font:inherit;
  cursor:pointer;
  border:0
}
img {
  display:block;
  max-width:100%;
  height:auto
}
[hidden] {
  display:none!important
}
:focus-visible {
  outline:2px dashed var(--green);
  outline-offset:5px
}
.skip-link:not(:focus) {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip-path:inset(50%)
}
.skip-link:focus {
  position:fixed;
  top:10px;
  left:10px;
  z-index:100;
  padding:12px 20px;
  color:var(--green);
  background:var(--light-navy)
}
.main-content {
  width:min(100%,1300px);
  margin:0 auto;
  padding:0 150px
}
.main-content>section {
  max-width:1000px;
  margin:auto;
  padding-block:95px
}
.big-heading {
  font-size:clamp(40px,6.1vw,78px);
  letter-spacing:-.045em;
  line-height:1.12
}
.overline {
  color:var(--green);
  font:13px/1.7 var(--font-mono)
}
.numbered-heading {
  display:flex;
  align-items:center;
  gap:12px;
  font-size:clamp(23px,3vw,30px);
  white-space:nowrap;
  margin-bottom:40px
}
.numbered-heading span {
  font:17px var(--font-mono);
  color:var(--green)
}
.numbered-heading:after {
  content:'';
  display:block;
  width:250px;
  max-width:30%;
  height:1px;
  margin-left:12px;
  background:var(--lightest-navy)
}
.button,.small-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  color:var(--green);
  background:transparent;
  border:1px solid var(--green);
  border-radius:4px;
  padding:20px 26px;
  font:13px/1.3 var(--font-mono);
  transition:var(--transition)
}
.small-button {
  padding:12px 16px
}
.button:hover,.small-button:hover {
  color:var(--green);
  box-shadow:4px 4px 0 0 var(--green);
  transform:translate(-4px,-4px)
}
.inline-link {
  position:relative;
  display:inline-block;
  color:var(--green);
  text-decoration:underline;
  text-decoration-color:transparent;
  text-underline-offset:5px;
  font-size:inherit
}
.inline-link:hover {
  text-decoration-color:var(--green)
}
.site-header {
  display:flex;
  align-items:center;
  position:fixed;
  top:0;
  z-index:20;
  width:100%;
  height:var(--nav-height);
  padding:0 50px;
  background:#0a192fd9;
  backdrop-filter:blur(10px);
  transition:height .25s var(--easing),transform .25s var(--easing),box-shadow .25s var(--easing)
}
.site-header.scrolled {
  height:var(--nav-scroll-height);
  box-shadow:0 10px 30px -10px var(--navy-shadow)
}
.site-header.nav-away:not(:focus-within) {
  transform:translateY(-100%)
}
.navigation {
  display:flex;
  align-items:center;
  justify-content:space-between;
  width:100%;
  font:12px var(--font-mono)
}
.brand {
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border:1px solid var(--green);
  border-radius:4px;
  color:var(--green);
  font:500 17px var(--font-mono);
  flex-shrink:0
}
.brand:hover {
  box-shadow:3px 3px 0 var(--green);
  transform:translate(-3px,-3px)
}
.nav-links {
  display:flex;
  align-items:center;
  gap:26px;
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:nav
}
.nav-links li {
  counter-increment:nav
}
.nav-links li:not(:last-child)>a:before {
  content:'0' counter(nav) '.';
  color:var(--green);
  margin-right:7px;
  font-size:11px
}
.nav-links a {
  display:block;
  padding-block:10px
}
.nav-links li:last-child a {
  padding:12px 16px
}
.nav-links a.active {
  color:var(--green)
}
.social-rail,.email-rail {
  position:fixed;
  bottom:0;
  z-index:10;
  display:flex;
  align-items:center;
  flex-direction:column;
  gap:25px;
  color:var(--light-slate)
}
.social-rail {
  left:45px
}
.email-rail {
  right:40px
}
.social-rail:after,.email-rail:after {
  content:'';
  display:block;
  width:1px;
  height:90px;
  background:var(--light-slate)
}
.social-rail a {
  font:15px var(--font-mono);
  padding:5px
}
.social-rail a:hover {
  transform:translateY(-4px)
}
.email-rail a {
  writing-mode:vertical-rl;
  font:11px var(--font-mono);
  letter-spacing:.06em
}
.email-rail a:hover {
  transform:translateY(-4px)
}
.main-content>.hero {
  display:grid;
  grid-template-columns:minmax(0,1fr) 270px;
  gap:50px;
  align-items:center;
  min-height:90svh;
  padding-top:130px;
  padding-bottom:65px
}
.hero-overline {
  font:14px var(--font-mono);
  color:var(--green);
  margin-bottom:25px
}
.hero-subtitle {
  font-size:clamp(24px,3vw,36px);
  color:var(--slate);
  font-weight:600;
  margin-top:12px
}
.hero-description {
  max-width:535px;
  font-size:16px;
  line-height:1.8;
  margin-top:28px
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:30px;
  margin-top:18px;
  font-size:13px
}
.about-section {
  max-width:900px!important
}
.about-inner {
  display:grid;
  grid-template-columns:3fr 2fr;
  gap:50px
}
.about-inner p {
  font-size:15px
}
.skills-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px 15px;
  list-style:none;
  padding:0;
  margin:20px 0 0;
  font:11px/1.9 var(--font-mono)
}
.skills-list li {
  position:relative;
  padding-left:18px
}
.skills-list li:before {
  content:'▹';
  position:absolute;
  left:0;
  color:var(--green)
}
.portrait {
  max-width:280px;
  position:relative;
  padding:0 14px 14px 0
}
.portrait-frame {
  position:relative;
  background:var(--green);
  border-radius:4px;
  transition:var(--transition)
}
.portrait-frame:after {
  content:'';
  position:absolute;
  inset:14px -14px -14px 14px;
  border:2px solid var(--green);
  border-radius:4px;
  z-index:-1;
  transition:var(--transition)
}
.portrait-frame img {
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 25%;
  filter:none;
  mix-blend-mode:normal;
  border-radius:4px;
  transition:var(--transition)
}
.portrait-frame:hover {
  transform:translate(-4px,-4px)
}
.portrait-frame:hover:after {
  transform:translate(8px,8px)
}
.portrait-frame:hover img {
  filter:none;
  mix-blend-mode:normal
}
.jobs-section {
  max-width:800px!important
}
.jobs-inner {
  display:flex;
  min-height:330px
}
.job-tabs {
  position:relative;
  flex-shrink:0;
  align-self:start;
  --tab-index:0
}
.job-tab {
  display:flex;
  align-items:center;
  width:160px;
  height:var(--tab-height);
  padding:0 18px;
  border-left:2px solid var(--lightest-navy);
  background:transparent;
  color:var(--light-slate);
  font:12px var(--font-mono);
  text-align:left;
  white-space:nowrap;
  transition:var(--transition)
}
.job-tab[aria-selected=true] {
  color:var(--green);
  background:var(--green-tint)
}
.job-tab:hover {
  background:var(--light-navy);
  color:var(--green)
}
.tab-highlight {
  position:absolute;
  top:0;
  left:0;
  width:2px;
  height:var(--tab-height);
  background:var(--green);
  transform:translateY(calc(var(--tab-index)*var(--tab-height)));
  transition:transform .3s var(--easing);
  pointer-events:none
}
.job-panels {
  min-width:0;
  margin-left:28px;
  width:100%
}
.job-panel {
  padding:8px 0 20px
}
.job-panel+.job-panel {
  margin-top:30px
}
.tabs-ready .job-panel {
  margin:0;
  animation:panel-in .3s var(--easing)
}
.job-panel h3 {
  font-size:20px;
  line-height:1.5
}
.company {
  color:var(--green)
}
.range {
  font:11px/1.9 var(--font-mono);
  margin:8px 0 24px
}
.fancy-list {
  list-style:none;
  padding:0;
  margin:0 0 20px;
  font-size:14px
}
.fancy-list li {
  position:relative;
  padding-left:26px;
  margin-bottom:12px
}
.fancy-list li:before {
  content:'▹';
  color:var(--green);
  position:absolute;
  left:0
}
.job-panel>.inline-link {
  font:11px/1.8 var(--font-mono)
}
.education-section {
  max-width:900px!important
}
.education-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:50px
}
.education-item+.education-item {
  margin-top:32px
}
.education-item h3 {
  font-size:20px;
  margin-bottom:8px
}
.education-item p:not(.overline) {
  font-size:14px
}
.education-item .overline {
  font-size:11px;
  margin-bottom:8px
}
.certificates h3 {
  font-size:18px;
  margin-bottom:20px
}
.certificates ul {
  margin:0;
  padding:0;
  list-style:none
}
.certificates li {
  display:flex;
  justify-content:space-between;
  gap:20px;
  font-size:12px;
  padding:10px 0;
  border-bottom:1px solid var(--lightest-navy)
}
.certificates time {
  font:11px/1.9 var(--font-mono);
  color:var(--slate)
}
.toolkit,.project-archive {
  margin-top:35px;
  border-top:1px solid var(--lightest-navy);
  border-bottom:1px solid var(--lightest-navy);
  font-size:13px
}
.toolkit summary,.project-archive summary {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:19px 0;
  cursor:pointer;
  list-style:none;
  color:var(--lightest-slate)
}
summary::-webkit-details-marker {
  display:none
}
summary>span {
  color:var(--green);
  transition:transform .25s
}
.toolkit[open] summary>span,.project-archive[open] summary>span {
  transform:rotate(45deg)
}
.toolkit dl {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:25px;
  margin:5px 0 25px
}
.toolkit dt {
  color:var(--green);
  font:11px var(--font-mono);
  margin-bottom:12px
}
.toolkit dd {
  margin:0;
  font-size:12px;
  line-height:1.9
}
.featured-project {
  position:relative;
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:10px;
  align-items:center;
  min-height:320px;
  margin:0 0 65px
}
.project-image {
  grid-column:1/8;
  grid-row:1;
  position:relative;
  background:var(--green);
  border-radius:4px;
  overflow:hidden
}
.project-image img {
  width:100%;
  filter:none;
  mix-blend-mode:multiply;
  transition:var(--transition)
}
.project-image:hover img {
  filter:none;
  mix-blend-mode:normal
}
.project-content {
  position:relative;
  grid-column:7/-1;
  grid-row:1;
  text-align:right;
  z-index:2
}
.project-content .overline {
  margin-bottom:10px
}
.project-content h3 {
  font-size:25px;
  line-height:1.3;
  margin-bottom:20px
}
.project-description {
  padding:24px;
  background:var(--light-navy);
  box-shadow:0 10px 30px -15px var(--navy-shadow);
  border-radius:4px;
  font-size:14px
}
.project-description p {
  margin:0
}
.project-tech {
  display:flex;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:14px;
  padding:0;
  list-style:none;
  font:10px/1.9 var(--font-mono);
  margin:20px 0 16px
}
.project-content>.inline-link {
  font:11px var(--font-mono)
}
.other-projects {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}
.other-projects article {
  display:flex;
  flex-direction:column;
  padding:28px 24px;
  background:var(--light-navy);
  border-radius:4px;
  box-shadow:0 10px 30px -15px var(--navy-shadow);
  transition:transform .25s var(--easing)
}
.other-projects article:hover {
  transform:translateY(-7px)
}
.project-symbol {
  color:var(--green);
  font-size:32px;
  line-height:1;
  margin-bottom:26px
}
.other-projects h3 {
  font-size:17px;
  line-height:1.45;
  margin-bottom:13px
}
.other-projects p {
  font-size:13px;
  line-height:1.8
}
.project-category {
  font:10px/1.8 var(--font-mono);
  margin-top:auto;
  padding-top:12px
}
.project-archive ul {
  list-style:none;
  margin:0;
  padding:0 0 20px
}
.project-archive li {
  display:flex;
  justify-content:space-between;
  gap:25px;
  padding:14px 0;
  border-bottom:1px solid var(--lightest-navy);
  font-size:12px
}
.project-archive li:last-child {
  border:0
}
.project-archive a {
  color:var(--green)
}
.project-archive li>span {
  color:var(--slate)
}
.main-content>.contact-section {
  max-width:600px;
  text-align:center;
  padding-block:100px 120px
}
.contact-section h2 {
  font-size:clamp(32px,5vw,46px);
  margin-bottom:25px;
  letter-spacing:-.035em
}
.contact-section p:not(.overline) {
  font-size:15px
}
.contact-section .button {
  margin-top:25px
}
.site-footer {
  padding:25px 25px 30px;
  text-align:center;
  font:10px/1.9 var(--font-mono);
  color:var(--slate)
}
.site-footer p {
  margin-bottom:5px
}
.menu-toggle {
  display: none;
  background:transparent;
  color:var(--green);
  font:12px var(--font-mono);
  padding:12px;
  align-items:center;
  gap:14px
}
.menu-bars {
  display:block;
  width:24px;
  height:12px;
  border-block:2px solid var(--green);
  transition:var(--transition)
}
.menu-toggle[aria-expanded=true] .menu-bars {
  transform:rotate(-45deg)
}
.icon {
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor
}
.reveal {
  opacity:1;
  transform:none
}
.motion-ready .reveal:not(.is-visible) {
  opacity:0;
  transform:translateY(25px)
}
.motion-ready .reveal {
  transition:opacity .65s var(--easing),transform .65s var(--easing)
}
.motion-ready .hero>* {
  animation:hero-in .65s var(--easing) both
}
.motion-ready .hero>*:nth-child(2) {
  animation-delay:.1s
}
.motion-ready .hero>*:nth-child(3) {
  animation-delay:.2s
}
.motion-ready .hero>*:nth-child(4) {
  animation-delay:.3s
}
.motion-ready .hero>*:nth-child(5) {
  animation-delay:.4s
}
@keyframes hero-in {
  from {
    opacity:0;
    transform:translateY(20px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@keyframes panel-in {
  from {
    opacity:0;
    transform:translateY(7px)
  }
  to {
    opacity:1;
    transform:translateY(0)
  }
}
@media(max-width:1080px) {
  .main-content {
    padding-inline:100px
  }
  .site-header {
    padding-inline:40px
  }
  .social-rail {
    left:30px
  }
  .email-rail {
    right:27px
  }
  .nav-links {
    gap:18px
  }
  .project-content {
    grid-column:5/-1
  }
  .other-projects {
    grid-template-columns:1fr 1fr
  }
  .other-projects article:last-child {
    grid-column:1/-1
  }
  .numbered-heading:after {
    width:160px
  }
}
@media(max-width:768px) {
  .main-content {
    padding-inline:50px
  }
  .site-header {
    padding-inline:25px
  }
  .social-rail,.email-rail {
    display:none
  }
  .main-content>section {
    padding-block:70px
  }
  .main-content>.hero {
    min-height:85svh;
    padding-top:140px;
    padding-bottom:55px
  }
  .about-inner {
    grid-template-columns:1fr;
    gap:40px
  }
  .portrait {
    width:65%;
    max-width:260px;
    margin-inline:auto
  }
  .hero-description {
    font-size:15px
  }
  .education-grid {
    gap:30px
  }
  .featured-project {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    margin-bottom:35px
  }
  .project-image {
    background:var(--light-navy)
  }
  .project-image img {
    mix-blend-mode:normal;
    filter:none
  }
  .project-content {
    padding:25px;
    text-align:left;
    background:var(--light-navy)
  }
  .project-description {
    box-shadow:none;
    padding:0;
    background:transparent
  }
  .project-content h3 {
    font-size:24px
  }
  .project-tech {
    justify-content:flex-start
  }
  .nav-links {
    font-size:10px;
    gap:14px
  }
  .nav-links li:not(:last-child)>a:before {
    display:none
  }
  .project-archive li {
    flex-direction:column;
    gap:5px
  }
  .main-content>.contact-section {
    padding-block:80px
  }
  .toolkit dl {
    grid-template-columns:1fr;
    gap:20px
  }
  .big-heading {
    font-size:clamp(38px,6.5vw,60px)
  }
}
@media(max-width:600px) {
  html {
    scroll-padding-top:85px
  }
  .main-content {
    padding-inline:25px
  }
  .site-header {
    height:80px
  }
  .main-content>.hero {
    min-height:80svh;
    padding-top:135px;
    padding-bottom:70px
  }
  .hero-overline {
    font-size:12px
  }
  .hero-description {
    font-size:14px;
    margin-top:23px
  }
  .hero-subtitle {
    font-size:clamp(28px,6.8vw,40px);
    margin-top:13px
  }
  .hero-actions {
    gap:24px;
    font-size:11px;
    flex-wrap:wrap
  }
  .button {
    font-size:11px;
    padding:18px 20px
  }
  .big-heading {
    font-size:clamp(32px,8.3vw,49px)
  }
  .numbered-heading {
    font-size:22px;
    gap:9px;
    white-space:normal;
    line-height:1.4;
    margin-bottom:30px
  }
  .numbered-heading span {
    font-size:13px;
    flex-shrink:0
  }
  .numbered-heading:after {
    max-width:18%;
    min-width:25px;
    flex:1;
    margin-left:2px
  }
  .about-inner p {
    font-size:14px
  }
  .skills-list {
    font-size:10px;
    gap:5px 8px
  }
  .jobs-inner {
    display:block;
    min-height:400px
  }
  .job-tabs {
    display:flex;
    overflow-x:auto;
    width:100%;
    margin-bottom:26px;
    padding-bottom:0;
    scrollbar-width:thin
  }
  .job-tab {
    flex:0 0 var(--tab-width);
    width:var(--tab-width);
    justify-content:center;
    border-left:0;
    border-bottom:2px solid var(--lightest-navy);
    font-size:11px;
    padding:0 10px
  }
  .tab-highlight {
    top:auto;
    bottom:0;
    left:0;
    width:var(--tab-width);
    height:2px;
    transform:translateX(calc(var(--tab-index)*var(--tab-width)))
  }
  .job-panels {
    margin-left:0
  }
  .job-panel h3 {
    font-size:18px
  }
  .fancy-list {
    font-size:13px
  }
  .education-grid {
    grid-template-columns:1fr;
    gap:32px
  }
  .education-item h3 {
    font-size:18px
  }
  .other-projects {
    grid-template-columns:1fr
  }
  .other-projects article:last-child {
    grid-column:auto
  }
  .project-content {
    padding:22px
  }
  .project-content h3 {
    font-size:22px
  }
  .other-projects article {
    padding:25px
  }
  .project-symbol {
    margin-bottom:20px
  }
  .main-content>section {
    padding-block:55px
  }
  .navigation {
    flex-wrap:wrap;
    gap:20px
  }
  .nav-links {
    gap:15px;
    flex-wrap:wrap;
    justify-content:flex-end;
    margin-left:auto
  }
  .nav-links li:last-child {
    display:none
  }
  .menu-ready .menu-toggle {
    display:inline-flex
  }
  .menu-ready .nav-links {
    position:fixed;
    top:80px;
    right:0;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:center;
    width:min(82vw,330px);
    height:calc(100svh - 80px);
    padding:40px;
    background:var(--light-navy);
    box-shadow:-10px 0 30px -15px var(--navy-shadow);
    gap:24px;
    visibility:hidden;
    transform:translateX(100%);
    transition:none
  }
  .menu-ready.menu-animated .nav-links {
    transition:transform .3s var(--easing),visibility .3s
  }
  .menu-ready .nav-links li:last-child {
    display:block
  }
  .menu-ready .nav-links a {
    font-size:14px
  }
  .menu-ready .nav-links li:not(:last-child)>a:before {
    display:inline
  }
  .menu-open .nav-links {
    visibility:visible;
    transform:translateX(0)
  }
  .menu-open {
    overflow:hidden
  }
  .menu-open .site-header {
    height:80px;
    transform:none
  }
  .main-content>.contact-section {
    padding-block:70px 80px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*:before,*:after {
    animation:none!important;
    transition:none!important
  }
  .motion-ready .reveal:not(.is-visible) {
    opacity:1;
    transform:none
  }
  .site-header.nav-away {
    transform:none
  }
  .portrait-frame:hover,.portrait-frame:hover:after,.other-projects article:hover,.button:hover,.brand:hover {
    transform:none
  }
}
/* Portrait-led introduction and expanded project portfolio. */
.hero-content {
  grid-column:1;
  grid-row:1;
  min-width:0
}
.hero-content .big-heading {
  font-size:clamp(38px,5vw,64px)
}
.hero-content .hero-overline {
  font-size:11px;
  line-height:1.8;
  margin-bottom:20px
}
.hero-portrait {
  grid-column:2;
  grid-row:1;
  max-width:270px;
  width:100%;
  margin:0
}
.hero-content .hero-description {
  font-size:15px
}
.about-section .portrait-frame img {
  aspect-ratio:1
}
.projects-intro {
  max-width:720px;
  font-size:15px;
  margin-bottom:40px
}
.project-group-title {
  font-size:21px;
  margin:55px 0 25px
}
.project-gallery {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:26px
}
.portfolio-project {
  min-width:0;
  display:flex;
  flex-direction:column;
  background:var(--light-navy);
  border-radius:4px;
  overflow:hidden;
  box-shadow:0 10px 30px -15px var(--navy-shadow);
  transition:transform .25s var(--easing)
}
.portfolio-project:hover {
  transform:translateY(-4px)
}
.portfolio-media {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  height:230px;
  padding:18px;
  background:#0e2038
}
.portfolio-media img {
  width:100%;
  height:100%;
  object-fit:contain;
  filter:none;
  mix-blend-mode:normal;
  border-radius:3px
}
.phone-media {
  height:310px;
  padding:22px
}
.phone-media img {
  width:auto;
  max-width:45%;
  object-fit:contain
}
.landscape-media {
  height:310px;
  flex-direction:column
}
.landscape-media img {
  height:auto;
  max-height:44%;
  width:100%;
  object-fit:contain
}
.portfolio-copy {
  padding:26px;
  display:flex;
  flex-direction:column;
  flex:1
}
.portfolio-copy>.overline {
  font-size:10px;
  margin-bottom:12px
}
.portfolio-copy h3 {
  font-size:21px;
  line-height:1.35;
  margin-bottom:16px
}
.portfolio-copy>p:not(.overline) {
  font-size:13px;
  line-height:1.85
}
.portfolio-copy>.portfolio-tech {
  font:10px/1.9 var(--font-mono);
  color:var(--slate);
  margin-top:auto;
  padding-top:6px
}
.portfolio-links {
  display:flex;
  flex-wrap:wrap;
  gap:14px 23px;
  font:11px/1.8 var(--font-mono);
  padding-top:7px
}
.project-gallery>.portfolio-project:last-child:nth-child(odd) {
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1fr 1fr
}
.project-gallery>.portfolio-project:last-child:nth-child(odd)>.portfolio-media {
  height:auto;
  min-height:280px
}
.project-gallery>.portfolio-project:last-child:nth-child(odd)>.landscape-media {
  gap:15px
}
.project-gallery>.portfolio-project:last-child:nth-child(odd)>.landscape-media img {
  max-height:130px
}
.artwork-media img {
  max-height:230px
}
.motion-ready .hero>* {
  animation:none
}
.motion-ready .hero-content>* {
  animation:hero-in .65s var(--easing) both
}
.motion-ready .hero-content>:nth-child(2) {
  animation-delay:.1s
}
.motion-ready .hero-content>:nth-child(3) {
  animation-delay:.2s
}
.motion-ready .hero-content>:nth-child(4) {
  animation-delay:.3s
}
.motion-ready .hero-content>:nth-child(5) {
  animation-delay:.4s
}
@media(max-width:1080px) {
  .main-content>.hero {
    grid-template-columns:minmax(0,1fr) 230px;
    gap:35px
  }
  .hero-portrait {
    max-width:230px
  }
  .hero-content .big-heading {
    font-size:clamp(38px,4.8vw,56px)
  }
  .hero-content .hero-actions {
    flex-wrap:wrap;
    gap:22px
  }
  .portfolio-copy {
    padding:23px
  }
}
@media(max-width:768px) {
  .main-content>.hero {
    grid-template-columns:1fr;
    gap:35px;
    min-height:auto;
    padding-top:115px;
    padding-bottom:60px
  }
  .hero-portrait {
    grid-column:1;
    grid-row:1;
    width:180px;
    max-width:55%;
    margin:0
  }
  .hero-content {
    grid-column:1;
    grid-row:2
  }
  .hero-content .big-heading {
    font-size:clamp(36px,6.5vw,56px)
  }
  .hero-content .hero-subtitle {
    font-size:clamp(24px,4.6vw,32px)
  }
  .project-gallery {
    gap:20px
  }
  .portfolio-copy h3 {
    font-size:19px
  }
  .portfolio-copy {
    padding:22px
  }
  .portfolio-media {
    height:200px
  }
  .phone-media,.landscape-media {
    height:270px
  }
  .project-gallery>.portfolio-project:last-child:nth-child(odd) {
    display:flex;
    grid-column:auto
  }
  .project-gallery>.portfolio-project:last-child:nth-child(odd)>.portfolio-media {
    height:270px;
    min-height:0
  }
  .project-gallery>.portfolio-project:last-child:nth-child(odd)>.landscape-media img {
    max-height:44%
  }
}
@media(max-width:600px) {
  .main-content>.hero {
    padding-top:105px;
    gap:30px;
    padding-bottom:55px
  }
  .hero-portrait {
    width:145px
  }
  .hero-content .big-heading {
    font-size:clamp(31px,8vw,46px)
  }
  .hero-content .hero-overline {
    font-size:9px;
    margin-bottom:15px
  }
  .hero-content .hero-subtitle {
    font-size:24px;
    margin-top:13px
  }
  .hero-content .hero-description {
    font-size:13px;
    margin-top:20px
  }
  .hero-content .hero-actions {
    margin-top:20px;
    gap:20px
  }
  .project-gallery {
    grid-template-columns:1fr
  }
  .project-group-title {
    font-size:19px;
    margin-top:40px
  }
  .projects-intro {
    font-size:13px
  }
  .portfolio-media {
    height:220px
  }
  .phone-media,.landscape-media {
    height:300px
  }
  .project-gallery>.portfolio-project:last-child:nth-child(odd)>.portfolio-media {
    height:250px
  }
  .project-gallery>.portfolio-project:last-child:nth-child(odd)>.landscape-media {
    height:290px
  }
  .portfolio-copy h3 {
    font-size:21px
  }
  .portfolio-copy>p:not(.overline) {
    font-size:13px
  }
}
@media(prefers-reduced-motion:reduce) {
  .portfolio-project:hover {
    transform:none
  }
}