@font-face {
  font-family: "Dazzle Unicase";
  src: url("https://ruthkoleva.com/fragments/assets/dazzle-unicase-medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("https://ruthkoleva.com/fragments/assets/inter-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #fffef8;
  --ink: #000;
  --green: #43ac41;
  --blue: #414999;
  --display: "Dazzle Unicase", sans-serif;
  --body: "Inter", Arial, sans-serif;
  --copy-size: clamp(0.88rem, 0.904vw, 1.085rem);
  --copy-leading: 1.513;
  --section-title: clamp(1.25rem, 1.31vw, 1.574rem);
  --pixel: clamp(2.75rem, 3.906vw, 4.6875rem);
  --page-max: 120rem;
  --mobile-pad: clamp(1.25rem, 5vw, 3rem);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--paper);
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img {
  display: block;
  max-width: 100%;
}

figure,
p,
h1,
h2 {
  margin: 0;
}

.page-grid {
  display: grid;
  grid-template-columns: repeat(14, minmax(0, 1fr));
  width: min(100%, var(--page-max));
  margin-inline: auto;
}

.site-intro {
  position: relative;
  min-height: clamp(20rem, 22.9vw, 27.5rem);
  padding-top: clamp(4.75rem, 7.86vw, 9.4375rem);
  font-family: var(--display);
  font-weight: 500;
}

.site-intro__identity {
  grid-column: 3 / 7;
}

.site-intro__identity h1 {
  font-size: clamp(2.6rem, 3.328vw, 3.994rem);
  font-weight: 500;
  line-height: 1;
}

.site-intro__identity p {
  margin-top: clamp(2rem, 2.81vw, 3.375rem);
  font-size: clamp(1.05rem, 1.302vw, 1.5625rem);
  line-height: 1.37;
}

.site-intro__statement {
  grid-column: 7 / 14;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: clamp(5.75rem, 7.08vw, 8.5rem);
  text-align: right;
  font-size: clamp(1.2rem, 1.823vw, 2.1875rem);
  line-height: 1.37;
}

.site-intro__statement span:last-child {
  font-size: clamp(1rem, 1.302vw, 1.5625rem);
}

.pixel {
  position: absolute;
  z-index: 5;
  display: block;
  width: var(--pixel);
  aspect-ratio: 1;
}

.pixel--blue { background: var(--blue); }
.pixel--green { background: var(--green); }

.intro-pixel {
  left: 42.25%;
  top: 57.7%;
}

.story {
  position: relative;
  isolation: isolate;
  min-height: clamp(47rem, 49vw, 58.8rem);
}

.story__copy {
  position: relative;
  z-index: 3;
  width: 100%;
}

.story h2 {
  margin-bottom: clamp(2.25rem, 2.81vw, 3.375rem);
  font-family: var(--display);
  font-size: var(--section-title);
  font-weight: 500;
  line-height: 1.37;
}

.story h2 span {
  display: block;
  font-size: clamp(0.8rem, 0.833vw, 1rem);
}

.story__body {
  font-size: var(--copy-size);
  line-height: var(--copy-leading);
}

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

.story__media {
  position: relative;
  z-index: 2;
  align-self: start;
  overflow: hidden;
}

.story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.paper-layer,
.tape {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.paper-layer {
  z-index: 0;
  object-fit: cover;
}

.tape {
  z-index: 4;
}

/* 01 — Who Is She? */
.story--one {
  min-height: clamp(49rem, 50vw, 60rem);
}

.story--one .paper-layer--notebook {
  top: 0;
  left: max(-27.2rem, -22.6vw);
  width: min(66.46vw, 79.75rem);
  transform: rotate(0.06deg);
}

.story--one .story__copy {
  grid-column: 3 / 7;
  padding: clamp(4.25rem, 4.22vw, 5.0625rem) 0 0 clamp(0.5rem, 1.15vw, 1.375rem);
  max-width: 28.5rem;
}

.story--one .story__media {
  grid-column: 7 / 15;
  width: 79.85%;
  margin-top: clamp(7rem, 8.07vw, 9.6875rem);
  margin-left: 9.77%;
  aspect-ratio: 1.5;
}

.story--one .tape--one {
  top: 66%;
  left: 47.6%;
  width: min(9.7vw, 11.625rem);
  transform: rotate(36.76deg);
}

.story--one .tape--two {
  top: 11%;
  right: 1.35%;
  width: min(9.7vw, 11.625rem);
  transform: rotate(36.76deg);
}

.story--one .p1 { top: 3.9%; left: 59.8%; }
.story--one .p2 { top: 3.9%; right: 5.9%; }
.story--one .p3 { top: 82.7%; left: 50%; }
.story--one .p4 { top: 92.5%; right: 5.9%; }
.story--one .p5 { top: 82.7%; right: 5.9%; }

/* 02 — Help */
.story--two {
  min-height: clamp(48rem, 50.5vw, 60.6rem);
}

.story--two .story__media--crowd {
  grid-column: 2 / 10;
  width: 91%;
  margin-left: 11.5%;
  aspect-ratio: 998 / 662;
}

.story--two .paper-layer--help {
  z-index: 1;
  top: 6.2%;
  right: -1.45%;
  width: min(39.1vw, 46.875rem);
}

.story--two .story__copy {
  grid-column: 10 / 14;
  margin-left: 14.5%;
  padding-top: clamp(10rem, 10.7vw, 12.8125rem);
  max-width: 27rem;
}

.story--two .p1 { top: 47%; left: 5%; }
.story--two .p2 { top: 74%; left: 8.9%; }
.story--two .p3 { top: 75.5%; left: 15%; }
.story--two .p4 { top: 75%; right: 6%; }

/* 03 — More */
.story--three {
  min-height: clamp(44rem, 46.5vw, 55.8rem);
  margin-top: clamp(-11rem, -9.1vw, -7rem);
}

.story--three .paper-layer--more {
  top: 0;
  left: 6.4%;
  width: min(32.3vw, 38.75rem);
  height: 91.9%;
  object-position: top;
}

.story--three .story__copy {
  grid-column: 2 / 6;
  margin-left: 12%;
  padding-top: clamp(10.8rem, 11.3vw, 13.55rem);
  width: min(24vw, 28.75rem);
}

.story--three .story__media--tilted-right {
  grid-column: 7 / 15;
  width: 91%;
  margin-top: 3.5%;
  margin-left: 4.7%;
  aspect-ratio: 997 / 665;
  transform: rotate(3.75deg);
}

.story--three .tape--three {
  top: 0;
  left: 59.5%;
  width: min(5vw, 6rem);
}

.story--three .p1 { top: -13%; left: 5%; }
.story--three .p2 { top: -8%; left: 51.9%; }

/* 04 — Edge of the Night */
.story--four {
  min-height: clamp(44rem, 45.5vw, 54.6rem);
  margin-top: clamp(-3rem, -2.2vw, -1.5rem);
}

.story--four .paper-layer--notebook {
  top: 0;
  right: max(-28.125rem, -23.44vw);
  width: min(66.46vw, 79.75rem);
  transform: rotate(0.06deg);
}

.story--four .story__media--edge {
  grid-column: 2 / 9;
  width: 94%;
  margin-top: 7.2%;
  aspect-ratio: 1.499;
}

.story--four .story__media--edge img {
  object-position: bottom;
}

.story--four .story__copy {
  grid-column: 9 / 13;
  margin-left: 19%;
  padding-top: clamp(6.2rem, 7.08vw, 8.5rem);
  max-width: 26.125rem;
}

.story--four .tape--four {
  top: 1%;
  left: 20.8%;
  width: min(9.7vw, 11.625rem);
}

.story--four .p1 { top: 2.5%; left: 42.2%; }
.story--four .p2 { top: 2.5%; left: 48.7%; }
.story--four .p3 { top: 88%; left: 2.5%; }

/* 05 — Make It Right */
.story--five {
  min-height: clamp(42rem, 43.4vw, 52.1rem);
}

.story--five .paper-layer--make {
  top: 2.5%;
  left: 7.9%;
  width: min(40.7vw, 48.86rem);
  height: 88%;
  object-fit: cover;
  object-position: top;
  transform: rotate(-1.35deg);
  filter: drop-shadow(4px 4px 4px rgb(0 0 0 / 25%));
}

.story--five .story__copy {
  grid-column: 3 / 7;
  margin-left: 3.65%;
  padding-top: clamp(6.5rem, 7vw, 8.4rem);
  max-width: 26.125rem;
}

.story--five .story__media--tilted-left {
  grid-column: 7 / 15;
  width: 80.2%;
  margin-top: 8%;
  margin-left: 7.1%;
  aspect-ratio: 879.585 / 586.39;
  transform: rotate(2.45deg);
}

.story--five .tape--five-a {
  top: 1%;
  left: 34%;
  width: min(7.45vw, 8.95rem);
  transform: rotate(59.82deg);
}

.story--five .tape--five-b {
  top: 0;
  right: 1.2%;
  width: min(2.82vw, 3.375rem);
  transform: rotate(57.45deg);
}

.story--five .p1 { top: 96%; left: 6.9%; }
.story--five .p2 { top: 31%; right: 9.8%; }

/* 06 — She Knows */
.story--six {
  min-height: clamp(43rem, 45.2vw, 54.25rem);
}

.story--six .story__media--portrait {
  grid-column: 3 / 7;
  width: 96%;
  margin-left: 14.5%;
  aspect-ratio: 526 / 788;
}

.story--six .paper-layer--she-knows {
  top: 8.5%;
  left: 38%;
  width: min(42.86vw, 51.44rem);
  height: 73.5%;
  object-fit: cover;
  object-position: top;
}

.story--six .story__copy {
  grid-column: 8 / 12;
  margin-left: 0;
  padding-top: clamp(9rem, 11.5vw, 13.8rem);
  max-width: 26.125rem;
}

.story--six .tape--six {
  top: -9%;
  left: 20.7%;
  width: min(7.45vw, 8.95rem);
}

.story--six .p1 { top: 89%; left: 8.9%; }
.story--six .p2 { top: 15%; right: 9.8%; }
.story--six .p3 { top: 67%; right: 13.8%; }

/* 07 — Tsunami */
.story--seven {
  min-height: clamp(43rem, 44.9vw, 53.9rem);
}

.story--seven .paper-layer--tsunami {
  top: 0;
  left: 10.6%;
  width: min(32.3vw, 38.75rem);
  height: 82.5%;
  object-fit: cover;
  object-position: top;
}

.story--seven .story__copy {
  grid-column: 3 / 7;
  margin-left: 4.5%;
  padding-top: clamp(10rem, 11.4vw, 13.7rem);
  max-width: 22rem;
}

.story--seven .story__media--tsunami {
  grid-column: 7 / 14;
  width: 94.6%;
  margin-left: 0;
  margin-top: 2.6%;
  aspect-ratio: 908 / 605;
}

.story--seven .story__media--tsunami img {
  object-position: center;
}

.story--seven .tape--seven-a {
  top: 35%;
  right: 5.9%;
  width: min(3.65vw, 4.375rem);
}

.story--seven .tape--seven-b {
  top: 57%;
  left: 43.2%;
  width: min(3.6vw, 4.3125rem);
}

.story--seven .p1 { top: 92%; left: 47.7%; }
.story--seven .p2 { top: 86%; left: 10.6%; }
.story--seven .p3 { top: 86%; right: 5.9%; }

.site-footer {
  position: relative;
  min-height: clamp(5.75rem, 7vw, 8.4rem);
  margin-top: clamp(-5rem, -4.6vw, -3rem);
  align-items: start;
}

.site-footer a {
  grid-column: 7 / 14;
  z-index: 8;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(1rem, 1.042vw, 1.25rem);
  line-height: 1.37;
  text-align: right;
  text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.site-footer a:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 0.35rem;
}

@media (max-width: 68.75rem) {
  :root {
    --copy-size: clamp(0.94rem, 1.75vw, 1.08rem);
    --section-title: clamp(1.35rem, 2.6vw, 1.65rem);
    --pixel: clamp(1.5rem, 4vw, 2.5rem);
  }

  .page-grid {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    padding-inline: var(--mobile-pad);
  }

  .site-intro {
    min-height: auto;
    padding-top: clamp(3rem, 8vw, 5rem);
    padding-bottom: clamp(5rem, 14vw, 8rem);
    row-gap: 2.5rem;
  }

  .site-intro__identity,
  .site-intro__statement {
    grid-column: 1;
  }

  .site-intro__identity h1 {
    font-size: clamp(2.75rem, 10vw, 4rem);
  }

  .site-intro__identity p {
    margin-top: 1.5rem;
  }

  .site-intro__statement {
    gap: 1.25rem;
    min-height: 0;
    text-align: left;
  }

  .intro-pixel {
    left: auto;
    right: var(--mobile-pad);
    top: 5rem;
  }

  .story,
  .story--one,
  .story--two,
  .story--three,
  .story--four,
  .story--five,
  .story--six,
  .story--seven {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    margin-top: 0;
    padding-top: clamp(3rem, 9vw, 5rem);
    padding-bottom: clamp(4rem, 12vw, 7rem);
  }

  .story__copy,
  .story--one .story__copy,
  .story--two .story__copy,
  .story--three .story__copy,
  .story--four .story__copy,
  .story--five .story__copy,
  .story--six .story__copy,
  .story--seven .story__copy {
    grid-column: 1;
    grid-row: 1;
    width: min(100%, 36rem);
    max-width: none;
    margin: 0;
    padding: clamp(2.5rem, 7vw, 4rem) clamp(1.75rem, 6vw, 4rem);
  }

  .story h2 {
    margin-bottom: 2rem;
  }

  .story__body p + p {
    margin-top: 0.7rem;
  }

  .paper-layer,
  .story--one .paper-layer--notebook,
  .story--two .paper-layer--help,
  .story--three .paper-layer--more,
  .story--four .paper-layer--notebook,
  .story--five .paper-layer--make,
  .story--six .paper-layer--she-knows,
  .story--seven .paper-layer--tsunami {
    top: 2rem;
    left: max(0.35rem, 2vw);
    right: auto;
    width: min(42rem, calc(100% - 0.7rem));
    height: calc(100% - clamp(27rem, 58vw, 36rem));
    min-height: 28rem;
    transform: none;
    object-fit: cover;
    object-position: top;
  }

  .story__media,
  .story--one .story__media,
  .story--two .story__media--crowd,
  .story--three .story__media--tilted-right,
  .story--four .story__media--edge,
  .story--five .story__media--tilted-left,
  .story--six .story__media--portrait,
  .story--seven .story__media--tsunami {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, 48rem);
    height: auto;
    margin: clamp(2rem, 6vw, 3.5rem) 0 0 auto;
    transform: none;
  }

  .story--six .story__media--portrait {
    width: min(72%, 29rem);
    margin-right: auto;
    margin-left: 0;
  }

  .story--two .story__media--crowd,
  .story--four .story__media--edge,
  .story--seven .story__media--tsunami {
    aspect-ratio: 3 / 2;
  }

  .story--one .story__media,
  .story--three .story__media--tilted-right,
  .story--five .story__media--tilted-left {
    aspect-ratio: 3 / 2;
  }

  .story--one .tape--one,
  .story--one .tape--two,
  .story--three .tape--three,
  .story--four .tape--four,
  .story--five .tape--five-a,
  .story--five .tape--five-b,
  .story--six .tape--six,
  .story--seven .tape--seven-a,
  .story--seven .tape--seven-b {
    display: none;
  }

  .story .pixel {
    opacity: 0.95;
  }

  .story .p1 { top: 1.25rem; left: auto; right: 8%; }
  .story .p2 { top: auto; right: auto; bottom: 2rem; left: 5%; }
  .story .p3 { top: auto; right: 7%; bottom: 1rem; left: auto; }
  .story .p4,
  .story .p5 { display: none; }

  .site-footer {
    display: block;
    min-height: auto;
    margin-top: -1rem;
    padding: 0 var(--mobile-pad) 4rem;
    text-align: right;
  }

  .site-footer a {
    font-size: 1.1rem;
  }
}

@media (max-width: 37.5rem) {
  :root {
    --copy-size: clamp(0.84rem, 3.6vw, 0.98rem);
  }

  .site-intro {
    padding-bottom: 3.75rem;
  }

  .site-intro__statement {
    font-size: 1.15rem;
  }

  .site-intro__statement span:last-child {
    font-size: 0.95rem;
  }

  .story,
  .story--one,
  .story--two,
  .story--three,
  .story--four,
  .story--five,
  .story--six,
  .story--seven {
    padding-top: 2.25rem;
    padding-bottom: 4.5rem;
  }

  .story__copy,
  .story--one .story__copy,
  .story--two .story__copy,
  .story--three .story__copy,
  .story--four .story__copy,
  .story--five .story__copy,
  .story--six .story__copy,
  .story--seven .story__copy {
    padding: 2.2rem 1.25rem 2.5rem;
  }

  .paper-layer,
  .story--one .paper-layer--notebook,
  .story--two .paper-layer--help,
  .story--three .paper-layer--more,
  .story--four .paper-layer--notebook,
  .story--five .paper-layer--make,
  .story--six .paper-layer--she-knows,
  .story--seven .paper-layer--tsunami {
    left: 0.35rem;
    width: calc(100% - 0.7rem);
    height: calc(100% - 15.5rem);
    min-height: 29rem;
  }

  .story__media,
  .story--one .story__media,
  .story--two .story__media--crowd,
  .story--three .story__media--tilted-right,
  .story--four .story__media--edge,
  .story--five .story__media--tilted-left,
  .story--seven .story__media--tsunami {
    width: calc(100% + 0.6rem);
    margin-right: -0.6rem;
  }

  .story--six .story__media--portrait {
    width: 76%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}