/* CSS Variable */
html {
  font-size: 20px;
}

:root {
  --main-font: sans-serif;
  --main-font-italic: serif;
  --font-size: 14px;
  --text-line-height: 1.05;
  --text-color: black;
  --site-padding: 10px;
}
@media screen and (min-width: 2160px) {
  :root {
    --font-size: 18px;
  }
}
@media screen and (max-width: 720px) {
  :root {
    --font-size: 17px;
    --text-line-height: 1.1;
  }
}

/* CSS Basics */
*,
*::before,
*::after {
  box-sizing: border-box;
  font-variant-numeric: oldstyle-nums;
}

* {
  margin: 0;
}

body {
  font-family: var(--main-font);
  font-size: var(--font-size);
  color: var(--text-color);
  line-height: var(--text-line-height);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  font-size: var(--font-size);
  line-height: var(--text-line-height);
  font-weight: var(--font-weight);
  color: var(--text-color);
}

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

a:hover {
  text-decoration: underline;
}

input,
button,
textarea,
select {
  font: inherit;
}

button,
.btn {
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  border: none;
  cursor: pointer;
}

button,
button:hover,
button:focus,
button:active,
button:visited,
button:focus-visible,
button:target {
  color: var(--text-color) !important;
  background: none;
  border: none;
  outline: none;
}

sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
  top: -0.5em;
}

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

@font-face {
  font-family: gaisyr-book;
  src: url("/assets/fonts/ABCGaisyr-Book.woff2");
}
@font-face {
  font-family: gaisyr-book-italic;
  src: url("/assets/fonts/ABCGaisyr-BookItalic.woff2");
}
body {
  font-family: gaisyr-book;
  padding: var(--site-padding);
  padding-bottom: 0;
  width: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 720px) {
  body:has(.homepage-container:not(.state-about):not(.state-project)) {
    padding-top: 0;
  }
  .homepage-container:not(.state-about):not(.state-project) nav {
    top: var(--site-padding);
  }
}
em {
  font-family: gaisyr-book-italic;
  font-style: normal;
}

.homepage-container {
  --col: calc(100% / 12);
  --about-basis: calc(var(--col) * 4);
  --project-basis: calc(var(--col) * 4);
  --nav-left: calc(var(--col) * 5);
  --nav-width: calc(var(--col) * 2);
  --scale-about: 1;
  --scale-project: 1;
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 0;
}
@media screen and (max-width: 1080px) {
  .homepage-container {
    --about-basis: calc(var(--col) * 4);
    --project-basis: calc(var(--col) * 4);
    --nav-left: calc(var(--col) * 3);
    --nav-width: calc(var(--col) * 3);
  }
}

.homepage-container.state-about {
  --nav-left: calc(var(--col) * 6);
  --scale-about: 1.5;
}
.homepage-container.state-about > .about-container {
  opacity: 1 !important;
}
.homepage-container.state-about > .homepage-content {
  position: fixed;
  top: 0;
  right: var(--site-padding);
  width: calc((100vw - var(--site-padding) * 2) / 3);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding-top: var(--site-padding);
  padding-bottom: var(--site-padding);
  box-sizing: border-box;
}
@media screen and (max-width: 1080px) {
  .homepage-container.state-about > .homepage-content {
    width: calc((100vw - var(--site-padding) * 2) / 4);
  }
}
@media screen and (max-width: 720px) {
  .homepage-container.state-about > .homepage-content {
    position: absolute;
    top: 6lh;
    right: 0;
    width: 100%;
    height: auto;
    overflow: visible;
    scale: 1;
    font-size: var(--font-size);
    pointer-events: none;
  }
}

.homepage-container.state-project {
  --nav-left: calc(var(--col) * 4);
  --scale-project: 1.5;
}
@media screen and (max-width: 1080px) {
  .homepage-container.state-project {
    --nav-left: calc(var(--col) * 3);
  }
}
.homepage-container.state-project > .homepage-content {
  opacity: 1 !important;
}
.homepage-container.state-project > .about-container {
  position: fixed;
  top: 0;
  left: var(--site-padding);
  width: calc((100vw - var(--site-padding) * 2) / 3);
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding-top: var(--site-padding);
  padding-bottom: var(--site-padding);
  box-sizing: border-box;
}
@media screen and (max-width: 1080px) {
  .homepage-container.state-project > .about-container {
    width: calc((100vw - var(--site-padding) * 2) / 4);
  }
}
@media screen and (max-width: 720px) {
  .homepage-container.state-project > .about-container {
    position: absolute;
    top: 6lh;
    left: 0;
    width: 100%;
    height: auto;
    overflow: visible;
    scale: 1;
    font-size: var(--font-size);
    pointer-events: none;
  }
}

