:root {
  color-scheme: light;
  --paper: #fafafa;
  --ink: #252525;
  --secondary: #565656;
  --muted: #686868;
  --rule: #dedede;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
* {box-sizing: border-box}
html {background: var(--paper); -webkit-text-size-adjust: 100%}
body {margin: 0; font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased}
a {color: inherit; text-decoration: none}
a:focus-visible {outline: 2px solid currentColor; outline-offset: 4px}
::selection {background: #e2e2e2}
.skip {position: fixed; top: -70px; left: 12px; background: var(--ink); color: white; padding: 10px 16px; z-index: 3}
.skip:focus {top: 10px}
h1, h2, h3, p {margin: 0}
.folio {max-width: 1296px; padding-inline: clamp(22px, 5vw, 58px); margin: auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column}
.mast, footer {display: flex; justify-content: space-between; align-items: center}
.mast {height: clamp(50px, 7.3svh, 76px); flex: none; border-bottom: 1px solid var(--rule)}
nav {display: flex; gap: 26px; font-size: 13px}
nav a {min-height: 44px; display: inline-flex; align-items: center; position: relative}
nav a[aria-current]::after {content: ""; position: absolute; bottom: 5px; inset-inline: 0; height: 1px; background: currentColor}
main {flex: 1; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(28px, 4.6svh, 64px)}

.projects {margin-top: clamp(32px, 5.8svh, 76px)}
.projects h2 {font-size: clamp(19px, 1.65vw, 24px); line-height: 1.25; font-weight: 600; letter-spacing: -.032em}
.project-row, .archive-row {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 64px)}
.project-row {margin-top: clamp(8px, 1.4svh, 18px)}
.project {min-width: 0; display: block}
.plate {height: clamp(96px, 16svh, 185px); display: flex; align-items: center; justify-content: flex-start}
.plate img {width: 100%; height: 100%; object-fit: contain; object-position: left center; transition: transform .22s ease}
.project h3 {margin-top: 10px; font-weight: 500; font-size: clamp(20px, 1.85vw, 27px); line-height: 1.18; letter-spacing: -.035em; text-wrap: balance}
.project p {margin-top: 6px; font-size: clamp(13px, 1.05vw, 15px); line-height: 1.4; color: var(--secondary)}

.archive {margin-top: clamp(42px, 7.8svh, 94px)}
.archive h2 {font-size: 16px; line-height: 1.35; font-weight: 600; letter-spacing: -.015em}
.archive-row {margin-top: 9px}
.archive-row > a {min-width: 0; min-height: 46px; display: flex; align-items: center; gap: 12px}
.archive-row svg {width: 49px; height: auto; flex: none}
.archive-row strong {display: block; font-weight: 500; font-size: clamp(14px, 1.15vw, 17px); line-height: 1.32; letter-spacing: -.016em}
.archive-row small {display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.35; color: var(--muted)}
@media (hover: hover) {
  a.project:hover h3, .archive-row a:hover strong, footer a:hover {text-decoration: underline; text-underline-offset: .18em; text-decoration-thickness: 1px}
  a.project:hover img {transform: translateY(-3px)}
}
footer {border-top: 1px solid var(--rule); min-height: clamp(40px, 6.2svh, 64px); color: var(--muted); font-size: 12.5px; line-height: 1.4}
footer a {color: var(--ink); padding-block: 10px}

@media (min-width: 761px) and (max-height: 700px) {
  main {padding-block: 20px}
  .projects {margin-top: 30px}
  .plate {height: clamp(80px, 14svh, 98px)}
  .project h3 {margin-top: 5px}
  .archive {margin-top: 34px}
}
@media (max-width: 760px) {
  .folio {padding-inline: clamp(22px, 5.8vw, 40px)}
  .mast {height: 55px}
  nav {gap: 22px}
  main {justify-content: flex-start; padding-block: clamp(35px, 7vw, 56px)}
  .projects {margin-top: 38px}
  .project-row, .archive-row {column-gap: 18px}
  .plate {height: 95px}
  .project h3 {font-size: 19px; margin-top: 5px}
  .project p {font-size: 13px}
  .archive {margin-top: 44px}
  .archive-row > a {align-items: flex-start; gap: 8px}
  .archive-row svg {width: 35px}
  footer {min-height: 44px}
}
@media (max-width: 560px) {
  .project-row {grid-template-columns: 1fr; gap: 10px; margin-top: 15px}
  .project {display: grid; grid-template-columns: clamp(88px, 26vw, 135px) minmax(0, 1fr); column-gap: 16px; align-content: center}
  .plate {grid-column: 1; grid-row: 1 / 3; height: 67px; justify-content: center; overflow: hidden}
  .plate img {width: 130%; flex: none; object-position: center}
  .project h3 {grid-column: 2; align-self: end; margin: 0; font-size: 19px; text-wrap: initial}
  .project p {grid-column: 2; align-self: start; margin-top: 4px}
  .archive-row {grid-template-columns: 1fr; gap: 5px; margin-top: 12px}
  .archive-row > a {align-items: center; gap: 13px}
  .archive-row svg {width: 42px}
}
@media (prefers-reduced-motion: reduce) {
  .plate img {transition: none}
  a.project:hover img {transform: none}
}