@font-face {
  font-family: "Amiri";
  src: url("../fonts/amiri-regular-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Amiri";
  src: url("../fonts/amiri-regular-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Amiri";
  src: url("../fonts/amiri-italic-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: block;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Amiri";
  src: url("../fonts/amiri-italic-latin-ext.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: block;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@view-transition {
  navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.45s;
  animation-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  @view-transition {
    navigation: none;
  }
}
body {
  margin: 0;
  font-family: "Amiri", serif;
  font-weight: 400;
  color: #434343;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
p {
  margin: 0;
  font-weight: 400;
}

em {
  font-style: italic;
}

img {
  display: block;
}

video[autoplay]::-webkit-media-controls {
  display: none !important;
}

video[autoplay]::-webkit-media-controls-overlay-play-button {
  display: none !important;
}

video[autoplay]::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

a {
  color: inherit;
  text-decoration: none;
}
a:focus-visible {
  outline: 1px solid #fd3b3b;
  outline-offset: 4px;
}

body {
  container-type: inline-size;
}

.page {
  position: relative;
  zoom: max(1, tan(atan2(100cqw, 1440px)));
}

.nowrap {
  white-space: nowrap;
}

.site-header {
  position: absolute;
  top: 104px;
  left: 0;
  right: 0;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 96px;
  text-align: right;
  font-size: 30px;
  line-height: normal;
}
@media (max-width: 1199px) {
  .site-header {
    top: 48px;
    padding: 0 48px;
    font-size: 26px;
  }
}
@media (max-width: 640px) {
  .site-header {
    top: 24px;
    padding: 0 24px;
    font-size: 20px;
  }
}
.site-header--split {
  display: flex;
  justify-content: space-between;
}
.site-header--offset {
  padding-right: 84px;
}
@media (max-width: 1199px) {
  .site-header--offset {
    padding-right: 48px;
  }
}
@media (max-width: 640px) {
  .site-header--offset {
    padding-right: 24px;
  }
}
.site-header__back {
  color: #434343;
}
.site-header__link {
  white-space: nowrap;
}
.site-header__accent {
  color: #fd3b3b;
}
.site-header__back, .site-header__link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s ease;
}
.site-header__back:hover, .site-header__link:hover {
  text-decoration-color: currentColor;
}
.site-header__accent {
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s ease;
}
.site-header__link:hover .site-header__accent {
  text-decoration-color: currentColor;
}

.more-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 30px;
  line-height: 30px;
}
@media (max-width: 640px) {
  .more-link {
    font-size: 22px;
    line-height: 24px;
  }
}
.more-link__arrow {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
.more-link__arrow--up img {
  transform: rotate(90deg);
}
.more-link__arrow--down img {
  transform: rotate(90deg) scaleX(-1);
}
.more-link__arrow--next img {
  transform: rotate(180deg);
}
.more-link__label {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s ease;
}
.more-link:hover .more-link__label {
  text-decoration-color: currentColor;
}

.crop {
  position: relative;
  display: block;
  overflow: hidden;
}
.crop img {
  position: absolute;
  max-width: none;
  height: auto;
}
.crop--kitkat {
  aspect-ratio: 931/368;
}
.crop--kitkat img {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: cover;
}
.crop--caartl-signage {
  aspect-ratio: 718/397;
}
.crop--caartl-signage img {
  width: 105.432%;
  left: -5.432%;
  top: -32.96%;
}
.crop--caartl-logo {
  aspect-ratio: 718/169;
}
.crop--caartl-logo img {
  width: 100%;
  left: 0;
  top: -109.08%;
}
.crop--notebook {
  width: 368px;
  max-width: 100%;
  aspect-ratio: 1;
}
.crop--notebook img {
  width: 109.511%;
  left: -9.239%;
  top: -8.74%;
}
.crop--rain {
  width: 292px;
  max-width: 100%;
  aspect-ratio: 1;
}
.crop--rain img {
  width: 191.055%;
  left: -45.548%;
  top: -3.767%;
}
.crop--skyline {
  aspect-ratio: 1248/695;
}
.crop--skyline img {
  width: 103.12%;
  left: -1.53%;
  top: -2.08%;
}
.crop--seafront {
  aspect-ratio: 1248/536;
}
.crop--seafront img {
  width: 100.607%;
  left: -0.06%;
  top: -16.765%;
}
.crop--drawing {
  width: 305px;
  max-width: 100%;
  aspect-ratio: 1;
}
.crop--drawing img {
  width: 117.995%;
  left: -9.033%;
  top: -36.525%;
  transform: rotate(-2.74deg);
}
.crop--perfect-circle {
  aspect-ratio: 626/357;
}
.crop--perfect-circle img {
  width: 113.738%;
  left: -6.869%;
  top: -28.852%;
}
.crop--perfect-scroll {
  width: 597px;
  max-width: 100%;
  aspect-ratio: 597.447/900;
}
.crop--perfect-scroll img {
  width: 171.232%;
  left: -42.804%;
  top: -69.298%;
}
.crop--perfect-scroll::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid #ff5757;
}
.crop--caartl-wordmark {
  aspect-ratio: 751/269;
}
.crop--caartl-wordmark img {
  width: 100.06%;
  left: -0.03%;
  top: -54.81%;
}
.crop--melon-logo {
  aspect-ratio: 742/243;
}
.crop--melon-logo img {
  width: 105.93%;
  left: -2.9%;
  top: -44.59%;
}
.crop--research {
  aspect-ratio: 472/348;
}
.crop--research img {
  width: 159.77%;
  left: -7.638%;
  top: 0;
}
.crop--colour-library {
  aspect-ratio: 665/332;
}
.crop--colour-library img {
  width: 123.72%;
  left: 0;
  top: 0;
}
.crop--design-rationale {
  aspect-ratio: 580/332;
}
.crop--design-rationale img {
  width: 129.68%;
  left: 0;
  top: 0;
}
.crop--caartl-naming {
  aspect-ratio: 1251/551;
}
.crop--caartl-naming img {
  width: 100%;
  left: 0;
  top: -44.49%;
}
.crop--caartl-mark-black, .crop--caartl-mark-white {
  aspect-ratio: 1250/662;
}
.crop--caartl-mark-black img, .crop--caartl-mark-white img {
  width: 100%;
  left: 0;
  top: -20.74%;
}
.crop--caartl-mark-white img {
  top: -20.88%;
}
.crop--caartl-lime {
  aspect-ratio: 610/335;
}
.crop--caartl-lime img {
  width: 100%;
  left: 0;
  top: -18.28%;
}
.crop--caartl-pattern {
  aspect-ratio: 610/335;
}
.crop--caartl-pattern img {
  width: 119.4%;
  left: -11.38%;
  top: -33.92%;
}
.crop--melon-thought {
  aspect-ratio: 1248/227;
}
.crop--melon-thought img {
  width: 114.34%;
  left: -7.17%;
  top: -214.7%;
}
.crop--melon-hero {
  aspect-ratio: 1247/662;
}
.crop--melon-hero img {
  width: 105.35%;
  left: -2.608%;
  top: -11.681%;
}
.crop--melon-grid-1, .crop--melon-grid-2, .crop--melon-grid-3, .crop--melon-grid-4 {
  aspect-ratio: 610/343;
}
.crop--melon-grid-1 img {
  width: 111.534%;
  left: -5.839%;
  top: -12.187%;
}
.crop--melon-grid-2 img {
  width: 101.668%;
  left: -0.828%;
  top: -7.598%;
}
.crop--melon-grid-3 img {
  width: 102.08%;
  left: -2.018%;
  top: 0;
}
.crop--melon-grid-4 img {
  width: 101.92%;
  left: 0.105%;
  top: -5.248%;
}
.crop--mostly-white, .crop--try-again, .crop--how-i-got-you, .crop--eleven-to-seven {
  aspect-ratio: 1;
}
.crop--mostly-white img {
  width: 167.3%;
  left: -57.15%;
  top: -11.08%;
}
.crop--try-again img {
  width: 151.786%;
  left: -51.786%;
  top: -70.714%;
}
.crop--how-i-got-you img {
  width: 100%;
  left: 0;
  top: 0;
}
.crop--eleven-to-seven img {
  width: 134.553%;
  left: -17.5%;
  top: -71.071%;
}

.landing {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 900px;
  height: min(900px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))));
  min-height: 640px;
}
@media (max-width: 1199px) {
  .landing {
    display: block;
    height: auto;
    min-height: 0;
  }
}
.landing__inner {
  display: grid;
  grid-template-columns: 649px 1fr;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 96px 82px;
}
@media (max-width: 1199px) {
  .landing__inner {
    grid-template-columns: minmax(0, 1fr);
    padding: 220px 48px 160px;
  }
}
@media (max-width: 640px) {
  .landing__inner {
    padding: 140px 24px 24px;
  }
}
.landing__title {
  grid-area: 1/1/2/3;
  font-size: 110.75px;
  line-height: 110.75px;
  white-space: nowrap;
}
@media (max-width: 1199px) {
  .landing__title {
    grid-area: auto;
    font-size: 80px;
    line-height: 80px;
  }
}
@media (max-width: 640px) {
  .landing__title {
    font-size: 44px;
    line-height: 46px;
    white-space: normal;
  }
}
.landing__note {
  grid-area: 1/2;
  width: 242px;
  margin-top: 233px;
  font-size: 26px;
  line-height: 26px;
  color: #fd3b3b;
}
@media (max-width: 1199px) {
  .landing__note {
    grid-area: auto;
    margin-top: 32px;
  }
}
@media (max-width: 640px) {
  .landing__note {
    width: auto;
    font-size: 20px;
    line-height: 22px;
  }
}