.homepage-container.past-state-about > .about-container {
  opacity: 0.1 !important;
  cursor: pointer;
}
@media screen and (max-width: 720px) {
  .homepage-container.past-state-about > .about-container {
    opacity: 0 !important;
    cursor: default;
  }
}

.homepage-container.past-state-project > .homepage-content {
  opacity: 0.1 !important;
  cursor: pointer;
}
@media screen and (max-width: 720px) {
  .homepage-container.past-state-project > .homepage-content {
    opacity: 0 !important;
    cursor: default;
  }
}

@media screen and (max-width: 720px) {
  .homepage-container.mobile-menu-open > .homepage-content,
  .homepage-container.mobile-menu-open > .about-container {
    pointer-events: none;
    overflow: hidden;
  }
  .homepage-container.mobile-menu-open.state-about > .about-container {
    opacity: 0.1 !important;
  }
  .homepage-container.mobile-menu-open:not(.state-about) > .homepage-content {
    opacity: 0.1 !important;
  }
  .homepage-container.mobile-menu-open #mobile-menu-close {
    display: block;
  }
  .homepage-container.mobile-menu-open nav {
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.about-container,
.homepage-content {
  transition: scale 500ms ease, opacity 500ms ease;
}

.about-container {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--about-basis);
  transform-origin: top left;
  scale: var(--scale-about);
  opacity: 0;
}
@media screen and (max-width: 720px) {
  .about-container {
    top: 6lh;
    scale: 1;
    width: 100%;
  }
}
.about-container .about-inner {
  font-size: var(--font-size);
}
.about-container .about-inner > div:last-of-type {
  margin-bottom: 4lh;
}
.about-container .about-general-info > p:not(:last-child) {
  margin-bottom: 1lh;
}
.about-container .about-education,
.about-container .about-curation,
.about-container .about-writing {
  text-align: center;
}
.about-container .about-education-item:not(:last-child),
.about-container .about-curation-item:not(:last-child),
.about-container .about-writing-item:not(:last-child) {
  margin-bottom: 1lh;
}
@media screen and (max-width: 720px) {
  .about-container .about-curation-item-entries > div:not(:last-child),
  .about-container .about-writing-item-entries > div:not(:last-child) {
    padding-bottom: 0.25lh;
  }
}
.about-container .credits {
  text-align: center;
  opacity: 0.5;
  font-size: 8px;
  margin-bottom: 2lh;
}
.about-container .credits a {
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 2px;
}
@media screen and (max-width: 720px) {
  .about-container .credits {
    font-size: 10px;
  }
}

.homepage-content {
  position: absolute;
  top: 0;
  right: 0;
  width: var(--project-basis);
  transform-origin: top right;
  scale: var(--scale-project);
  opacity: 0;
}
@media screen and (max-width: 720px) {
  .homepage-content {
    top: 6lh;
    scale: 1;
    width: 100%;
    font-size: var(--font-size);
  }
}
.homepage-content .project-inner * {
  margin-bottom: 1lh;
}
.homepage-content .project-inner .curation-event-header,
.homepage-content .project-inner .writing-event-header {
  margin-bottom: 2lh;
}
.homepage-content .project-inner .curation-event-header > h2, .homepage-content .project-inner .curation-event-header > p,
.homepage-content .project-inner .writing-event-header > h2,
.homepage-content .project-inner .writing-event-header > p {
  margin: 0;
}
.homepage-content .project-inner .curation-event-blocks a,
.homepage-content .project-inner .writing-event-blocks a {
  text-decoration: underline;
  text-decoration-thickness: 0.5px;
  text-underline-offset: 2px;
}
.homepage-content .project-inner .curation-event-blocks blockquote,
.homepage-content .project-inner .writing-event-blocks blockquote {
  padding-left: 3lh;
}
.homepage-content .project-inner .curation-event-blocks .credits,
.homepage-content .project-inner .writing-event-blocks .credits {
  text-align: center;
  margin-bottom: 2lh;
}
.homepage-content .project-inner .curation-event-blocks ul,
.homepage-content .project-inner .writing-event-blocks ul {
  list-style-type: disc;
  padding-left: 0.8lh;
}
.homepage-content .project-inner .curation-event-blocks ul li,
.homepage-content .project-inner .writing-event-blocks ul li {
  padding-left: 2.25lh;
}
.homepage-content .project-inner .curation-event-blocks ul li:not(:last-child),
.homepage-content .project-inner .writing-event-blocks ul li:not(:last-child) {
  margin-bottom: 0;
}
.homepage-content .project-inner .curation-event-blocks img,
.homepage-content .project-inner .writing-event-blocks img {
  max-width: 100%;
  margin-bottom: 0;
  height: auto;
}
.homepage-content .project-inner .curation-event-blocks figcaption,
.homepage-content .project-inner .writing-event-blocks figcaption {
  padding-top: 0.375lh;
  font-size: 9px;
}
@media screen and (max-width: 720px) {
  .homepage-content .project-inner .curation-event-blocks figcaption,
  .homepage-content .project-inner .writing-event-blocks figcaption {
    font-size: 12px;
    padding-top: 0.5lh;
  }
}

