@font-face {
  font-family: "Terza Reader";
  src: url("typefaces/TerzaReaderTrial-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Terza Reader";
  src: url("typefaces/TerzaReaderTrial-LightItalic.woff") format("woff");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Terza Editor";
  src: url("typefaces/TerzaEditorTrial-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  --home-bg: #E5E0D3;
  --home-text: #000000;
  --home-logo: #83A6AB;
  --bg: var(--home-bg);
  --fg: var(--home-text);
  --logo: var(--home-logo);
  --logo-mask: url("data:image/svg+xml,%3Csvg%20width%3D%2243%22%20height%3D%2243%22%20viewBox%3D%220%200%2043%2043%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%20%3Cg%20clip-path%3D%22url(%23clip0_147_78)%22%3E%20%3Cpath%20d%3D%22M13.9863%201.60085V8.6514C13.9863%209.60638%2014.7604%2010.3804%2015.7154%2010.3804H26.4778C27.4327%2010.3804%2028.2068%209.60638%2028.2068%208.6514V1.60085C28.2068%200.716238%2027.4906%200%2026.6059%200H15.5884C14.7038%200%2013.9876%200.716238%2013.9876%201.60085H13.9863Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M13.9863%2015.7991V19.864C13.9863%2020.094%2014.1622%2020.349%2014.3771%2020.4307C17.8025%2021.7275%2020.2817%2024.4454%2022.546%2026.765C24.2738%2028.5343%2025.8708%2030.169%2027.7507%2031.266C27.9995%2031.4118%2028.2068%2031.2911%2028.2068%2031.0021V15.8003C28.2068%2014.8453%2027.4327%2014.0713%2026.4778%2014.0713H15.7154C14.7604%2014.0713%2013.9863%2014.8453%2013.9863%2015.8003V15.7991Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M21.0959%2031.0282C19.3644%2029.2552%2016.3185%2025.8261%2014.4399%2024.7467C14.1911%2024.6035%2013.9863%2024.7254%2013.9863%2025.0119V40.754C13.9863%2041.6386%2014.7026%2042.3549%2015.5872%2042.3549H26.6047C27.4893%2042.3549%2028.2055%2041.6386%2028.2055%2040.754V36.3473C28.2055%2036.1198%2028.0321%2035.8635%2027.8198%2035.7818C25.0415%2034.7276%2023.3628%2033.3491%2021.0959%2031.0282Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M42.3562%2025.0951V15.6721C42.3562%2014.7875%2041.64%2014.0713%2040.7553%2014.0713H33.9888C33.0338%2014.0713%2032.2598%2014.8453%2032.2598%2015.8003V32.2398C32.2598%2032.4635%2032.442%2032.6545%2032.6656%2032.6595C32.7523%2032.6621%2032.839%2032.6633%2032.927%2032.6633C35.9214%2032.6633%2038.4433%2031.1944%2040.3344%2029.542C41.6173%2028.4199%2042.3562%2026.8015%2042.3562%2025.0963V25.0951Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M9.93406%2024.2117C9.93406%2023.9805%209.74558%2023.792%209.51437%2023.792C5.62407%2023.792%202.66613%2025.9671%200.741089%2028.0203C0.261084%2028.5317%200.000976562%2029.2103%200.000976562%2029.9102V37.1944C0.000976562%2040.0456%202.31179%2042.3564%205.16291%2042.3564H8.33446C9.21908%2042.3564%209.93532%2041.6401%209.93532%2040.7555V24.2129L9.93406%2024.2117Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M32.9273%2036.7141C32.8079%2036.7141%2032.6885%2036.7129%2032.5704%2036.7091C32.3995%2036.7041%2032.2588%2036.841%2032.2588%2037.0132V40.7552C32.2588%2041.6398%2032.975%2042.3561%2033.8596%2042.3561H37.1945C40.0457%2042.3561%2042.3565%2040.0453%2042.3565%2037.1941V32.0586C41.2934%2034.5994%2036.7786%2036.7141%2032.9273%2036.7141Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M33.9871%2010.3794H40.7537C41.6383%2010.3794%2042.3545%209.66321%2042.3545%208.77859V5.16096C42.3545%202.30983%2040.0437%20-0.000976562%2037.1926%20-0.000976562H33.8577C32.9731%20-0.000976562%2032.2568%200.715261%2032.2568%201.59988V8.65042C32.2568%209.6054%2033.0309%2010.3794%2033.9859%2010.3794H33.9871Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M9.5134%2019.7394C9.55109%2019.7394%209.58879%2019.7394%209.62648%2019.7394C9.79612%2019.7419%209.93309%2019.605%209.93309%2019.4366V15.7988C9.93309%2014.8439%209.15905%2014.0698%208.20406%2014.0698H1.60085C0.716238%2014.0698%200%2014.7861%200%2015.6707V24.2831C1.3885%2021.8994%205.56278%2019.7382%209.5134%2019.7382V19.7394Z%22%20fill%3D%22black%22%2F%3E%20%3Cpath%20d%3D%22M8.33349%200H5.16194C2.31081%200%200%202.31081%200%205.16194V8.77957C0%209.66418%200.716238%2010.3804%201.60085%2010.3804H8.20532C9.1603%2010.3804%209.93434%209.60638%209.93434%208.6514V1.60085C9.93434%200.716238%209.2181%200%208.33349%200Z%22%20fill%3D%22black%22%2F%3E%20%3C%2Fg%3E%20%3Cdefs%3E%20%3CclipPath%20id%3D%22clip0_147_78%22%3E%20%3Crect%20width%3D%2242.356%22%20height%3D%2242.356%22%20fill%3D%22white%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%20%3C%2Fsvg%3E");
  --ease: 180ms ease;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Terza Reader", Georgia, serif;
  font-weight: 300;
  transition: background-color var(--ease), color var(--ease);
}

body.is-active {
  --logo: var(--fg);
}

a {
  color: inherit;
  text-underline-offset: 0.12em;
}

p {
  margin: 0;
}

.stage {
  width: 100%;
  margin: 0 auto;
}

.artboard {
  position: relative;
  width: 100%;
  aspect-ratio: 1440 / 3130;
  min-height: 100vh;
}

.site-logo {
  position: absolute;
  display: block;
  width: 30px;
  aspect-ratio: 1;
  color: var(--logo);
  background: currentColor;
  -webkit-mask: var(--logo-mask) center / contain no-repeat;
  mask: var(--logo-mask) center / contain no-repeat;
  transition: color var(--ease);
}

.top-logo {
  left: 4.1667%;
  top: 3.8339%;
}

.intro {
  position: absolute;
  width: 26.95%;
  font-size: 14px;
  line-height: 1.36;
  letter-spacing: 0;
}

.intro p + p {
  margin-top: 0;
}

.intro-right p + p {
  margin-top: 1.36em;
}

.mobile-intro {
  display: none;
}

.intro-toggle {
  appearance: none;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--logo);
  font: inherit;
  cursor: pointer;
}

.mobile-intro-full {
  display: none;
}

.mobile-intro.is-expanded .intro-more {
  display: none;
}

.mobile-intro.is-expanded .mobile-intro-full {
  display: block;
}

.intro-left {
  left: 35.5556%;
  top: 6.4856%;
}

.intro-right {
  left: 66.875%;
  top: 6.4856%;
}

.portfolio {
  display: contents;
}

.work-item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  color: var(--fg);
}

