@font-face {
  font-family: "Anton";
  src: url("fonts/Anton-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/BarlowCondensed-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/BarlowCondensed-Italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/BarlowCondensed-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/BarlowCondensed-BoldItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/BarlowCondensed-BlackItalic.woff2") format("woff2");
  font-style: italic;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/IBMPlexMono-Bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --ink: #171717;
  --paper: #f4f0e7;
  --paper-deep: #ded9ca;
  --coral: #f55f5f;
  --acid: #d9ef61;
  --sky: #a8d9ed;
  --display: "Anton", sans-serif;
  --body: "Barlow Condensed", sans-serif;
  --mono: "IBM Plex Mono", monospace;
  --font-body: clamp(15px, calc(10px + 0.3125vw), 18px);
  --font-masthead-max: clamp(74px, calc(47.333px + 1.6667vw), 90px);
  --font-heading-max: clamp(48px, calc(38px + 0.625vw), 54px);
  --font-paper-title: clamp(22px, calc(17px + 0.3125vw), 25px);
  --font-ui: clamp(13px, calc(9.667px + 0.2083vw), 15px);
  --font-mono-label: clamp(12px, calc(8.667px + 0.2083vw), 14px);
  --font-news-heading: clamp(30px, calc(20px + 0.625vw), 36px);
  --font-hover-label: clamp(8px, calc(4.667px + 0.2083vw), 10px);
  --font-badge: clamp(11px, calc(7.667px + 0.2083vw), 13px);
  --font-footer: clamp(10px, calc(6.667px + 0.2083vw), 12px);
  --site-width: clamp(1000px, calc(666.667px + 20.8333vw), 1200px);
  --body-padding-top: clamp(28px, calc(14.667px + 0.8333vw), 36px);
  --body-padding-inline: clamp(18px, calc(8px + 0.625vw), 24px);
  --body-padding-bottom: clamp(70px, calc(43.333px + 1.6667vw), 86px);
  --shell-padding: clamp(28px, calc(14.667px + 0.8333vw), 36px);
  --profile-media-width: clamp(300px, calc(216.667px + 5.2083vw), 350px);
  --profile-gap: clamp(34px, calc(20.667px + 0.8333vw), 42px);
  --profile-copy-width: clamp(620px, calc(453.333px + 10.4167vw), 720px);
  --section-copy-width: clamp(760px, calc(526.667px + 14.5833vw), 900px);
  --news-label-width: clamp(120px, calc(70px + 3.125vw), 150px);
  --research-media-width: clamp(270px, calc(186.667px + 5.2083vw), 320px);
  --card-gap: clamp(18px, calc(8px + 0.625vw), 24px);
  --news-padding: clamp(20px, calc(10px + 0.625vw), 26px);
  --card-padding-block: clamp(18px, calc(11.333px + 0.4167vw), 22px);
  --card-padding-inline: clamp(20px, calc(10px + 0.625vw), 26px);
  --section-spacing: clamp(34px, calc(17.333px + 1.0417vw), 44px);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  font-synthesis: none;
}

