/* Variables */
:root {
  /* Color */
  --color-bg: #e9e9ff;
  --color-text: #000064;

  /* Font */
  --font-size-xs: clamp(0.75rem, 0.6618rem + 0.2353vw, 0.85rem);
  --font-size-s: clamp(0.75rem, 0.5294rem + 0.5882vw, 1rem);
  --font-size-m: clamp(1rem, 0.7794rem + 0.5882vw, 1.25rem);
  --font-size-l: 1.875rem;
  --font-size-xl: clamp(2.56rem, 2.1718rem + 1.0353vw, 3rem);

  /* Sizes */
  --space-s: clamp(1rem, 0.5588rem + 1.1765vw, 1.5rem);
  --space-m: clamp(2rem, 1.1176rem + 2.3529vw, 3rem);
  --space-l: clamp(4rem, 2.2353rem + 4.7059vw, 6rem);
  --space-xl: clamp(6rem, 0.7059rem + 14.1176vw, 12rem);

  --masonry-gap: var(--space-m);
}

/* Base */
html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: var(--font-size-m);
  line-height: 1.4;
  background-color: var(--color-bg);
  color: var(--color-text);
}
body:has(.menu[data-open="true"]) {
  /* Scroll-lock */
  overflow: hidden;
}
body[data-template="projects"] main {
  display: grid;
  gap: var(--space-m);
}

.header {
  padding: var(--space-m);
  background-color: var(--color-bg);

  /* Cancel out bottom padding for projects template since there's already a
  grid gap. However we have to keep the padding for sticky position,
  therefor the negative margin hack. */
  body[data-template="projects"] & {
    margin-bottom: calc(var(--space-m) * -1);
  }

  /* Since the menu is only sticky during scroll up it could be distracting
  for users with a reduced motion preference.  */
  @media (width < 600px) and (prefers-reduced-motion: no-preference) {
    &[data-sticky] {
      position: sticky;
      top: 0;
      transform: translateY(0);
      transition: transform 200ms ease-in-out;
    }

    &[data-hidden] {
      transform: translateY(-100%);
    }
  }
}

.text {
  padding: var(--space-m);
  padding-top: 0;
  --flow-space: 1lh;

  a {
    text-decoration-line: underline;
    text-decoration-style: dotted;
    text-underline-offset: 0.2em;
  }
}

h1,
h2,
h3 {
  margin: 0;
  text-decoration: none;
  color: inherit;
  font-weight: inherit;
}

h1 {
  font-size: var(--font-size-xl);
  text-box: trim-both cap alphabetic;
}

h2,
h3 {
  font-size: var(--font-size-l);
}

a {
  text-decoration: none;
  color: inherit;
}

p {
  margin: 0;
  text-wrap: pretty;
}

img {
  width: 100%;
  max-width: 100%;
  display: block;
}

blockquote {
  margin: 0;
  margin-inline: var(--space-m);
  font-size: var(--font-size-s);

  footer::before {
    content: "–";
  }
}

figure {
  margin: 0;
  display: block;
  font-size: var(--font-size-xs);

  figcaption {
    display: flex;
    flex-direction: row;
    box-sizing: border-box;
    gap: 1ch;
    justify-content: space-between;
    padding: 0.5em;
    padding-left: 0;
    text-box: trim-both cap alphabetic;

    min-height: var(--masonry-gap);

    .masonry-column:first-child &,
    .masonry[data-enabled="false"] & {
      padding-left: 0.5em;
    }

    > * {
      text-box: trim-both cap alphabetic;
    }
  }
}

summary {
  cursor: pointer;
}

[hidden] {
  display: none;
}

/* Utility */
.flow {
  display: flex;
  flex-direction: column;
  gap: var(--flow-space, var(--space-m));
}

.no-transition {
  transition: none !important;
}

[data-cloak] {
  visibility: hidden;
}

/* Menu */
.menu {
  background: var(--color-bg);
  font-size: var(--font-size-l);

  li {
    text-box: trim-both cap alphabetic;
  }
}
.menu-items {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0;
  margin: 0;
  gap: 1ch;
  list-style: none;
  background-color: var(--color-bg);

  a:not([aria-current="page"]) {
    color: var(--color-bg);
    -webkit-text-stroke: 2px var(--color-text);
    paint-order: stroke fill;
    letter-spacing: 0.05em;
  }
}

/* Masonry */
.masonry[data-enabled="true"] {
  display: grid;
  gap: var(--masonry-gap);
  grid-template-columns: 1fr 1fr;
}

.masonry-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-m);
}

/* External Video */
.external-video {
  position: relative;
}
.external-video-player {
  position: absolute;
  inset: 0;

  iframe {
    display: block;
    width: 100%;
    height: 100%;
  }
}
.external-video-button {
  position: absolute;
  inset: 0;
  background: none;
  border: none;
  cursor: pointer;

  img {
    width: 5rem;
    margin: auto;
  }
}

/* Accordion */
.accordion {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.accordion-content {
  --flow-space: 1lh;
  font-size: var(--font-size-s);
  margin-bottom: 0.5lh;
}

/* Project */
.project {
  .masonry-column {
    /* Disable the masonry's row gap, well set the height of the figcaption
    below each image instead. */
    row-gap: 0;
  }
}

.project-info {
  .masonry[data-enabled="true"] & {
    padding-right: 0;
  }

  > * {
    text-box: trim-both cap alphabetic;
  }
}

.dates .accordion-content {
  --flow-space: 0.1lh;
}
.date {
  display: flex;
  flex-direction: row;
  gap: 2ch;
  > *:first-child {
    font-variant-numeric: tabular-nums;
  }
}

.project-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
}

.project-group-info {
  padding-block: 0;
}

.project-preview h2 {
  margin-top: 1.5rem;
  text-box: trim-both cap alphabetic;

  .masonry-column:first-child &,
  .masonry[data-enabled="false"] & {
    margin-left: var(--space-m);
  }

  .masonry-column:last-child &,
  .masonry[data-enabled="false"] & {
    margin-right: 1ch;
  }
}

/* Footer */
.footer {
  --flow-space: 0.5lh;
  display: flex;
  flex-direction: column;
  padding: var(--space-m);
  padding-top: var(--space-xl);
  margin-top: auto;
}
.footer-home {
  font-size: var(--font-size-l);
  text-box: trim-both cap alphabetic;
}
.footer-mail {
  font-size: var(--font-size-m);
  text-box: trim-both cap alphabetic;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-underline-offset: 0.2em;
}