:root {
  --page-gutter: var(--space-4);
  --container-width: 840px;
  /* Side inset that centers content in the container; cqw resolves against
     body (a size container), so it excludes the scrollbar width. */
  --inset: max(var(--page-gutter), calc((100cqw - var(--container-width)) / 2));
  --header-height: 56px;
  --item-max-width: 1184px;
  /* Cards are centered in the window and spill outside the text container:
     as wide as fits between the gutters, capped at the max. */
  --item-width: min(var(--item-max-width), calc(100cqw - 2 * var(--page-gutter)));
  --item-inset: calc((100cqw - var(--item-width)) / 2);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
p {
  margin: 0;
}

body {
  container-type: inline-size;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

/* Header */

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  margin-top: var(--space-4);
  padding: 0 var(--inset);
}

header > a {
  display: inline-block;
  line-height: 0;
}

header svg path {
  fill: currentColor;
}

/* Footer */

footer {
  margin: var(--space-8) 0 var(--space-72);
  padding: 0 var(--inset);
}

footer p {
  font: var(--type-body-tiny);
  color: var(--color-text-muted);
}

/* Intro */

main {
  padding: var(--space-88) var(--inset) 0;
}

main > h1 {
  font: var(--type-heading-xl);
}

/* Red links (intro, bio and contact): no underline, darker on hover. */
main > h1 a,
.bio a,
.contact a {
  color: var(--color-link);
  text-decoration: none;
}

main > h1 a:hover,
.bio a:hover,
.contact a:hover {
  color: var(--color-link-hover);
}

/* About */

.bio {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.bio p {
  font: var(--type-heading-lg);
}

.details {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--space-4);
  margin-top: var(--space-72);
}

/* Education and Contact stack in the last column. */
.details > div:last-child {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.details h2 {
  font: var(--type-heading-md);
  color: var(--color-text);
}

.details ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
  font: var(--type-body-xs);
}

.details li span {
  display: block;
  color: var(--color-text-muted);
}

.details li .role {
  color: var(--color-text);
}

.contact ul {
  gap: 0;
}

.articles a {
  text-decoration: none;
  border-bottom: 1px solid var(--color-border-strong);
}

.articles li span {
  margin-top: var(--space-half);
}

/* Projects */

.projects-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-top: var(--space-72);
}

.project {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  cursor: pointer;
}

.project-content {
  -webkit-user-select: none;
  user-select: none;
  display: flex;
  flex-direction: row;
  gap: var(--space-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Bleed to the viewport edges so cards scroll off-screen instead of being
     clipped by the text container; padding centers the first and last card. */
  margin-inline: calc(-1 * var(--inset));
  padding-inline: var(--item-inset);
}

.project-content::-webkit-scrollbar {
  display: none;
}

.project-content-item {
  flex: 0 0 auto;
  width: var(--item-width);
  aspect-ratio: 16 / 9;
  background: var(--color-bg-subtle);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* At rest only the first item (and whichever one the row is currently on)
   shows. Hovering or focusing the project fades the rest in. Touch screens
   have no hover, so there every item stays visible. */
@media (hover: hover) {
  .project-content-item:not(:first-child):not(.is-current) {
    opacity: 0;
    transition: opacity 0.4s ease;
  }

  .project:hover .project-content-item,
  .project:focus-within .project-content-item {
    opacity: 1;
  }
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
  .project-content-item:not(:first-child):not(.is-current) {
    transition: none;
  }
}

.project-content-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
  user-select: none;
}

.project-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-4);
}

.project-info h2 {
  font: var(--type-heading-lg);
}

.project-info span {
  font: var(--type-body-sm);
  margin-top: calc(-1 * var(--space-half));
  color: var(--color-text-muted);
}

.project-info p {
  grid-column: 2;
  grid-row: 1 / span 2;
  justify-self: end;
  align-self: start;
  max-width: 100%;
  font: var(--type-body-sm);
  color: var(--color-text);
  text-align: left;
  text-wrap: balance;
}

/* Text item: a square card the same height as the media items. */
.project-statement {
  /* Square, as tall as the image cards (16:9 of --item-width). */
  width: calc(var(--item-width) * 9 / 16);
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  overflow-y: auto;
  background: var(--color-bg-inverse);
  /* When current, line its text (not its edge) up with the intro text. */
  scroll-snap-align: start;
  scroll-margin-inline-start: calc(var(--inset) - var(--space-4));
}

.project-statement span {
  font: var(--type-body-sm);
  color: var(--color-text-inverse-secondary);
}

.project-statement div {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.project-statement p {
  font: var(--type-heading-md);
  max-width: 560px;
  color: var(--color-text-inverse);
}

@media (max-width: 720px) {
  :root {
    --page-gutter: var(--space-2);
    --item-width: 80cqw;
  }

  .projects-list {
    gap: var(--space-6);
  }

  /* One column on small screens; Education and Contact stack like the rest. */
  .details {
    grid-template-columns: 1fr;
    row-gap: var(--space-6);
  }

  .details > div:last-child {
    gap: var(--space-6);
  }

  .project-info {
    grid-template-columns: 1fr;
  }

  .project-info p {
    grid-column: 1;
    grid-row: auto;
    margin-top: var(--space-1);
  }
}