.work-button {
  position: relative;
  display: block;
  width: var(--img-w);
  max-width: var(--img-max);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.work-button::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--bg);
  content: "";
  opacity: 0;
  transition: opacity var(--ease), background-color var(--ease);
}

.work-button img {
  display: block;
  width: 100%;
  height: auto;
  transition: filter var(--ease), opacity var(--ease);
}

body.is-active .work-item:not(.is-active) .work-button::after {
  opacity: 0.8;
}

.caption {
  position: absolute;
  top: 66.6667%;
  left: 0;
  width: 100%;
  display: none;
  font-size: 13px;
  font-style: italic;
  line-height: 1.28;
  letter-spacing: 0;
}

.work-item.is-active .caption {
  display: block;
}

.footer-logo {
  left: 4.1667%;
  top: 91.1182%;
}

.footer-note,
.footer-links {
  position: absolute;
  top: 91.07%;
  font-family: "Terza Editor", "Courier New", monospace;
  font-size: 13px;
  line-height: 1.38;
  letter-spacing: 0.04em;
}

.footer-note {
  left: 35.5556%;
  width: 28.958%;
}

.footer-links {
  left: 66.875%;
  width: 28.958%;
}

.footer-links a {
  display: block;
  width: fit-content;
  text-decoration: none;
}

@media (min-width: 769px) {
  .footer-logo {
    top: 93.2%;
  }

  .footer-note,
  .footer-links {
    top: 93.15%;
  }
}

@media (min-width: 1025px) {
  .artboard {
    aspect-ratio: auto;
    height: 2260px;
  }

  .caption {
    top: calc(66.6667% + clamp(0px, calc((100vw - 1024px) * 0.25), 30px));
  }
}