@media (max-width: 640px) {
  .project + .project::before {
    content: "";
    display: block;
    margin: 16px 24px;
    border-top: 0.5px solid #b9b9b9;
  }
}
@media (max-width: 640px) {
  .project + .project--shot::before {
    margin-bottom: 40px;
  }
}
.project__inner {
  max-width: 1440px;
  margin: 0 auto;
  padding-left: 96px;
  padding-right: 96px;
}
@media (max-width: 1199px) {
  .project__inner {
    padding: 80px 48px;
  }
}
@media (max-width: 640px) {
  .project__inner {
    padding: 24px 24px;
  }
}
.project__title {
  font-size: 36px;
  line-height: 36px;
}
@media (max-width: 640px) {
  .project__title {
    font-size: 28px;
    line-height: 30px;
  }
}
.project__caption {
  font-size: 22px;
  line-height: 22px;
}
@media (max-width: 640px) {
  .project__caption {
    font-size: 18px;
    line-height: 20px;
  }
}
.project__aside {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.project__media--perfect {
  display: block;
  aspect-ratio: 718/451;
  overflow: hidden;
}
.project__media--perfect img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.project--perfect .project__inner {
  display: grid;
  grid-template-columns: minmax(0, 718fr) minmax(0, 501fr);
  column-gap: 29px;
  padding-top: clamp(40px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) * 0.08, 72px);
  padding-bottom: clamp(40px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) * 0.08, 72px);
}
@media (max-width: 1199px) {
  .project--perfect .project__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 640px) {
  .project--perfect .project__inner {
    row-gap: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
}
@media (max-width: 1199px) {
  .project--perfect .project__aside {
    order: -1;
  }
}
@media (max-width: 640px) {
  .project--perfect .project__aside {
    order: 0;
  }
}
.project--perfect .project__media {
  margin-top: clamp(96px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) - 680px, 253px);
}
@media (max-width: 1199px) {
  .project--perfect .project__media {
    width: 718px;
    max-width: 100%;
    margin-top: 0;
  }
}
.project--perfect .project__text {
  padding-left: 77px;
}
@media (max-width: 1199px) {
  .project--perfect .project__text {
    padding-left: 0;
  }
}
.project--perfect .project__title {
  max-width: 293px;
}
.project--perfect .project__caption {
  max-width: 349px;
  margin-top: 49px;
}
@media (max-width: 640px) {
  .project--perfect .project__caption {
    margin-top: 24px;
  }
}
.project--perfect .more-link {
  margin-top: auto;
}
@media (max-width: 1199px) {
  .project--perfect .more-link {
    margin-top: 40px;
  }
}
@media (max-width: 640px) {
  .project--perfect .more-link {
    margin-top: 24px;
  }
}
@media (max-width: 1199px) {
  .project--perfect .more-link__arrow img {
    transform: rotate(-90deg);
  }
}
@media (max-width: 640px) {
  .project--perfect .more-link__arrow img {
    transform: rotate(90deg);
  }
}

.project--kitkat .project__inner {
  display: flex;
  flex-direction: column;
  padding-top: clamp(40px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) * 0.08, 72px);
  padding-bottom: clamp(40px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) * 0.08, 72px);
}
@media (max-width: 1199px) {
  .project--kitkat .project__inner {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 640px) {
  .project--kitkat .project__inner {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}
.project--kitkat .project__title {
  max-width: 546px;
}
.project--kitkat .project__caption {
  max-width: 406px;
  margin-top: 38px;
}
@media (max-width: 640px) {
  .project--kitkat .project__caption {
    margin-top: 24px;
  }
}
.project--kitkat .more-link {
  align-self: flex-end;
  margin-top: clamp(24px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) - 820px, 62px);
}
@media (max-width: 1199px) {
  .project--kitkat .more-link {
    margin-top: 48px;
  }
}
@media (max-width: 640px) {
  .project--kitkat .more-link {
    align-self: flex-start;
    margin-top: 24px;
  }
}
.project--kitkat .crop--kitkat {
  align-self: flex-end;
  width: 931px;
  max-width: 100%;
  margin-top: 33px;
}
@media (max-width: 1199px) {
  .project--kitkat .crop--kitkat {
    margin-top: 24px;
  }
}
@media (max-width: 640px) {
  .project--kitkat .crop--kitkat {
    order: -1;
    align-self: stretch;
    margin-top: 0;
    margin-bottom: 8px;
  }
}
@media (max-width: 640px) {
  .project--kitkat .more-link__arrow--down img {
    transform: rotate(90deg);
  }
}

.project--shot .project__photo {
  display: block;
  width: 100%;
  aspect-ratio: 1440/811;
  max-height: max(320px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) - 136px - clamp(40px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) * 0.08, 72px));
  overflow: hidden;
  background: #d9d9d9;
}
.project--shot .project__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
}
.project--shot .project__inner {
  display: flex;
  flex-direction: column;
  padding-top: 46px;
  padding-bottom: clamp(40px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) * 0.08, 72px);
}
@media (max-width: 1199px) {
  .project--shot .project__inner {
    padding-top: 40px;
    padding-bottom: 80px;
  }
}
@media (max-width: 640px) {
  .project--shot .project__inner {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}
.project--shot .more-link {
  align-self: flex-end;
}
@media (max-width: 640px) {
  .project--shot .more-link {
    align-self: flex-start;
  }
}
.project--shot .project__caption {
  margin-top: 10px;
}
@media (max-width: 640px) {
  .project--shot .project__caption {
    margin-top: 16px;
  }
}

.project--canvas .project__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: clamp(40px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) * 0.08, 72px) 136px;
}
@media (max-width: 1199px) {
  .project--canvas .project__inner {
    padding: 80px 48px;
  }
}
@media (max-width: 640px) {
  .project--canvas .project__inner {
    padding: 24px 24px;
  }
}
.project--canvas .project__caption--intro {
  max-width: 520px;
}
.project--canvas .more-link {
  margin-top: clamp(40px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) / 2 - 340px, 102px);
}
@media (max-width: 1199px) {
  .project--canvas .more-link {
    margin-top: 64px;
  }
}
@media (max-width: 640px) {
  .project--canvas .more-link {
    margin-top: 24px;
  }
}

.canvas-quote {
  display: block;
  margin-top: clamp(40px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) / 2 - 340px, 102px);
}
@media (max-width: 1199px) {
  .canvas-quote {
    margin-top: 64px;
  }
}
@media (max-width: 640px) {
  .canvas-quote {
    margin-top: 28px;
  }
}
.canvas-quote__text {
  font-size: 64px;
  line-height: 64px;
  text-transform: lowercase;
}
@media (max-width: 1199px) {
  .canvas-quote__text {
    font-size: 48px;
    line-height: 50px;
  }
}
@media (max-width: 640px) {
  .canvas-quote__text {
    font-size: 30px;
    line-height: 34px;
  }
}

