:root {
  --color-bg: #000000;
  --color-link: #ffffff;
  --color-link-active-bg: #000000;
  --color-link-active-text: #000000;
  --color-muted: #aaaaaa;
  --color-text: #ffffff;

  --font-body: 'Roboto Mono', monospace;
  --font-size-base: 13px;
  --font-size-small: 0.9rem;
  --font-size-title: clamp(2.2rem, 6vw, 3.2rem);
  --layout-max-width: 960px;
  --line-height: 1.7;
  --min-image-height-mobile: 40vh;
  --size-viewport-height: 100dvh;
  --size-viewport-width: 100dvw;

  --space-item-pad: 48px;
  --space-item-pad-compact: 32px;
  --space-item-pad-half: calc(var(--space-item-pad) / 2);
  --space-item-pad-compact-half: calc(var(--space-item-pad-compact) / 2);
  --space-header-gap: 12px;
  --space-header-pad: 48px;
  --space-page: 48px;
  --space-page-bottom: 72px;
  --space-page-x: 24px;
  --space-title-pad: 48px;

  --transition-fast: 0.2s ease;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: var(--size-viewport-height);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-bg);
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

a:hover,
a:focus-visible {
  color: var(--color-link-active-text);
  background-color: var(--color-link-active-bg);
  text-decoration: none;
  outline: none;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

a:focus-visible {
  box-shadow: none;
}

.exp-shell {
  max-width: var(--layout-max-width);
  margin: 0 auto;
  padding: var(--space-page) var(--space-page-x) var(--space-page-bottom);
}

.exp-home .exp-shell,
.exp-page .exp-shell {
  max-width: none;
  padding: 0;
}

.exp-header {
  padding: var(--space-title-pad);
}

.exp-title {
  font-size: var(--font-size-title);
  margin: 0;
  font-weight: 400;
}

.exp-page-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0;
  padding: var(--space-header-pad);
  font-size: var(--font-size-small);
  color: var(--color-muted);
}

.exp-return,
.exp-page-id {
  color: var(--color-text);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.exp-article p {
  margin: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.exp-block audio {
  display: block;
  width: 100%;
  margin-bottom: var(--space-item-pad-half);
}

.exp-layout {
  --layout-cols: 1fr;
  --layout-min-height: auto;
  --media-fit-width: 100%;
  --media-fit-height: 100%;
  --media-min-height: 0;
  --media-object-fit: contain;

  display: grid;
  grid-template-columns: var(--layout-cols);
  min-height: var(--layout-min-height);
  gap: 0;
  align-items: stretch;
  padding: var(--space-item-pad-half);
}

.exp-layout--split {
  --layout-cols: repeat(2, minmax(0, 1fr));
  align-items: start;
}

.exp-layout--ratio-3-2 {
  --layout-cols: 3fr 2fr;
}

.exp-layout--ratio-2-3 {
  --layout-cols: 2fr 3fr;
}

.exp-layout--split {
  --layout-min-height: var(--size-viewport-height);
}

.exp-layout--split .exp-block {
  padding-top: 0;
}

.exp-layout--stacked {
  --layout-cols: 1fr;
}

.exp-layout--narrow {
  max-width: 900px;
}

.exp-page-list {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-item-pad-half);
  display: grid;
  gap: 10px;
}

.exp-layout--image-grid {
  --layout-cols: repeat(3, minmax(0, 1fr));
  --layout-min-height: auto;
  align-items: start;
  grid-auto-rows: clamp(220px, 30vh, 360px);
}

.exp-layout--image-grid .exp-image {
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.exp-layout--image-grid .exp-image :is(img, video) {
  --media-fit-width: 100%;
  --media-fit-height: 100%;
  --media-object-fit: contain;
}

.exp-layout--image-grid .exp-block {
  grid-column: 1 / -1;
}

.exp-layout .exp-image,
.exp-layout .exp-block {
  padding: var(--space-item-pad-half);
}

.exp-layout .exp-image {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.exp-image {
  margin: 0;
}

.exp-image>a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: inherit;
  text-decoration: none;
}

.exp-image>a :is(img, video) {
  transition: opacity var(--transition-fast);
}

.exp-image>a:hover :is(img, video),
.exp-image>a:focus-visible :is(img, video) {
  opacity: 0;
}

.exp-image :is(img, video) {
  display: block;
  width: 100%;
  height: auto;
  max-width: var(--size-viewport-width);
  max-height: var(--size-viewport-height);
}

.exp-image img {
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

.exp-image video {
  object-position: top center;
}

.exp-layout .exp-image :is(img, video) {
  width: var(--media-fit-width);
  height: var(--media-fit-height);
  min-height: var(--media-min-height);
  object-fit: var(--media-object-fit);
  object-position: top center;
}

.exp-layout.exp-layout--image-grid .exp-image :is(img, video) {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 900px) {
  .exp-layout--image-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .exp-shell {
    padding: calc(var(--space-page) - 12px) var(--space-page-x) calc(var(--space-page-bottom) - 16px);
  }

  .exp-page-header {
    gap: var(--space-header-gap);
  }

  .exp-layout--split {
    --layout-cols: 1fr;
    --layout-min-height: auto;
  }

  .exp-layout--image-grid {
    grid-template-columns: 1fr;
  }

  .exp-layout--split .exp-image :is(img, video) {
    --media-min-height: var(--min-image-height-mobile);
  }

  .exp-layout .exp-image,
  .exp-layout .exp-block {
    padding: var(--space-item-pad-compact-half);
  }

}

.exp-header{padding:0 var(--portfolio-inset,4%) 30px}
.exp-title{margin:20px 0 25px;font:400 clamp(28px,4vw,62px)/1 'Roboto Mono',monospace;letter-spacing:normal;text-transform:uppercase}
a,a:visited{color:#fff;text-transform:uppercase;text-underline-offset:.15em}
a:hover,a:focus-visible{color:#fff;background:transparent;text-decoration:underline;text-transform:lowercase}
a:focus-visible{outline:2px dotted currentColor;outline-offset:5px}
.exp-block{overflow-wrap:anywhere}
.exp-page-header{padding:24px var(--portfolio-inset,4%);font-size:12px}
@media(max-width:600px){.exp-header{padding:0 var(--portfolio-inset,5%) 20px}.exp-title{font-size:32px;margin:0 0 25px}.exp-page-header{padding:20px var(--portfolio-inset,5%)}}