@media (min-width: 1024px) {
  .footer-logo {
    top: 94.7%;
  }

  .footer-note,
  .footer-links {
    top: 94.65%;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .artboard {
    --narrow-desktop-shift: clamp(0px, calc((990px - 100vw) * 0.75), 166px);
    aspect-ratio: auto;
    height: calc(165.14vw + var(--narrow-desktop-shift) + 539px);
  }

  .work-item {
    height: 38.83vw;
  }

  .work-01,
  .work-02,
  .work-03 {
    top: calc(43vw + var(--narrow-desktop-shift));
  }

  .work-04,
  .work-05,
  .work-06 {
    top: calc(83.72vw + var(--narrow-desktop-shift));
  }

  .work-07,
  .work-08,
  .work-09 {
    top: calc(124.43vw + var(--narrow-desktop-shift));
  }

  .work-10,
  .work-11,
  .work-12 {
    top: calc(165.14vw + var(--narrow-desktop-shift));
  }

  .footer-logo {
    top: calc(165.14vw + var(--narrow-desktop-shift) + 386px);
  }

  .footer-note,
  .footer-links {
    top: calc(165.14vw + var(--narrow-desktop-shift) + 386px);
  }
}

@media (max-width: 768px) {
  body {
    padding: 0;
  }

  .stage {
    max-width: none;
  }

  .artboard {
    position: relative;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: start;
    column-gap: 16px;
    row-gap: 10px;
    aspect-ratio: auto;
    min-height: 0;
    padding: 161px 4.1667vw 120px;
  }

  .intro,
  .footer-note,
  .footer-links {
    position: static;
  }

  .site-logo {
    width: 30px;
  }

  .top-logo {
    position: absolute;
    left: 4.1667vw;
    top: 64px;
  }

  .intro {
    grid-column: span 3;
    width: auto;
  }

  .portfolio {
    display: contents;
  }

  .work-item {
    position: relative;
    left: auto;
    top: auto;
    grid-column: span 3;
    width: auto;
    height: clamp(330px, 62vw, 450px);
    aspect-ratio: auto;
    min-height: 0;
  }

  .work-01,
  .work-02 {
    margin-top: clamp(48px, 10vw, 96px);
  }

  .work-button {
    width: min(var(--img-w), 100%);
    margin: 0;
  }

  .work-02 .work-button {
    width: 70%;
  }

  .work-04 .work-button {
    width: 92%;
  }

  .work-11 .work-button {
    width: 90%;
  }

  .caption {
    position: absolute;
    top: 66%;
    left: 0;
    width: 100%;
    margin-top: 0;
  }

  .footer-logo,
  .footer-note,
  .footer-links {
    align-self: start;
  }

  .footer-logo {
    position: static;
    grid-column: 1 / span 3;
    grid-row: auto;
    justify-self: start;
    align-self: start;
  }

  .footer-note,
  .footer-links {
    grid-column: 4 / span 3;
    width: auto;
  }
}

@media (max-width: 520px) {
  :root {
    --ease: 300ms ease;
  }

  body {
    padding: 0;
    transition-duration: 300ms;
  }

  .artboard {
    display: block;
    padding: 154px 15px 80px;
  }

  .top-logo {
    left: 15px;
    top: 64px;
  }

  .intro {
    display: none;
  }

  .mobile-intro {
    display: block;
    width: calc(100% - 76px);
    margin-left: 76px;
    margin-bottom: 92px;
    font-size: 16px;
    line-height: 1.42;
  }

  .mobile-intro p + p {
    margin-top: 1.2em;
  }

  .mobile-intro-full p:first-child {
    margin-top: 1.2em;
  }

  .portfolio {
    display: block;
  }

  .work-item {
    display: block;
    width: 100%;
    height: auto;
    min-height: var(--mobile-item-height, auto);
    margin: 0 0 var(--mobile-block-gap, 360px);
  }

  .work-item:last-of-type {
    margin-bottom: 126px;
  }

  .work-05 {
    margin-bottom: var(--mobile-block-gap, 120px);
  }

  .work-sticky {
    position: sticky;
    top: var(--mobile-sticky-top, 20vh);
    z-index: 1;
  }

  .work-01 .work-sticky {
    position: static;
  }

  .work-item.is-active .work-sticky {
    z-index: 2;
  }

  .work-01,
  .work-02 {
    margin-top: 0;
  }

  .work-button {
    width: min(var(--mobile-img-w, var(--img-w)), 100%);
    max-width: none;
  }

  .work-item:not(.work-01) .work-button {
    width: 100%;
  }

  .work-01 .work-button {
    width: 76%;
    margin-left: auto;
    margin-right: auto;
  }

  body.is-active .work-item:not(.is-active) .work-button::after {
    opacity: 0.8;
  }

  .caption {
    position: static;
    display: block;
    visibility: hidden;
    opacity: 0;
    width: 100%;
    margin-top: 30px;
    color: var(--caption-fg, var(--fg));
    font-size: 16px;
    line-height: 1.42;
    transform: translateY(var(--mobile-caption-y, 12px));
    transition: opacity var(--ease), transform 520ms ease-in, visibility 0s linear 300ms;
  }

  .work-item.is-active .caption {
    visibility: visible;
    opacity: var(--mobile-caption-opacity, 0);
    transition-delay: 0s;
  }

  .footer-logo,
  .footer-note,
  .footer-links {
    position: static;
    display: block;
  }

  .footer-logo {
    float: none;
    width: 30px;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
  }

  .footer-note,
  .footer-links {
    width: auto;
    margin-left: 0;
    font-size: 16px;
    line-height: 1.42;
  }

  .footer-logo {
    display: inline-block;
  }

  .footer-note {
    margin-bottom: 36px;
  }

  .footer-logo {
    margin-top: 120px;
  }

  .footer-note {
    margin-top: 100px;
  }

  .footer-logo {
    vertical-align: top;
  }

  .footer-note,
  .footer-links {
    display: inline-block;
    width: calc(100% - 76px);
    margin-left: 76px;
    vertical-align: top;
  }

  .footer-links {
    display: block;
    margin-left: 76px;
  }

  .footer-links::after {
    display: table;
    clear: both;
    content: "";
  }
}