.project--caartl .project__inner {
  display: grid;
  grid-template-columns: minmax(0, 718fr) minmax(0, 468fr);
  column-gap: 62px;
  padding-top: clamp(40px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) * 0.08, 72px);
  padding-bottom: clamp(40px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) * 0.08, 72px);
}
@media (max-width: 1199px) {
  .project--caartl .project__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 48px;
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
@media (max-width: 640px) {
  .project--caartl .project__inner {
    row-gap: 24px;
    padding-top: 24px;
    padding-bottom: 24px;
  }
}
@media (max-width: 1199px) {
  .project--caartl .project__aside {
    order: -1;
  }
}
@media (max-width: 640px) {
  .project--caartl .project__aside {
    order: 0;
  }
}
.project--caartl .project__gallery {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: clamp(48px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) - 760px, 158px);
}
@media (max-width: 1199px) {
  .project--caartl .project__gallery {
    width: 718px;
    max-width: 100%;
    margin-top: 0;
  }
}
.project--caartl .project__text {
  padding-left: 44px;
}
@media (max-width: 1199px) {
  .project--caartl .project__text {
    padding-left: 0;
  }
}
.project--caartl .project__title {
  max-width: 281px;
}
.project--caartl .project__caption {
  max-width: 349px;
  margin-top: 65px;
}
@media (max-width: 640px) {
  .project--caartl .project__caption {
    margin-top: 24px;
  }
}
.project--caartl .more-link {
  margin-top: auto;
}
@media (max-width: 1199px) {
  .project--caartl .more-link {
    margin-top: 40px;
  }
}
@media (max-width: 640px) {
  .project--caartl .more-link {
    margin-top: 24px;
  }
}
@media (max-width: 1199px) {
  .project--caartl .more-link__arrow img {
    transform: rotate(-90deg);
  }
}
@media (max-width: 640px) {
  .project--caartl .more-link__arrow img {
    transform: rotate(90deg);
  }
}

.project--poem .project__inner {
  display: grid;
  grid-template-columns: minmax(0, 668fr) minmax(0, 474fr);
  padding: clamp(40px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) * 0.08, 72px) 96px clamp(40px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) * 0.08, 72px) 202px;
}
@media (max-width: 1199px) {
  .project--poem .project__inner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 64px;
    padding: 80px 48px;
  }
}
@media (max-width: 640px) {
  .project--poem .project__inner {
    row-gap: 32px;
    padding: 24px 24px;
  }
}
.project--poem .project__caption {
  max-width: 406px;
}
@media (max-width: 640px) {
  .project--poem .poem-media {
    order: -1;
  }
}

.poem {
  margin-top: clamp(48px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) - 690px, 234px);
}
@media (max-width: 1199px) {
  .poem {
    margin-top: 0;
  }
}
.poem__text {
  max-width: 373px;
  margin-top: 64px;
  font-size: 36px;
  line-height: 36px;
}
@media (max-width: 640px) {
  .poem__text {
    margin-top: 28px;
    font-size: 26px;
    line-height: 30px;
  }
}
.poem__credit {
  margin-top: 68px;
  font-size: 22px;
  line-height: 20px;
}
@media (max-width: 640px) {
  .poem__credit {
    margin-top: 28px;
    font-size: 18px;
  }
}

.poem-media {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.poem-media .more-link {
  margin-top: 15px;
}

.contact {
  max-width: 1440px;
  margin: 0 auto;
  padding: 70px 96px clamp(40px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) * 0.08, 72px);
  text-align: center;
}
@media (max-width: 1199px) {
  .contact {
    padding: 80px 48px;
  }
}
@media (max-width: 640px) {
  .contact {
    padding: 40px 24px 24px;
  }
}
.contact__title {
  max-width: 373px;
  margin: 0 auto;
  font-size: 36px;
  line-height: 36px;
}
@media (max-width: 640px) {
  .contact__title {
    font-size: 28px;
    line-height: 30px;
  }
}
.contact__details {
  max-width: 641px;
  margin: clamp(40px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) - 800px, 132px) auto 0;
  font-size: 28px;
  line-height: 28px;
}
@media (max-width: 1199px) {
  .contact__details {
    margin-top: 96px;
  }
}
@media (max-width: 640px) {
  .contact__details {
    margin-top: 40px;
    font-size: 20px;
    line-height: 26px;
  }
}
.contact__details a,
.contact__details .contact__divider {
  color: #fd3b3b;
}
.contact__details .contact__links {
  white-space: nowrap;
}
.contact__details a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.organised {
  position: relative;
  width: 430px;
  max-width: 100%;
  aspect-ratio: 430/440.8;
  margin: clamp(40px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) - 750px, 75px) auto 0;
}
@media (max-width: 640px) {
  .organised {
    margin-top: 40px;
  }
}
.organised__card {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 41.773%;
  aspect-ratio: 1;
  border: 1px solid #fd3b3b;
  color: #fd3b3b;
  transition: background-color 0.2s ease;
}
.organised__card:hover {
  background-color: rgba(253, 59, 59, 0.06);
}
.organised__card--eye {
  left: 30.891%;
  top: 5.768%;
  transform: rotate(20.13deg);
}
.organised__card--brain {
  left: 52.518%;
  top: 53.68%;
  transform: rotate(-19.21deg);
}
.organised__card--questions {
  left: 0.539%;
  top: 48.72%;
  transform: rotate(1.5deg);
}
.organised__label {
  font-size: 27.832px;
  line-height: 25.049px;
  text-align: center;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .organised__label {
    font-size: 21px;
    line-height: 19px;
  }
}
.organised__label em {
  font-size: 25.049px;
}
@media (max-width: 640px) {
  .organised__label em {
    font-size: 19px;
  }
}
.organised__word--questions {
  font-size: 27.136px;
}
@media (max-width: 640px) {
  .organised__word--questions {
    font-size: 20.5px;
  }
}

.about {
  max-width: 1440px;
  margin: 0 auto;
  padding: 392px 96px 0;
  padding-top: clamp(180px, calc(100svh / max(1, tan(atan2(100cqw, 1440px)))) - 418px, 392px);
}
@media (max-width: 1199px) {
  .about {
    padding: 220px 48px 0;
  }
}
@media (max-width: 640px) {
  .about {
    padding: 140px 24px 0;
  }
}
.about__title {
  font-size: 36px;
  line-height: 36px;
}
@media (max-width: 640px) {
  .about__title {
    font-size: 28px;
    line-height: 30px;
  }
}
.about__intro {
  margin-top: 84px;
  font-size: 30px;
  line-height: 36px;
}
@media (max-width: 1199px) {
  .about__intro {
    margin-top: 64px;
  }
}
@media (max-width: 640px) {
  .about__intro {
    margin-top: 32px;
    font-size: 20px;
    line-height: 26px;
  }
}
.about__contact {
  margin-top: 138px;
  margin-bottom: 34px;
  text-align: center;
}
@media (max-width: 1199px) {
  .about__contact {
    margin-top: 96px;
  }
}
@media (max-width: 640px) {
  .about__contact {
    margin-top: 40px;
    margin-bottom: 24px;
  }
}

.about-row {
  display: grid;
  grid-template-columns: 636px minmax(0, 1fr);
  font-size: 30px;
  line-height: 36px;
}
@media (max-width: 1199px) {
  .about-row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 16px;
  }
}
@media (max-width: 640px) {
  .about-row {
    font-size: 20px;
    line-height: 26px;
  }
}
.about-row--education {
  margin-top: 84px;
}
@media (max-width: 1199px) {
  .about-row--education {
    margin-top: 64px;
  }
}
@media (max-width: 640px) {
  .about-row--education {
    margin-top: 32px;
  }
}
.about-row--experience, .about-row--tools {
  margin-top: 80px;
}
@media (max-width: 1199px) {
  .about-row--experience, .about-row--tools {
    margin-top: 64px;
  }
}
@media (max-width: 640px) {
  .about-row--experience, .about-row--tools {
    margin-top: 32px;
  }
}
.about-row--skills {
  margin-top: 116px;
}
@media (max-width: 1199px) {
  .about-row--skills {
    margin-top: 64px;
  }
}
@media (max-width: 640px) {
  .about-row--skills {
    margin-top: 32px;
  }
}
.about-row__label {
  font-size: inherit;
  line-height: inherit;
}
.about-row__value p + p {
  margin-top: 36px;
}
@media (max-width: 640px) {
  .about-row__value p + p {
    margin-top: 26px;
  }
}
@media (max-width: 640px) {
  .about-row--skills .about-row__value {
    display: contents;
  }
}
@media (max-width: 640px) {
  .about-row--skills .artwork {
    order: -1;
    margin: 0 0 8px;
  }
}
.about-row--tools .about-row__value {
  margin-left: -15px;
}
@media (max-width: 1199px) {
  .about-row--tools .about-row__value {
    margin-left: 0;
  }
}
.about-row__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.artwork {
  margin: 23px 0 0;
}
.artwork__caption {
  margin-top: 6px;
  margin-left: -2px;
  font-size: 20px;
  line-height: 20px;
}
@media (max-width: 640px) {
  .artwork__caption {
    margin-left: 0;
    font-size: 16px;
    line-height: 18px;
  }
}

