@font-face {
  font-family: "Even Mono";
  src: url("fonts/EvenMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "CoFo Sans Mono Trial";
  src: url("fonts/cofosansmonovf-Trial.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "CoFo Sans";
  src: url("fonts/CoFoSans-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  --paper: #fff;
  --grey: #d0d0d0;
  --ink: #1a1712;
  --terracotta: #794022;
  --side: 4.6875vw;
  --text: clamp(1rem, 1.041667vw, 1.5rem);
  --mono: "Even Mono", monospace;
  --nav-mono: "CoFo Sans Mono Trial", monospace;
  --sans: "CoFo Sans", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  color: #000;
  font-family: var(--sans);
  font-size: var(--text);
  font-weight: 400;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a, button { color: inherit; }
button { font: inherit; }
.mono { font-family: var(--mono); font-weight: 400; letter-spacing: 0; text-transform: uppercase; }
a:focus-visible, button:focus-visible { outline: 2px solid currentColor; outline-offset: 6px; }
.skip-link { position: fixed; top: 1rem; left: 50%; transform: translate(-50%, -200%); z-index: 101; padding: .75rem 1rem; background: var(--paper); color: #000; }
.skip-link:focus { transform: translateX(-50%); }

.corner-nav { position: fixed; inset: 0; z-index: 100; pointer-events: none; color: #fff; mix-blend-mode: difference; }
.corner-link, .language-button {
  position: absolute;
  pointer-events: auto;
  font-family: var(--nav-mono);
  font-size: 1.0625rem;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
}
.corner-link { transition: opacity 180ms ease; }
.corner-link::before { content: ""; position: absolute; inset: -.75rem -.35rem; }
.corner-link:hover { opacity: .6; }
.corner-link--works { left: 10px; top: 12px; transform: rotate(30deg); transform-origin: top left; }
.corner-link--contacts { right: 10px; top: 12px; transform: rotate(-30deg); transform-origin: top right; }
.corner-link--about { left: 10px; bottom: 12px; transform: rotate(-30deg); transform-origin: bottom left; }
.language-button { right: 10px; bottom: 10px; width: 44px; height: 44px; padding: 0; border: 1px solid currentColor; border-radius: 50%; background: transparent; cursor: pointer; transform: rotate(30deg); }
.language-button:hover { background: #fff; color: #000; }

.hero { position: relative; height: 56.25vw; min-height: 40rem; background: var(--paper); }
.hero__title, .hero__description, .hero__meta { position: absolute; margin: 0; font-size: var(--text); font-weight: 400; }
.hero__title { top: 2.083333vw; left: 50.06215%; line-height: 1; }
.hero__description { top: 2.083333vw; left: 72.726%; width: 22.606%; }
.hero__mark { position: absolute; top: 49.537%; left: 50.044%; width: 22.65625%; height: 31.8454%; object-fit: contain; transform: translate(-50%, -50%); }
.hero__meta { bottom: 3.7037%; color: rgb(0 0 0 / 50%); line-height: 1.25; }
.hero__meta--place { left: 50.0183%; display: flex; flex-direction: column; width: 22.7%; }
.hero__meta--discipline { left: 72.726%; }
.hero__meta--year { right: 5.6055%; text-align: right; }

.facade { position: relative; height: 56.25vw; min-height: 36rem; overflow: hidden; background: var(--grey); }
.facade__description { position: absolute; z-index: 4; top: 5.1971%; left: 72.726%; width: 22.606%; margin: 0; }
.facade__drawing { position: absolute; inset: 0; }
.facade__base { position: absolute; left: 4.7046%; top: 10.9136%; width: 90.6274%; height: 98.1967%; object-fit: fill; }
.facade__logo { position: absolute; z-index: 3; top: 39.5258%; width: 19.5483%; height: 27.4911%; object-fit: contain; }
.facade__logo--left { left: 7.1964%; }
.facade__logo--right { left: 73.8216%; top: 39.537%; width: 19.7917%; height: 27.5%; }
.facade__line { position: absolute; z-index: 2; left: 4.7046%; width: 90.6274%; height: 1px; background: rgb(255 255 255 / 68%); }
.facade__line--one { top: 39.5607%; }
.facade__line--two { top: 57.7438%; }
.facade__line--three { top: 58.3234%; }
.facade__line--four { top: 67.0573%; }

.books { position: relative; height: 51.25vw; background: var(--ink); color: var(--grey); }
.books__item { position: absolute; margin: 0; }
.books__item--brown { top: 23.0461%; left: 16.1458%; width: 20.5916%; height: 63.1581%; }
.books__item--white { top: 22.7142%; left: 63.125%; width: 20.8333%; height: 63.8217%; }
.books__item img { width: 100%; height: 100%; object-fit: contain; }

.presentation { position: relative; padding: 3.689375vw var(--side) 4.0625vw; background: var(--ink); color: var(--grey); }
.presentation__eyebrow { margin: 0 0 4.937969vw; text-align: center; font-size: var(--text); line-height: 1; }
.presentation__overlap { position: relative; width: 100%; aspect-ratio: 1740 / 869.755; margin-bottom: 12.348177vw; }
.presentation__sheet { position: absolute; object-fit: contain; }
.presentation__sheet--back { top: 11.0672%; right: 0; width: 79.0291%; height: 88.9327%; z-index: 1; }
.presentation__sheet--front { top: 0; left: 0; width: 74.993%; height: 84.3908%; z-index: 2; }
.presentation__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; row-gap: 1px; width: 100%; }
.presentation__grid img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: contain; }
.presentation__grid .presentation__wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.presentation__button { display: table; max-width: 100%; margin: 4.3505vw auto 0; padding: .9em 1em; border: 1px solid var(--grey); border-radius: 999px; font-size: var(--text); line-height: 1; text-decoration: none; text-align: center; transition: background-color 180ms ease, color 180ms ease; }
.presentation__button:hover { background: var(--grey); color: var(--ink); }

.stationery { position: relative; aspect-ratio: 1920 / 1197; background: var(--ink); }
.stationery img { position: absolute; left: 0; top: 7.0081%; width: 100%; height: 90.2256%; object-fit: contain; }
.project-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; column-gap: 15.104167vw; min-height: 14.0625vw; padding: 3rem 19.79%; background: var(--paper); }
.project-nav__link { display: flex; flex-direction: column; width: fit-content; text-decoration: none; font-size: var(--text); line-height: 1.25; }
.project-nav__link--previous { justify-self: end; text-align: right; }
.project-nav__link span { color: rgb(0 0 0 / 50%); }
.project-nav__link strong { font-weight: 400; }
.project-nav__link:hover strong { text-decoration: underline; text-underline-offset: .2em; }

.reveal { opacity: 1; }
.will-reveal { opacity: 0; transform: translateY(18px); transition: opacity 700ms cubic-bezier(.22, 1, .36, 1), transform 700ms cubic-bezier(.22, 1, .36, 1); }
.will-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 900px) {
  :root { --side: 1.5rem; --text: 1rem; }
  .corner-link, .language-button { font-size: .875rem; }
  .hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto auto; column-gap: 1rem; row-gap: 1.5rem; min-height: max(48rem, 100svh); height: auto; padding: 5rem var(--side) 4.75rem; }
  .hero__title, .hero__description, .hero__meta, .hero__mark { position: static; width: auto; }
  .hero__title { grid-column: 1 / -1; }
  .hero__description { grid-column: 1 / -1; max-width: 34rem; justify-self: end; }
  .hero__mark { grid-column: 1 / -1; align-self: center; justify-self: center; width: min(58vw, 20rem); height: auto; aspect-ratio: 435 / 344; margin: 2rem 0 2.5rem; transform: none; }
  .hero__meta--place { grid-column: 1; grid-row: 4 / 6; align-self: end; }
  .hero__meta--discipline { grid-column: 2; grid-row: 4; text-align: right; align-self: end; }
  .hero__meta--year { grid-column: 2; grid-row: 5; margin-top: -1.25rem; }
  .facade { height: auto; min-height: 0; padding: 3rem 0 3.5rem; }
  .facade__description { position: static; width: auto; max-width: 34rem; margin: 0 var(--side) 3rem; }
  .facade__drawing { position: relative; inset: auto; width: 100%; aspect-ratio: 1920 / 1080; }
  .books { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12vw; height: auto; padding: 4rem 8vw 5rem; align-items: center; }
  .books__item { position: static; width: 100%; height: auto; aspect-ratio: 400 / 628; }
  .presentation { padding-top: 2.5rem; padding-bottom: 4rem; }
  .presentation__eyebrow { margin-bottom: 3rem; }
  .presentation__overlap { margin-bottom: 4rem; }
  .presentation__grid { grid-template-columns: 1fr; gap: .25rem; }
  .presentation__grid .presentation__wide { grid-column: 1; }
  .presentation__button { margin-top: 3rem; padding: 1.1rem 1.2rem; font-size: .875rem; }
  .stationery { aspect-ratio: 1920 / 1197; }
  .project-nav { padding: 3.5rem var(--side) 6rem; min-height: 13rem; column-gap: 2rem; }
  .project-nav__link { font-size: .875rem; }
}
@media (max-width: 380px) {
  :root { --side: 1.125rem; }
  .project-nav { column-gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .will-reveal { opacity: 1; transform: none; transition: none; }
  a, button { transition: none !important; }
}