body {
  min-width: 300px;
  margin: 0;
  padding: var(--body-padding-top) var(--body-padding-inline) var(--body-padding-bottom);
  color: var(--ink);
  background-color: var(--coral);
  background-image:
    linear-gradient(rgba(23, 23, 23, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(23, 23, 23, 0.035) 1px, transparent 1px);
  background-size: 8px 8px;
  font-family: var(--body);
}

body,
td,
th,
tr,
p,
a,
strong {
  font-family: var(--body);
  font-size: var(--font-body);
}

a {
  color: var(--ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--coral);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

a:hover,
a:focus-visible {
  color: var(--ink);
  background: var(--acid);
  outline: 2px solid var(--ink);
  outline-offset: 2px;
  text-decoration: none;
}

::selection {
  color: var(--paper);
  background: var(--ink);
}

.page-masthead {
  display: flex;
  align-items: baseline;
  justify-content: center;
  max-width: var(--site-width);
  margin: 0 auto 16px;
  color: var(--coral);
  font-family: var(--body);
  font-size: clamp(42px, 7vw, var(--font-masthead-max));
  font-style: italic;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 0.95;
  text-align: center;
  text-shadow: 3px 3px 0 var(--ink);
  -webkit-text-stroke: 2px var(--ink);
  transform: skew(-3deg);
}

.masthead-mark {
  margin: 0 0.12em;
  color: var(--acid);
}

.site-shell {
  width: min(100%, var(--site-width)) !important;
  max-width: none !important;
  margin: 0 auto 34px !important;
  overflow: hidden;
  border: 5px solid var(--ink) !important;
  border-radius: 8px;
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(23, 23, 23, 0.13) 0.7px, transparent 0.8px),
    linear-gradient(105deg, transparent 0 56%, rgba(23, 23, 23, 0.025) 56% 57%, transparent 57%);
  background-size: 5px 5px, 100% 100%;
  box-shadow: 10px 10px 0 var(--ink);
  container-name: site-shell;
  container-type: inline-size;
}

.site-shell > tbody > tr > td {
  padding: var(--shell-padding) !important;
}

.profile-panel,
.news-panel,
.section-intro,
.publication-list,
.project-list,
.site-footer {
  table-layout: fixed;
}

.profile-panel > tbody > tr {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(var(--profile-media-width), 1fr);
  align-items: center;
  gap: var(--profile-gap);
  padding-bottom: var(--shell-padding);
}

.profile-panel td {
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

.profile-panel td:first-child {
  padding-bottom: 24px !important;
  border-bottom: 3px dashed var(--ink);
}

.profile-panel td:first-child > p:first-child {
  margin: 0 0 18px;
  text-align: left !important;
}

name {
  display: block;
  max-width: var(--profile-copy-width);
  font-family: var(--display);
  font-size: clamp(42px, 6.2vw, 70px);
  font-style: normal;
  letter-spacing: -0.5px;
  line-height: 0.88;
  text-transform: uppercase;
  text-shadow: 3px 3px 0 var(--coral);
  transform: skew(-2deg);
}

.profile-panel td:first-child > p:first-child img {
  width: auto;
  max-width: 200px;
  height: 44px;
  margin-top: 12px;
  filter: grayscale(1) contrast(1.45);
  mix-blend-mode: multiply;
}

.profile-panel td:first-child > p:not(:first-child) {
  max-width: var(--profile-copy-width);
  line-height: 1.55;
}

.profile-panel td:first-child > p:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin: 20px 0 0;
  font-size: 0;
  text-align: left !important;
}

.profile-panel td:first-child > p:last-child a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 12px;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--paper);
  box-shadow: 2px 2px 0 var(--ink);
  font-family: var(--display);
  font-size: var(--font-ui);
  font-weight: 400;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-transform: uppercase;
}

.profile-panel td:first-child > p:last-child a:hover,
.profile-panel td:first-child > p:last-child a:focus-visible {
  background: var(--acid);
  outline: 0;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}

#email {
  display: inline-block !important;
  padding: 3px 8px;
  border: 2px solid var(--ink);
  background: var(--acid);
  font-family: var(--mono);
  font-size: var(--font-mono-label);
  box-shadow: 2px 2px 0 var(--ink);
}

.profile-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.profile-carousel:focus-visible {
  outline: 3px solid var(--coral);
  outline-offset: 12px;
}

.profile-carousel.is-dragging {
  cursor: grabbing;
}

.profile-card {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--paper);
  transform-origin: 50% 100%;
}

.profile-card--back {
  background: var(--acid);
  box-shadow: 7px 7px 0 var(--ink);
  transform: translate(8px, 8px) rotate(2deg) scale(0.98);
}

.profile-card--front {
  box-shadow: 7px 7px 0 var(--ink);
  will-change: transform, opacity;
  transition: transform 220ms cubic-bezier(0.2, 0.85, 0.35, 1), opacity 180ms ease;
}

.profile-carousel.is-dragging .profile-card--front {
  transition: none;
}

.profile-carousel:hover:not(.is-dragging) .profile-card--front {
  transform: translate(-2px, -2px) rotate(-1deg);
  box-shadow: 9px 9px 0 var(--ink);
}

.profile-card img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  pointer-events: none;
  object-fit: cover;
  object-position: center;
  filter: saturate(0.82) contrast(1.08);
  -webkit-user-drag: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.news-panel {
  margin: 26px 0 8px !important;
  border: 3px solid var(--ink) !important;
  border-radius: 8px;
  background: var(--sky);
  box-shadow: 5px 5px 0 var(--ink);
}

.news-panel td {
  display: grid;
  grid-template-columns: var(--news-label-width) 1fr;
  gap: var(--card-gap);
  align-items: start;
  padding: var(--news-padding) !important;
}

.news-panel h2 {
  margin: 0;
  padding: 9px 12px;
  border: 3px solid var(--ink);
  background: var(--coral);
  font-family: var(--display);
  font-size: var(--font-news-heading);
  font-style: normal;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--ink);
}