.photo {
  display: block;
  overflow: hidden;
}
.photo img,
.photo video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.photo--supertrees {
  width: calc(100% - 4px);
  margin-left: 4px;
  aspect-ratio: 620/826;
}
@media (max-width: 1199px) {
  .photo--supertrees {
    width: 620px;
    max-width: 100%;
    margin-left: 0;
  }
}
.photo--scooter {
  width: 768px;
  max-width: 100%;
  aspect-ratio: 768/512;
}
.photo--shopfront {
  width: 603px;
  max-width: 100%;
  aspect-ratio: 603/402;
}
.photo--mannequin {
  width: 1242px;
  max-width: 100%;
  aspect-ratio: 1242/828;
}
.photo--perfect-fonts, .photo--perfect-banana {
  aspect-ratio: 626/405;
}
.photo--kitkat-screen {
  aspect-ratio: 751/424;
  position: relative;
}
.photo--caartl-signage {
  aspect-ratio: 751/560;
}
.photo--melon-salon {
  aspect-ratio: 742/452;
}
.photo--caartl-palette {
  aspect-ratio: 610/335;
}
.photo--caartl-type {
  aspect-ratio: 610/338;
}
.photo--caartl-tall {
  aspect-ratio: 610/457;
}
.photo--melon-mark {
  max-width: 1245px;
  aspect-ratio: 1245/781;
}

.gallery {
  max-width: 1440px;
  margin: 0 auto;
  padding: 230px 96px 0;
}
@media (max-width: 1199px) {
  .gallery {
    padding: 160px 48px 0;
  }
}
@media (max-width: 640px) {
  .gallery {
    padding: 112px 24px 0;
  }
}
.gallery__intro {
  font-size: 22px;
  line-height: 22px;
}
@media (max-width: 640px) {
  .gallery__intro {
    font-size: 18px;
    line-height: 20px;
  }
}
.gallery__rule {
  height: 0;
  margin: 0 0 72px;
  border: 0;
  border-top: 1px solid #434343;
}
@media (max-width: 1199px) {
  .gallery__rule {
    margin: 64px 0;
  }
}
@media (max-width: 640px) {
  .gallery__rule {
    margin: 32px 0;
  }
}
.gallery__rule--first {
  margin-top: 69px;
}
@media (max-width: 1199px) {
  .gallery__rule--first {
    margin-top: 64px;
  }
}
@media (max-width: 640px) {
  .gallery__rule--first {
    margin-top: 32px;
  }
}
.gallery__rule--second {
  margin-top: 71px;
}
@media (max-width: 1199px) {
  .gallery__rule--second {
    margin-top: 64px;
  }
}
@media (max-width: 640px) {
  .gallery__rule--second {
    margin-top: 32px;
  }
}
.gallery__rule--work {
  margin: 140px 0 196px;
}
@media (max-width: 1199px) {
  .gallery__rule--work {
    margin: 96px 0;
  }
}
@media (max-width: 640px) {
  .gallery__rule--work {
    margin: 40px 0;
  }
}
.gallery__rule--short {
  margin-bottom: 124px;
}
@media (max-width: 1199px) {
  .gallery__rule--short {
    margin-bottom: 96px;
  }
}
@media (max-width: 640px) {
  .gallery__rule--short {
    margin-bottom: 40px;
  }
}
.gallery__outro {
  margin-top: 115px;
  margin-bottom: 43px;
  text-align: center;
}
@media (max-width: 1199px) {
  .gallery__outro {
    margin-top: 96px;
  }
}
@media (max-width: 640px) {
  .gallery__outro {
    margin-top: 40px;
    margin-bottom: 24px;
  }
}
.gallery__dead-end {
  margin-top: 28px;
}
@media (max-width: 640px) {
  .gallery__dead-end {
    margin-top: 26px;
  }
}
.gallery__outro--album {
  margin-top: 112.7px;
  margin-bottom: 50px;
}
@media (max-width: 1199px) {
  .gallery__outro--album {
    margin-top: 96px;
  }
}
@media (max-width: 640px) {
  .gallery__outro--album {
    margin-top: 40px;
    margin-bottom: 24px;
  }
}
.gallery__outro--work {
  max-width: 720px;
  margin-top: 196px;
  margin-bottom: 50px;
}
@media (max-width: 1199px) {
  .gallery__outro--work {
    margin-top: 96px;
  }
}
@media (max-width: 640px) {
  .gallery__outro--work {
    margin-top: 40px;
    margin-bottom: 24px;
  }
}

.album {
  margin-top: 139px;
}
@media (max-width: 1199px) {
  .album {
    margin-top: 96px;
  }
}
@media (max-width: 640px) {
  .album {
    margin-top: 40px;
  }
}
.album__title {
  font-size: 36px;
  line-height: 36px;
}
@media (max-width: 640px) {
  .album__title {
    font-size: 28px;
    line-height: 30px;
  }
}
.album__subtitle {
  margin-top: 6px;
  font-size: 22px;
  line-height: 22px;
}
@media (max-width: 640px) {
  .album__subtitle {
    font-size: 18px;
    line-height: 20px;
  }
}
.album__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 19px;
  margin: 47px 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 640px) {
  .album__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
  }
}
.album__item {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  background: #d9d9d9;
}
.album__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.album__item:hover img {
  transform: scale(1.03);
}

.lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  background: #fff;
  color: #434343;
}
.lightbox[open] {
  display: block;
}
.lightbox:focus {
  outline: none;
}
.lightbox::backdrop {
  background: #fff;
}
.lightbox__close {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(208, 208, 208, 0.9);
  color: #434343;
  cursor: pointer;
  transition: background 0.2s ease;
}
@media (max-width: 640px) {
  .lightbox__close {
    top: 8px;
    right: 8px;
    width: 38px;
    height: 38px;
  }
}
.lightbox__close:hover {
  background: rgba(184, 184, 184, 0.95);
}
.lightbox__close:focus, .lightbox__close:focus-visible {
  outline: none;
}
.lightbox__figure {
  position: absolute;
  top: 54px;
  right: 60px;
  bottom: 28px;
  left: 60px;
  margin: 0;
  overflow: hidden;
}
@media (max-width: 640px) {
  .lightbox__figure {
    top: 32px;
    right: 40px;
    bottom: 24px;
    left: 40px;
  }
}
.lightbox__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}
.lightbox__figure--fill img {
  object-fit: cover;
}
.lightbox--album .lightbox__figure {
  top: 96px;
  right: 160px;
  bottom: 80px;
  left: 160px;
}
@media (max-width: 1199px) {
  .lightbox--album .lightbox__figure {
    top: 80px;
    right: 80px;
    bottom: 64px;
    left: 80px;
  }
}
@media (max-width: 640px) {
  .lightbox--album .lightbox__figure {
    top: 56px;
    right: 44px;
    bottom: 40px;
    left: 44px;
  }
}
.lightbox--album .lightbox__figure img {
  object-fit: contain;
}
.lightbox__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(208, 208, 208, 0.85);
  color: #434343;
  cursor: pointer;
  transform: translateY(-50%);
  transition: background 0.2s ease;
}
@media (max-width: 640px) {
  .lightbox__arrow {
    width: 34px;
    height: 34px;
  }
}
.lightbox__arrow:hover {
  background: rgba(184, 184, 184, 0.95);
}
.lightbox__arrow:focus, .lightbox__arrow:focus-visible {
  outline: none;
}
.lightbox__arrow[hidden] {
  display: none;
}
.lightbox__arrow--prev {
  left: 10px;
}
@media (max-width: 640px) {
  .lightbox__arrow--prev {
    left: 5px;
  }
}
.lightbox__arrow--next {
  right: 10px;
}
@media (max-width: 640px) {
  .lightbox__arrow--next {
    right: 5px;
  }
}
.lightbox__count {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 2;
  font-size: 18px;
  line-height: 1;
  color: #434343;
  transform: translateX(-50%);
}
@media (max-width: 640px) {
  .lightbox__count {
    bottom: 8px;
    font-size: 14px;
  }
}
.lightbox__count[hidden] {
  display: none;
}

