@font-face {
  font-family: "Glow Sans SC";
  src: url("/assets/fonts/GlowSansSC-Mewroom-Book.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

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

@font-face {
  font-family: "Instrument Sans";
  src: url("/assets/fonts/InstrumentSans-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  color: var(--color-content);
  background: var(--color-ground);
}

body {
  font-synthesis: none;
  text-rendering: geometricPrecision;
}

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

button {
  color: inherit;
}

.page-shell {
  display: flex;
  width: 100%;
  max-width: var(--page-max-width);
  min-height: var(--page-min-height);
  margin: 0 auto;
  flex-direction: column;
  align-items: flex-start;
  overflow: clip;
  background: var(--color-ground);
}

.home-page {
  justify-content: space-between;
}

.home-main {
  width: 100%;
  flex: none;
}

.site-header,
.site-footer {
  display: flex;
  width: 100%;
  height: var(--header-height);
  padding: 0 var(--page-inset);
  flex: none;
  align-items: center;
  font-family: "Instrument Sans", sans-serif;
  color: var(--color-content);
}

.site-header {
  font-size: var(--nav-size);
  font-weight: 400;
  line-height: var(--nav-line);
  letter-spacing: var(--nav-tracking);
}

.site-name {
  width: auto;
  height: var(--nav-line);
  margin: 0;
  flex: 1 1 auto;
  font-size: var(--nav-size);
  font-weight: 500;
  line-height: var(--nav-line);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.site-nav {
  display: flex;
  width: calc(var(--nav-item-width) * 2 + var(--nav-gap));
  height: var(--nav-line);
  flex: none;
  gap: var(--nav-gap);
}

.nav-about,
.nav-contact {
  width: var(--nav-item-width);
  height: var(--nav-line);
  flex: none;
  white-space: nowrap;
}

.site-footer {
  height: var(--footer-height);
  justify-content: flex-end;
  font-size: var(--latin-size);
  font-weight: 400;
  line-height: var(--latin-line);
  letter-spacing: var(--latin-tracking);
}

.site-footer span {
  height: var(--latin-line);
  white-space: nowrap;
}

a.site-name:focus-visible,
.work-card:focus-visible,
.slide-button:focus-visible,
[data-carousel]:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 3px;
}

.works {
  display: flex;
  width: 100%;
  height: auto;
  padding: 0 var(--page-inset);
  flex-direction: column;
  align-items: flex-start;
  gap: var(--works-gap);
}

.year-row {
  display: flex;
  width: 100%;
  height: auto;
  align-items: flex-start;
  gap: var(--year-row-gap);
}

.work-list {
  display: flex;
  width: auto;
  min-width: 0;
  height: auto;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--work-card-gap-y) var(--work-card-gap-x);
}

.work-card {
  position: relative;
  display: block;
  height: var(--work-card-height);
  flex: none;
  overflow: hidden;
  background: var(--color-ground);
}

.home-year {
  width: var(--year-width);
  height: var(--latin-line);
  flex: none;
  font-family: "Instrument Sans", sans-serif;
  font-size: var(--latin-size);
  font-weight: 400;
  line-height: var(--latin-line);
  letter-spacing: var(--latin-tracking);
  white-space: nowrap;
}

.image-stage,
.image-mask {
  position: absolute;
  display: block;
}

.image-stage {
  inset: 0;
  width: 100%;
  height: 100%;
}

.image-mask {
  overflow: hidden;
}

.image-mask img {
  position: absolute;
  display: block;
  max-width: none;
}

.detail-media,
.detail-text {
  width: 100%;
  height: auto;
  padding-right: var(--page-inset);
  padding-left: var(--page-inset);
}

.detail-media {
  padding-bottom: var(--media-bottom-space);
}

.gallery,
.title-row,
.detail-body {
  width: min(100%, var(--detail-max-width));
}

.gallery {
  height: auto;
}

.slide-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--stage-ratio);
  overflow: hidden;
}

.slide {
  position: absolute;
  inset: 0;
  display: none;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

.slide.is-active {
  display: block;
}

.slide-controls {
  position: relative;
  width: 100%;
  height: var(--controls-height);
  font-family: "Instrument Sans", sans-serif;
  font-size: var(--latin-size);
  font-weight: 400;
  line-height: 22px;
  letter-spacing: var(--latin-tracking);
}

.slide-count {
  position: absolute;
  bottom: 11px;
  left: 0;
  height: 22px;
}

.slide-button {
  position: absolute;
  bottom: 11px;
  display: flex;
  width: 44px;
  height: 22px;
  padding: 0;
  align-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.slide-button svg {
  display: block;
  overflow: visible;
}

.slide-button path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
  stroke-linecap: square;
}

.slide-prev {
  right: 55px;
  justify-content: center;
}

.slide-next {
  right: 0;
  justify-content: flex-end;
}

.detail-text {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--detail-text-gap);
}

.title-row {
  display: flex;
  height: auto;
  align-items: baseline;
  gap: var(--title-row-gap);
}

.detail-title,
.detail-type,
.detail-body {
  margin: 0;
  color: var(--color-content);
}

.detail-title {
  width: auto;
  min-width: 0;
  flex: 1 1 auto;
  font-family: "Glow Sans SC", sans-serif;
  font-size: var(--title-size);
  font-weight: 500;
  line-height: var(--title-line);
  letter-spacing: var(--title-tracking);
}

.detail-type {
  width: auto;
  height: var(--type-line);
  flex: none;
  font-family: "Instrument Sans", sans-serif;
  font-size: var(--type-size);
  font-weight: 400;
  line-height: var(--type-line);
  letter-spacing: var(--type-tracking);
  text-align: right;
  text-transform: uppercase;
  white-space: nowrap;
}

.detail-body {
  height: auto;
  font-family: "Glow Sans SC", sans-serif;
  font-size: var(--body-size);
  font-weight: 500;
  line-height: var(--body-line);
  letter-spacing: var(--body-tracking);
  line-break: strict;
  overflow-wrap: normal;
  word-break: normal;
  white-space: normal;
  hyphens: none;
  font-kerning: normal;
}

.latin {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 400;
}

.detail-body p,
.not-found p {
  margin: 0;
  padding: 0;
}

.detail-body p + p {
  margin-top: var(--paragraph-space);
}

.cjk-line {
  display: block;
  width: 100%;
  white-space: nowrap;
}

.detail-title .cjk-line {
  height: var(--title-line);
  line-height: var(--title-line);
}

.detail-body .cjk-line {
  height: var(--body-line);
  line-height: var(--body-line);
}

.cjk-atom {
  white-space: pre;
}

.cjk-atom.is-trimmed {
  display: inline-block;
  font-feature-settings: "halt" 1;
  vertical-align: baseline;
}

.not-found {
  min-height: var(--detail-max-width);
}