.news-panel ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.news-panel li {
  position: relative;
  padding: 0 0 9px 22px;
  line-height: 1.35;
}

.news-panel li::before {
  content: "■";
  position: absolute;
  top: 1px;
  left: 0;
  color: var(--coral);
  -webkit-text-stroke: 1px var(--ink);
}

.section-intro {
  position: relative;
  margin-top: var(--section-spacing) !important;
}

.section-intro td {
  padding: 0 0 14px !important;
  border-bottom: 3px dashed var(--ink);
}

.section-intro.compact td {
  padding-top: 10px !important;
}

heading {
  display: inline-block;
  margin-bottom: 4px;
  font-family: var(--body);
  font-size: clamp(30px, 5vw, var(--font-heading-max));
  font-style: italic;
  font-weight: 900;
  letter-spacing: 0.2px;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--coral);
  transform: skew(-2deg);
}

.section-intro p {
  max-width: var(--section-copy-width);
  margin: 10px 0 0;
  line-height: 1.5;
}

.publication-list,
.project-list {
  width: 100% !important;
  border-spacing: 0 !important;
}

.publication-list > tbody,
.project-list > tbody {
  display: grid;
  gap: var(--card-gap);
  padding-top: var(--card-gap);
}

.publication-list tr,
.project-list tr {
  position: relative;
  z-index: 0;
  display: grid;
  grid-template-columns: minmax(var(--research-media-width), 30%) minmax(0, 1fr);
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.52);
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.publication-list tr:nth-child(4n + 2),
.project-list tr:nth-child(odd) {
  background: color-mix(in srgb, var(--sky) 23%, var(--paper));
}

.publication-list tr:nth-child(4n + 4),
.project-list tr:nth-child(even) {
  background: color-mix(in srgb, var(--acid) 18%, var(--paper));
}

.publication-list tr::before,
.project-list tr::before {
  content: none;
}

.publication-list tr:hover,
.project-list tr:hover {
  z-index: 2;
  transform: translate(-2px, -2px);
  box-shadow: 8px 8px 0 var(--ink);
}

.publication-list td,
.project-list td {
  width: auto !important;
  position: relative;
  z-index: 1;
  background: transparent;
}

.publication-list td:first-child,
.project-list td:first-child {
  align-self: stretch;
  padding: 10px !important;
  border-right: 3px solid var(--ink);
}

.publication-list td:last-child,
.project-list td:last-child {
  align-self: center;
  padding: var(--card-padding-block) var(--card-padding-inline) !important;
  line-height: 1.35;
}

.one,
.two,
.wide_one,
.wide_two {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10;
}

.one,
.wide_one {
  position: relative;
  overflow: hidden;
  border: 2px solid var(--ink);
  border-radius: 5px;
  background: var(--paper-deep);
}

.two,
.wide_two {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 180ms steps(3, end);
}

.one > img,
.two img,
.two video,
.wide_one > img,
.wide_two img,
.wide_two video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: var(--project-media-fit, cover);
}

.one::after,
.wide_one::after {
  content: "HOVER TO PLAY";
  position: absolute;
  right: 5px;
  bottom: 5px;
  z-index: 3;
  padding: 3px 6px;
  border: 1px solid var(--ink);
  background: var(--acid);
  font-family: var(--mono);
  font-size: var(--font-hover-label);
  font-weight: 800;
  letter-spacing: 0.4px;
  pointer-events: none;
}

papertitle {
  display: block;
  margin-bottom: 7px;
  font-family: var(--display);
  font-size: var(--font-paper-title);
  font-weight: 400;
  letter-spacing: 0.25px;
  line-height: 1.05;
  text-transform: uppercase;
}

.publication-list td:last-child p,
.project-list td:last-child p {
  margin: 9px 0 0;
  line-height: 1.4;
}

.publication-list td:last-child p:empty,
.project-list td:last-child p:empty {
  display: none;
}

.publication-list font[color],
.project-list font[color] {
  color: var(--ink) !important;
}

.publication-list font[color] strong,
.project-list font[color] strong {
  display: inline-block;
  margin-left: 3px;
  padding: 1px 5px;
  border: 1px solid var(--ink);
  background: var(--coral);
  font-size: var(--font-badge);
  text-transform: uppercase;
}

.service-card {
  margin: 18px 0 4px;
  padding: 18px 20px;
  border: 3px solid var(--ink);
  border-radius: 8px;
  background: var(--acid);
  box-shadow: 5px 5px 0 var(--ink);
  font-family: var(--mono);
  font-size: var(--font-ui);
  font-weight: 700;
}