@media screen and (max-width: 720px) {
  .homepage-container:not(.state-about):not(.state-project) > .about-container,
  .homepage-container:not(.state-about):not(.state-project) > .homepage-content {
    display: none;
  }
}
h2 {
  margin-top: 4lh;
  margin-bottom: 1lh;
}
@media screen and (max-width: 720px) {
  h2 {
    margin-top: 2lh;
  }
}

nav .nav-active {
  text-decoration: underline;
}

nav {
  position: fixed;
  top: var(--site-padding);
  left: var(--nav-left);
  width: var(--nav-width);
  height: calc(100dvh - var(--site-padding) * 2);
  transition: left 500ms ease;
}
@media screen and (max-width: 720px) {
  nav {
    width: calc(100% - var(--site-padding) * 2);
    left: var(--site-padding);
    position: absolute;
    top: 0;
  }
}
nav > a {
  padding-left: calc(50% - var(--site-padding));
}
nav > a:hover {
  cursor: pointer;
}
nav > ul {
  text-align: right;
  padding-right: calc(50% - var(--site-padding));
  height: 0;
  overflow: hidden;
  transition: height var(--height-duration, 0.6s) ease;
}
nav > ul li {
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity var(--item-duration, 0.3s) ease, transform var(--item-duration, 0.3s) ease;
}
nav > ul.active {
  height: auto;
}
nav > ul.active li {
  transform: translateY(0);
  opacity: 1;
}
nav > ul.active li:hover {
  cursor: pointer;
}
@media screen and (max-width: 720px) {
  nav > ul.active li {
    margin-bottom: 0.125lh;
  }
}
nav > ul.active li:last-of-type {
  height: 18px;
}
@media screen and (max-width: 720px) {
  nav > ul.active li:last-of-type {
    height: 20px;
  }
}
@media screen and (min-width: 2160px) {
  nav > ul.active li:last-of-type {
    height: 22px;
  }
}

#mobile-menu-close {
  display: none;
}

@media screen and (max-width: 720px) {
  #curation,
  #writing {
    text-decoration: none !important;
  }
}
@media screen and (max-width: 720px) {
  body.mobile-menu-open {
    overflow: hidden;
  }
}

.top-button {
  display: none;
}
@media screen and (max-width: 720px) {
  .top-button {
    display: block;
    width: 100%;
    padding: 5lh 0 0 0;
    text-decoration: none;
    margin-bottom: 1lh !important;
  }
}

iframe {
  border: none;
  width: 100%;
  aspect-ratio: 16/9;
  transition: zoom 500ms ease, width 500ms ease;
}

.homepage-container.state-project > .homepage-content iframe {
  zoom: 0.6666666667;
  margin-bottom: 0;
}
@media screen and (max-width: 720px) {
  .homepage-container.state-project > .homepage-content iframe {
    zoom: 1;
    width: 100%;
  }
}

.homepage-container.past-state-project > .homepage-content iframe {
  pointer-events: none;
}

/*# sourceMappingURL=main.build.css.map */