html:has(.lightbox[open]) {
  overflow: hidden;
}

.series--shot {
  margin-top: 92px;
}
@media (max-width: 1199px) {
  .series--shot {
    margin-top: 64px;
  }
}
@media (max-width: 640px) {
  .series--shot {
    margin-top: 32px;
  }
}
.series__grid {
  display: grid;
  position: relative;
}
@media (max-width: 1199px) {
  .series__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }
}
.series--shot .series__grid {
  grid-template-columns: minmax(0, 624fr) minmax(0, 624fr);
}
@media (max-width: 1199px) {
  .series--shot .series__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.series--camouflage .series__grid {
  grid-template-columns: minmax(0, 479fr) minmax(0, 769fr);
}
@media (max-width: 1199px) {
  .series--camouflage .series__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.series--tableau .series__grid {
  grid-template-columns: minmax(0, 603fr) minmax(0, 645fr);
}
@media (max-width: 1199px) {
  .series--tableau .series__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.series__aside {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-end;
}
@media (max-width: 1199px) {
  .series__aside {
    align-items: flex-start;
    gap: 32px;
  }
}
.series--shot .series__text {
  align-self: flex-start;
  padding-left: 118px;
}
@media (max-width: 1199px) {
  .series--shot .series__text {
    padding-left: 0;
  }
}
.series--camouflage .series__text {
  margin-top: 452px;
  margin-bottom: -4px;
  padding-left: 5px;
}
@media (max-width: 1199px) {
  .series--camouflage .series__text {
    margin: 0;
    padding-left: 0;
  }
}
@media (max-width: 640px) {
  .series--camouflage .series__text {
    order: 1;
  }
}
.series--tableau .series__text {
  margin-top: 250px;
  padding-left: 36px;
}
@media (max-width: 1199px) {
  .series--tableau .series__text {
    margin-top: 0;
    padding-left: 0;
  }
}
.series__heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  font-size: 36px;
  line-height: 36px;
}
@media (max-width: 640px) {
  .series__heading {
    font-size: 28px;
    line-height: 30px;
  }
}
.series__name, .series__subtitle-link {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s ease;
}
.series__name:hover, .series__subtitle-link:hover {
  text-decoration-color: currentColor;
}
.series__more {
  margin-top: 11px;
  font-size: 22px;
  line-height: 22px;
  color: #fd3b3b;
}
@media (max-width: 640px) {
  .series__more {
    margin-top: 8px;
    font-size: 18px;
    line-height: 20px;
  }
}
.series__more:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.series--shot .series__heading {
  column-gap: 13px;
}
.series--camouflage .series__heading, .series--tableau .series__heading {
  column-gap: 4px;
}
.series__subtitle {
  margin-top: 6px;
  font-size: 22px;
  line-height: 22px;
}
@media (max-width: 1260px) {
  .series__subtitle {
    font-size: 19px;
  }
}
@media (max-width: 640px) {
  .series__subtitle {
    font-size: 18px;
    line-height: 20px;
  }
}
.series__wide {
  margin-top: 24px;
}
@media (max-width: 1199px) {
  .series__wide {
    margin-top: 32px;
  }
}
.series--perfect {
  margin-top: 121px;
}
@media (max-width: 1199px) {
  .series--perfect {
    margin-top: 64px;
  }
}
@media (max-width: 640px) {
  .series--perfect {
    margin-top: 32px;
  }
}
.series--perfect .series__grid {
  grid-template-columns: minmax(0, 626fr) minmax(0, 597fr);
  column-gap: 25px;
}
.series--kitkat .series__grid {
  grid-template-columns: minmax(0, 751fr) minmax(0, 449fr);
  column-gap: 48px;
}
.series--canvas .series__grid {
  grid-template-columns: minmax(0, 682fr) minmax(0, 538fr);
  padding-left: 28px;
  gap: 2rem;
}
.series--caartl .series__grid {
  grid-template-columns: minmax(0, 751fr) minmax(0, 455fr);
  column-gap: 42px;
}
.series--melon .series__grid {
  grid-template-columns: minmax(0, 742fr) minmax(0, 461fr);
  column-gap: 45px;
}
@media (max-width: 1199px) {
  .series--perfect .series__grid, .series--kitkat .series__grid, .series--canvas .series__grid, .series--caartl .series__grid, .series--melon .series__grid {
    grid-template-columns: minmax(0, 1fr);
    padding-left: 0;
  }
}
.series__stack {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.series__body {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.series__lede {
  font-size: 30px;
  line-height: 30px;
}
@media (max-width: 640px) {
  .series__lede {
    font-size: 22px;
    line-height: 24px;
  }
}
.series__lede--large {
  font-size: 36px;
  line-height: 36px;
}
@media (max-width: 640px) {
  .series__lede--large {
    font-size: 28px;
    line-height: 30px;
  }
}
.series--work .series__heading {
  column-gap: 6px;
}
.series--canvas .series__heading {
  column-gap: 10px;
}
.series--work .series__subtitle {
  margin-top: 12px;
}
.series--perfect .series__body {
  align-items: flex-start;
}
.series--perfect .series__heading {
  margin-top: 129px;
}
.series--perfect .crop--perfect-scroll {
  margin-top: 34px;
}
.series--kitkat .series__body {
  align-items: flex-start;
}
.series--kitkat .series__heading {
  margin-top: 102px;
}
.series--canvas .series__body {
  align-items: flex-start;
  margin-top: 210px;
}
.series--canvas .series__heading {
  margin-top: 41px;
}
.series--caartl .series__body {
  align-items: flex-start;
  margin-top: 44px;
}
.series--caartl .series__heading {
  margin-top: 141px;
}
.series--caartl .series__subtitle {
  max-width: 376px;
}
.series--melon .series__body {
  align-items: flex-start;
  margin-top: 67px;
}
.series--melon .series__heading {
  margin-top: 106px;
}
.series__note {
  margin-top: auto;
  font-size: 22px;
  line-height: 22px;
  color: #fd3b3b;
}
@media (max-width: 1199px) {
  .series__note {
    margin-top: 24px;
  }
}
@media (max-width: 640px) {
  .series__note {
    font-size: 18px;
    line-height: 20px;
  }
}
@media (max-width: 1199px) {
  .series--work .series__body {
    margin-top: 0;
  }
  .series--work .series__heading, .series--perfect .crop--perfect-scroll {
    margin-top: 40px;
  }
}

.canvas-world {
  display: block;
}
.canvas-world__statement {
  width: 789px;
  font-size: 42px;
  line-height: 47px;
  color: #e29a01;
}
.canvas-world__statement span {
  display: block;
  text-wrap: balance;
}
.canvas-world__statement span + span {
  margin-top: 0.9lh;
}
@media (max-width: 1199px) {
  .canvas-world__statement {
    width: auto;
    font-size: 44px;
    line-height: 46px;
  }
}
@media (max-width: 640px) {
  .canvas-world__statement {
    font-size: 32px;
    line-height: 34px;
  }
}
.canvas-world__scene {
  max-width: 661px;
  margin-top: 30px;
  font-size: 30px;
  line-height: 32px;
  color: #e29a01;
}
@media (max-width: 1199px) {
  .canvas-world__scene {
    margin-top: 48px;
    font-size: 34px;
    line-height: 38px;
  }
}
@media (max-width: 640px) {
  .canvas-world__scene {
    margin-top: 32px;
    font-size: 26px;
    line-height: 30px;
  }
}

.triptych {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.triptych img {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
}

.page--perfect {
  --case-accent: #1b48bb;
}

.page--canvas {
  --case-accent: #e29a01;
}

.page--caartl {
  --case-accent: #749906;
}

.page--katch {
  --case-accent: #e42227;
}

.page--melon {
  --case-accent: #f26046;
}

.page--perfect .site-header__accent,
.page--perfect .contact__details a,
.page--canvas .site-header__accent,
.page--canvas .contact__details a,
.page--caartl .site-header__accent,
.page--caartl .contact__details a,
.page--katch .site-header__accent,
.page--katch .contact__details a,
.page--melon .site-header__accent,
.page--melon .contact__details a {
  color: var(--case-accent);
}

.case {
  display: flex;
  flex-direction: column;
  max-width: 1440px;
  margin: 0 auto;
  padding: 433px 96px 98px;
}
@media (max-width: 1199px) {
  .case {
    padding: 220px 48px 96px;
  }
}
@media (max-width: 640px) {
  .case {
    padding: 140px 24px 24px;
  }
}
.case__title {
  font-size: 56px;
  line-height: 36px;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .case__title {
    font-size: 40px;
    line-height: 40px;
    white-space: normal;
  }
}
.case__label {
  margin-top: 120px;
  font-size: 22px;
  line-height: 22px;
}
@media (max-width: 1199px) {
  .case__label {
    margin-top: 96px;
  }
}
@media (max-width: 640px) {
  .case__label {
    margin-top: 40px;
    font-size: 18px;
    line-height: 20px;
  }
}
.case__label + *, .case__point + * {
  margin-top: 28px;
}
@media (max-width: 640px) {
  .case__label + *, .case__point + * {
    margin-top: 14px;
  }
}
.case__statement {
  max-width: 721px;
  font-size: 48px;
  line-height: 48px;
  color: var(--case-accent);
}
@media (max-width: 640px) {
  .case__statement {
    font-size: 32px;
    line-height: 34px;
  }
}
.case__statement span {
  display: block;
  text-wrap: balance;
}
.case__statement--tight {
  max-width: none;
  line-height: 34.435px;
}
@media (max-width: 640px) {
  .case__statement--tight {
    line-height: 34px;
  }
}
.case__caption {
  max-width: 603px;
  margin-top: 15px;
  font-size: 22px;
  line-height: 22px;
}
@media (max-width: 640px) {
  .case__caption {
    font-size: 18px;
    line-height: 20px;
  }
}
.case__caption a {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s ease;
}
.case__caption a:hover {
  text-decoration-color: currentColor;
}
.case__system, .case__slides {
  max-width: 1245px;
}
.case__demo {
  display: block;
  width: 62.369%;
  height: auto;
  margin-right: auto;
  margin-left: auto;
  aspect-ratio: 1662/1080;
  object-fit: contain;
}
.case__demo--trim-top {
  aspect-ratio: 1662/1066;
  object-fit: cover;
  object-position: bottom;
}
@media (max-width: 1199px) {
  .case__demo {
    width: 80%;
    max-width: 778px;
  }
}
@media (max-width: 640px) {
  .case__demo {
    width: 100%;
    max-width: none;
  }
}
.case__point {
  max-width: 1031px;
  margin-top: 82px;
  font-size: 36px;
  line-height: 36px;
}
@media (max-width: 1199px) {
  .case__point {
    margin-top: 64px;
  }
}
@media (max-width: 640px) {
  .case__point {
    margin-top: 28px;
    font-size: 24px;
    line-height: 28px;
  }
}
.case__point--normal {
  line-height: normal;
}
.case__research {
  display: grid;
  grid-template-columns: minmax(0, 472fr) minmax(0, 759fr);
  column-gap: 17px;
}
@media (max-width: 1199px) {
  .case__research {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
  }
}
.case__quotes {
  font-size: 28px;
  line-height: 28px;
}
@media (max-width: 640px) {
  .case__quotes {
    font-size: 20px;
    line-height: 24px;
  }
}
.case__quotes p:first-child {
  max-width: 584px;
}
.case__quotes p + p {
  margin-top: 47px;
}
@media (max-width: 640px) {
  .case__quotes p + p {
    margin-top: 32px;
  }
}
.case__aside {
  font-size: 22px;
}
@media (max-width: 640px) {
  .case__aside {
    font-size: 16px;
  }
}
.case__figure {
  width: 100%;
  height: auto;
}
.case__figure-link {
  display: block;
}
@media (min-width: 641px) {
  .case__figure-link {
    pointer-events: none;
  }
}
.case__system {
  display: flex;
  flex-direction: column;
  gap: 38px;
}
@media (max-width: 640px) {
  .case__system {
    gap: 24px;
  }
}
.case__typography {
  display: grid;
  grid-template-columns: minmax(0, 972fr) minmax(0, 478fr) minmax(0, 1288fr);
  column-gap: 24px;
}
.case__typography a {
  display: flex;
  align-items: center;
}
.case__typography a + a {
  padding-left: 24px;
  border-left: 1px solid #d9d9d9;
}
.case__typography img {
  width: 100%;
  height: auto;
}
@media (max-width: 1199px) {
  .case__typography {
    column-gap: 16px;
  }
  .case__typography a + a {
    padding-left: 16px;
  }
}
@media (max-width: 640px) {
  .case__typography {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
  .case__typography a + a {
    padding-left: 0;
    border-left: 0;
  }
}
.case__library {
  display: grid;
  grid-template-columns: minmax(0, 665fr) minmax(0, 580fr);
}
@media (max-width: 640px) {
  .case__library {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 24px;
  }
}
.case__slides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 27px;
}
@media (max-width: 640px) {
  .case__slides {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}
.case__slide {
  display: block;
  aspect-ratio: 610/343;
  overflow: hidden;
  border: 1px solid;
}
.case__slide--red {
  border-color: #ff161a;
}
.case__slide--green {
  border-color: #06ad2a;
}
.case__slide--blue {
  border-color: #1b48bb;
}
.case__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.case__link, .case__experience a, .case__next {
  color: var(--case-accent);
}
.case__link:hover, .case__experience a:hover, .case__next:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.case__link {
  display: inline-block;
  margin-top: 22px;
  font-size: 22px;
  line-height: 22px;
}
@media (max-width: 640px) {
  .case__link {
    margin-top: 16px;
    font-size: 18px;
    line-height: 20px;
  }
}
.case__experience {
  margin-top: 120px;
  font-size: 36px;
  line-height: 36px;
}
@media (max-width: 1199px) {
  .case__experience {
    margin-top: 96px;
  }
}
@media (max-width: 640px) {
  .case__experience {
    margin-top: 40px;
    font-size: 28px;
    line-height: 30px;
  }
}
.case__next {
  align-self: flex-end;
  margin-top: 117px;
}
@media (max-width: 1199px) {
  .case__next {
    margin-top: 96px;
  }
}
@media (max-width: 640px) {
  .case__next {
    margin-top: 40px;
  }
}
.case__next:hover {
  text-decoration: none;
}
.case--canvas {
  padding-bottom: 88px;
}
@media (max-width: 1199px) {
  .case--canvas {
    padding-bottom: 96px;
  }
}
@media (max-width: 640px) {
  .case--canvas {
    padding-bottom: 24px;
  }
}
.case__statement--wide {
  max-width: 1105px;
}
.case__question, .case__text {
  max-width: 960px;
  font-size: 36px;
  line-height: 36px;
}
@media (max-width: 640px) {
  .case__question, .case__text {
    font-size: 24px;
    line-height: 28px;
  }
}
.case__question {
  margin-top: 120px;
}
@media (max-width: 1199px) {
  .case__question {
    margin-top: 96px;
  }
}
@media (max-width: 640px) {
  .case__question {
    margin-top: 40px;
  }
}
.case__question + .case__text {
  margin-top: 36px;
}
@media (max-width: 640px) {
  .case__question + .case__text {
    margin-top: 14px;
  }
}
.case__text + .case__text, .case__text + .case__highlight {
  margin-top: 28px;
}
@media (max-width: 640px) {
  .case__text + .case__text, .case__text + .case__highlight {
    margin-top: 20px;
  }
}
.case__text--narrow {
  max-width: 643px;
}
.case__text--medium {
  max-width: 763px;
}
.case__highlight {
  font-size: 48px;
  line-height: 48px;
  color: var(--case-accent);
}
@media (max-width: 640px) {
  .case__highlight {
    font-size: 32px;
    line-height: 34px;
  }
}
.case__highlight span {
  display: block;
  text-wrap: balance;
}
.case__highlight--arrived {
  font-size: 36px;
  line-height: 36px;
}
@media (max-width: 640px) {
  .case__highlight--arrived {
    font-size: 28px;
    line-height: 30px;
  }
}
.case--katch {
  padding-bottom: 91px;
}
@media (max-width: 1199px) {
  .case--katch {
    padding-bottom: 96px;
  }
}
@media (max-width: 640px) {
  .case--katch {
    padding-bottom: 24px;
  }
}
.case__caption--wide {
  max-width: 908px;
  margin-top: 30px;
}
@media (max-width: 640px) {
  .case__caption--wide {
    margin-top: 20px;
  }
}
.case__text--trim {
  text-box: trim-both cap alphabetic;
}
.case__text--wide {
  max-width: 1077px;
}
.case__media {
  display: block;
  height: auto;
}
.case__media--logo {
  width: 62.369%;
  max-width: 778px;
  margin: 85.7px auto 35px;
}
@media (max-width: 1199px) {
  .case__media--logo {
    width: 80%;
  }
}
.case__media--billboard {
  width: 778px;
  max-width: 100%;
  height: auto;
  margin: 82px auto 0;
  aspect-ratio: 778/438;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 1199px) {
  .case__media--billboard {
    width: min(778px, 80%);
  }
}
@media (max-width: 640px) {
  .case__media--billboard {
    width: 100%;
    margin-top: 32px;
  }
}
.case__media--maps {
  width: 57.692%;
  margin: 84px auto 0;
}
@media (max-width: 1199px) {
  .case__media--maps {
    width: 80%;
    max-width: 720px;
  }
}
.case__media--instagram {
  width: 52.965%;
  margin: 80px 0 0 23.638%;
}
@media (max-width: 1199px) {
  .case__media--instagram {
    width: 72%;
    max-width: 661px;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 1199px) {
  .case__media {
    margin-top: 64px;
    margin-bottom: 0;
  }
}
@media (max-width: 640px) {
  .case__media {
    width: 100%;
    margin: 32px 0 0;
  }
}
.case__video {
  width: 62.369%;
  margin: 119.7px 0 0 17.628%;
}
@media (max-width: 1199px) {
  .case__video {
    width: 80%;
    max-width: 778px;
    margin-top: 64px;
    margin-left: 10%;
  }
}
@media (max-width: 640px) {
  .case__video {
    width: 100%;
    margin: 32px 0 0;
  }
}
.case__player, .case__phone {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.case__player:focus-visible, .case__phone:focus-visible {
  outline: 1px solid var(--case-accent);
  outline-offset: 4px;
}
.case__player video, .case__player .video-fallback {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 778.364/439.407;
  object-fit: cover;
}
.case__sound {
  margin-top: 8.6px;
  font-size: 22px;
  line-height: 22px;
  color: #fd3b3b;
}
@media (max-width: 640px) {
  .case__sound {
    font-size: 18px;
    line-height: 20px;
  }
}
.case__sound-toggle {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  position: absolute;
  left: 0;
  right: -22rem;
  /* top: 0; */
  bottom: 0;
}
@media (max-width: 1380px) {
  .case__sound-toggle {
    right: -21rem;
  }
}
@media (max-width: 1340px) {
  .case__sound-toggle {
    right: -20rem;
  }
}
@media (max-width: 1200px) {
  .case__sound-toggle {
    position: unset;
  }
}
.case__sound-toggle:focus-visible {
  outline: 1px solid var(--case-accent, #fd3b3b);
  outline-offset: 4px;
}
.case__sound-toggle-home {
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}
@media (max-width: 1200px) {
  .case__sound-toggle-home {
    position: unset;
  }
}
.case__sound-toggle-home:focus-visible {
  outline: 1px solid var(--case-accent, #fd3b3b);
  outline-offset: 4px;
}
.case__spotify {
  display: grid;
  grid-template-columns: minmax(0, 667fr) minmax(0, 328fr) minmax(0, 253fr);
  align-items: start;
  margin-top: 182.7px;
}
@media (max-width: 1199px) {
  .case__spotify {
    grid-template-columns: minmax(0, 1fr) minmax(0, 328px);
    column-gap: 32px;
    margin-top: 64px;
  }
}
@media (max-width: 640px) {
  .case__spotify {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
    margin-top: 32px;
  }
  .case__spotify .case__phone {
    order: -1;
    justify-self: center;
  }
}
.case__channel {
  font-size: 36px;
  line-height: 36px;
}
@media (max-width: 1280px) {
  .case__channel {
    font-size: 33px;
    line-height: 30px;
  }
}
@media (max-width: 640px) {
  .case__channel {
    font-size: 24px;
    line-height: 28px;
  }
}
.case__channel--spotify {
  margin-top: 22px;
}
@media (max-width: 640px) {
  .case__channel--spotify {
    margin-top: 0;
  }
}
.case__channel--maps {
  max-width: 531px;
  margin-top: -14.5px;
}
@media (max-width: 1199px) {
  .case__channel--maps {
    margin-top: 64px;
  }
}
@media (max-width: 640px) {
  .case__channel--maps {
    margin-top: 32px;
  }
}
.case__channel--instagram {
  margin-top: 129.5px;
}
.case__channel--talabat {
  margin-top: 101px;
}
@media (max-width: 1199px) {
  .case__channel--instagram, .case__channel--talabat {
    margin-top: 96px;
  }
}
@media (max-width: 640px) {
  .case__channel--instagram, .case__channel--talabat {
    margin-top: 32px;
  }
}
.case__placement {
  display: contents;
}
@media (max-width: 640px) {
  .case__placement {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    margin-top: 32px;
  }
  .case__placement > a,
  .case__placement > .case__media,
  .case__placement > .case__notifications {
    order: -1;
  }
  .case__placement .case__channel {
    margin-top: 0;
  }
}
@media (max-width: 640px) {
  .case--katch > section {
    display: flex;
    flex-direction: column;
  }
  .case--katch > section > .case__media,
  .case--katch > section > .case__video {
    order: -1;
    margin-top: 40px;
  }
}
@media (max-width: 640px) {
  .case--katch > section:has(> .case__media, > .case__video) > .case__label {
    margin-top: 24px;
  }
}
.case__phone {
  position: relative;
}
.case__phone img {
  width: 100%;
  height: auto;
}
@media (max-width: 640px) {
  .case__phone {
    width: 64%;
    justify-self: center;
  }
}
.case__screen {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 81.026%;
  height: 93.835%;
  overflow: hidden;
  border-radius: 13.507%/6.349%;
  transform: translate(-50%, -50%) rotate(4.5deg);
}
.case__screen video,
.case__screen .video-fallback {
  position: absolute;
  top: 5.252%;
  left: -0.068%;
  width: 100.951%;
  max-width: none;
  height: 96.36%;
  object-fit: cover;
  object-position: bottom;
}
.case__phone .case__spotify-play {
  position: absolute;
  top: 82.2%;
  left: 50%;
  z-index: 2;
  width: 14.5%;
  max-width: none;
  height: auto;
  opacity: 0;
  transform: translate(-54%, -52%) rotate(-5.9deg);
  transition: opacity 0.15s ease;
  pointer-events: none;
}
.case__phone[aria-pressed=false] .case__spotify-play {
  opacity: 1;
}
.case__notifications {
  margin: 110px 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1199px) {
  .case__notifications {
    margin-top: 64px;
  }
}
@media (max-width: 640px) {
  .case__notifications {
    margin-top: 32px;
  }
}
.case__notifications li {
  width: 25.641%;
}
@media (max-width: 1199px) {
  .case__notifications li {
    width: 40%;
    max-width: 320px;
  }
}
@media (max-width: 640px) {
  .case__notifications li {
    width: 82%;
  }
}
.case__notifications li + li {
  margin-top: 36px;
}
@media (max-width: 640px) {
  .case__notifications li + li {
    margin-top: 16px;
  }
}
.case__notifications li:nth-child(1) {
  margin-left: 40.946%;
}
.case__notifications li:nth-child(2) {
  margin-left: 31.731%;
  margin-top: 38px;
}
@media (max-width: 640px) {
  .case__notifications li:nth-child(2) {
    margin-top: 16px;
  }
}
.case__notifications li:nth-child(3) {
  margin-left: 41.667%;
}
.case__notifications li:nth-child(4) {
  margin-left: 28.205%;
  margin-top: 17px;
}
@media (max-width: 640px) {
  .case__notifications li:nth-child(4) {
    margin-top: 16px;
  }
}
.case__notifications li:nth-child(5) {
  margin-left: 39.503%;
}
@media (max-width: 640px) {
  .case__notifications li:nth-child(odd) {
    margin-left: 18%;
  }
}
@media (max-width: 640px) {
  .case__notifications li:nth-child(even) {
    margin-left: 0;
  }
}
.case__notifications img {
  width: 100%;
  height: auto;
}
.case__experience--katch {
  margin-top: 79px;
}
@media (max-width: 1199px) {
  .case__experience--katch {
    margin-top: 96px;
  }
}
@media (max-width: 640px) {
  .case__experience--katch {
    margin-top: 40px;
  }
}
.case__next--katch {
  margin-top: 64px;
  margin-right: 3px;
}
@media (max-width: 1199px) {
  .case__next--katch {
    margin-right: 0;
  }
}
@media (max-width: 640px) {
  .case__next--katch {
    margin-top: 32px;
  }
}
.case--caartl {
  padding-bottom: 88px;
}
@media (max-width: 1199px) {
  .case--caartl {
    padding-bottom: 96px;
  }
}
@media (max-width: 640px) {
  .case--caartl {
    padding-bottom: 24px;
  }
}
.case--caartl .case__label--close {
  margin-top: 70px;
}
@media (max-width: 640px) {
  .case--caartl .case__label--close {
    margin-top: 32px;
  }
}
.case__label + .case__point {
  margin-top: 28px;
}
@media (max-width: 640px) {
  .case__label + .case__point {
    margin-top: 20px;
  }
}
.case--caartl .crop--caartl-naming {
  margin-top: 37px;
}
@media (max-width: 640px) {
  .case--caartl .crop--caartl-naming {
    margin-top: 20px;
  }
}
.case--caartl .case__next {
  margin-top: 135px;
}
@media (max-width: 1199px) {
  .case--caartl .case__next {
    margin-top: 96px;
  }
}
@media (max-width: 640px) {
  .case--caartl .case__next {
    margin-top: 40px;
  }
}
.case__marks {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 82px;
}
@media (max-width: 1199px) {
  .case__marks {
    margin-top: 64px;
  }
}
@media (max-width: 640px) {
  .case__marks {
    gap: 16px;
    margin-top: 32px;
  }
}
.case__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}
@media (max-width: 640px) {
  .case__columns {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}
.case__column {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (max-width: 640px) {
  .case__column {
    gap: 16px;
  }
}
.case--melon {
  padding-bottom: 0;
}
.case__text--single {
  max-width: none;
  line-height: 22px;
  white-space: nowrap;
}
@media (max-width: 1199px) {
  .case__text--single {
    line-height: 36px;
    white-space: normal;
  }
}
@media (max-width: 640px) {
  .case__text--single {
    line-height: 28px;
  }
}
.case--melon .crop--melon-thought {
  margin-top: 37px;
}
@media (max-width: 640px) {
  .case--melon .crop--melon-thought {
    margin-top: 20px;
  }
}
.case--melon .gallery__outro {
  margin-top: 156px;
}
@media (max-width: 1199px) {
  .case--melon .gallery__outro {
    margin-top: 96px;
  }
}
@media (max-width: 640px) {
  .case--melon .gallery__outro {
    margin-top: 40px;
  }
}
.case .red-case {
  font-family: "Amiri";
  font-style: italic;
  font-weight: 400;
  font-size: 36px;
  line-height: 36px;
  color: #E42227;
}
@media (max-width: 1199px) {
  .case .red-case {
    font-size: 30px;
    line-height: 30px;
  }
}
@media (max-width: 640px) {
  .case .red-case {
    font-size: 24px;
    line-height: 28px;
  }
}

.gallery--writing {
  padding-top: 248px;
}
@media (max-width: 1199px) {
  .gallery--writing {
    padding-top: 160px;
  }
}
@media (max-width: 640px) {
  .gallery--writing {
    padding-top: 112px;
  }
}
.gallery--writing .gallery__outro {
  margin-top: 230px;
}
@media (max-width: 1199px) {
  .gallery--writing .gallery__outro {
    margin-top: 96px;
  }
}
@media (max-width: 640px) {
  .gallery--writing .gallery__outro {
    margin-top: 40px;
  }
}

.piece {
  position: relative;
}
.piece--mostly-white {
  margin-top: 242px;
  padding-left: calc(212 / 1248 * 100%);
}
.piece--mostly-white .piece__photo {
  left: calc(755 / 1248 * 100%);
  top: 87px;
  width: 280px;
}
@media (max-width: 1199px) {
  .piece--mostly-white .piece__photo {
    left: auto;
    top: auto;
  }
}
.piece--try-again {
  margin-top: 123px;
  padding-left: calc(718 / 1248 * 100%);
}
.piece--try-again .piece__photo {
  left: calc(226 / 1248 * 100%);
  top: 425px;
  width: 280px;
}
@media (max-width: 1199px) {
  .piece--try-again .piece__photo {
    left: auto;
    top: auto;
  }
}
.piece--how-i-got-you {
  margin-top: 168px;
  padding-left: calc(108 / 1248 * 100%);
}
.piece--how-i-got-you .piece__photo {
  left: calc(771 / 1248 * 100%);
  top: 372px;
  width: 371px;
}
@media (max-width: 1199px) {
  .piece--how-i-got-you .piece__photo {
    left: auto;
    top: auto;
  }
}
.piece--eleven-to-seven {
  margin-top: 96px;
  padding-left: calc(742 / 1248 * 100%);
}
.piece--eleven-to-seven .piece__photo {
  left: calc(82 / 1248 * 100%);
  top: 297px;
  width: 376px;
}
@media (max-width: 1199px) {
  .piece--eleven-to-seven .piece__photo {
    left: auto;
    top: auto;
  }
}
@media (max-width: 1199px) {
  .piece {
    margin-top: 96px;
    padding-left: 0;
  }
}
@media (max-width: 640px) {
  .piece {
    display: flex;
    flex-direction: column;
    margin-top: 40px;
  }
}
.piece__title {
  font-size: 69.024px;
  line-height: 69.024px;
  white-space: nowrap;
}
@media (max-width: 1199px) {
  .piece__title {
    font-size: 56px;
    line-height: 56px;
  }
}
@media (max-width: 640px) {
  .piece__title {
    font-size: 40px;
    line-height: 40px;
    white-space: normal;
  }
}
.piece__poem {
  margin-top: 76px;
  font-size: 22px;
  line-height: 22px;
  white-space: nowrap;
}
@media (max-width: 1199px) {
  .piece__poem {
    margin-top: 40px;
  }
}
@media (max-width: 640px) {
  .piece__poem {
    margin-top: 28px;
    font-size: 18px;
    line-height: 20px;
    white-space: normal;
  }
}
.piece__photo {
  position: absolute;
}
@media (max-width: 1199px) {
  .piece__photo {
    position: relative;
    max-width: 100%;
    margin-top: 48px;
  }
}
@media (max-width: 640px) {
  .piece__photo {
    order: -1;
    margin-top: 0;
    margin-bottom: 24px;
  }
}

.site-footer {
  display: flex;
  justify-content: space-between;
  height: 125px;
  padding: 49px max(96px, (100% - 1440px) / 2 + 96px) 0;
  border-top: 1px solid #434343;
  font-size: 24px;
  line-height: 24px;
}
@media (max-width: 1199px) {
  .site-footer {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    height: auto;
    padding: 40px 48px;
    text-align: center;
  }
}
@media (max-width: 640px) {
  .site-footer {
    padding: 28px 24px;
    font-size: 16px;
    line-height: 22px;
  }
}
.site-footer__credit {
  order: -1;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: text-decoration-color 0.2s ease;
}
.site-footer__credit:hover {
  text-decoration-color: currentColor;
}

/*# sourceMappingURL=styles.css.map */