.site-footer {
  margin-top: 28px !important;
  border-top: 3px dashed var(--ink) !important;
}

.site-footer td {
  padding: 16px 0 0 !important;
}

.site-footer p {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--font-footer) !important;
  text-transform: uppercase;
}

.fade {
  transition: opacity 180ms steps(3, end);
}

span.highlight {
  background: var(--acid);
}

@container site-shell (max-width: 720px) {
  .publication-list,
  .project-list {
    --project-media-fit: contain;
  }

  .profile-panel > tbody > tr {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .profile-panel td:last-child {
    width: min(100%, 390px) !important;
  }

  .profile-carousel {
    aspect-ratio: 5 / 4;
  }

  .news-panel td,
  .publication-list tr,
  .project-list tr {
    grid-template-columns: 1fr;
  }

  .publication-list td:first-child,
  .project-list td:first-child {
    border-right: 0;
    border-bottom: 3px solid var(--ink);
  }

  .one,
  .two,
  .wide_one,
  .wide_two {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1600px) {
  :root {
    --site-width: 75vw;
    --font-body: clamp(18px, 1vw, 23px);
    --font-masthead-max: clamp(96px, 5vw, 120px);
    --font-heading-max: clamp(60px, 3vw, 72px);
    --font-paper-title: clamp(28px, 1.3vw, 34px);
    --font-ui: clamp(17px, 0.75vw, 19px);
    --font-mono-label: clamp(16px, 0.68vw, 18px);
    --font-news-heading: clamp(40px, 1.8vw, 46px);
    --font-hover-label: clamp(11px, 0.5vw, 13px);
    --font-badge: clamp(15px, 0.625vw, 17px);
    --font-footer: clamp(13px, 0.55vw, 15px);
  }
}

@media (max-width: 760px) {
  :root {
    --font-body: 16px;
  }

  .publication-list,
  .project-list {
    --project-media-fit: contain;
  }

  body {
    padding: 22px 12px 50px;
  }

  .page-masthead {
    margin-bottom: 13px;
    font-size: clamp(36px, 11vw, 54px);
    text-shadow: 2px 2px 0 var(--ink);
    -webkit-text-stroke-width: 1.5px;
  }

  .site-shell {
    border-width: 4px !important;
    box-shadow: 6px 6px 0 var(--ink);
  }

  .site-shell > tbody > tr > td {
    padding: 18px !important;
  }

  .profile-panel > tbody > tr {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  name {
    font-size: clamp(42px, 14vw, 62px);
  }

  .profile-panel td:last-child {
    width: min(100%, 390px) !important;
  }

  .profile-carousel {
    aspect-ratio: 5 / 4;
  }

  .news-panel td {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .news-panel h2 {
    width: fit-content;
  }

  .publication-list tr,
  .project-list tr {
    grid-template-columns: 1fr;
  }

  .publication-list td:first-child,
  .project-list td:first-child {
    border-right: 0;
    border-bottom: 3px solid var(--ink);
  }

  .one,
  .two,
  .wide_one,
  .wide_two {
    aspect-ratio: 16 / 9;
  }

  papertitle {
    font-size: 21px;
  }
}

@media (max-width: 420px) {
  .page-masthead {
    flex-wrap: wrap;
  }

  .profile-panel td:first-child > p:last-child a {
    padding-inline: 9px;
    font-size: 11px;
  }

  .publication-list td:last-child,
  .project-list td:last-child {
    padding: 15px !important;
  }
}

@media (hover: none) {
  .profile-carousel:hover:not(.is-dragging) .profile-card--front {
    transform: none;
    box-shadow: 7px 7px 0 var(--ink);
  }

  .publication-list tr:hover,
  .project-list tr:hover {
    transform: none;
    box-shadow: 5px 5px 0 var(--ink);
  }
}

@media (hover: none), (any-pointer: coarse) {
  .one::after,
  .wide_one::after {
    content: "SCROLL TO PLAY";
  }

  .publication-list tr.is-touch-active .two,
  .publication-list tr.is-touch-active .wide_two,
  .project-list tr.is-touch-active .two,
  .project-list tr.is-touch-active .wide_two {
    opacity: 1 !important;
  }

  .publication-list tr.is-touch-active .one::after,
  .publication-list tr.is-touch-active .wide_one::after,
  .project-list tr.is-touch-active .one::after,
  .project-list tr.is-touch-active .wide_one::after {
    opacity: 0;
  }
}

@media (pointer: coarse) {
  .profile-panel td:first-child > p:last-child a {
    min-height: 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}