:root {
  color-scheme: only light;
  --ink: #2a2330;
  --paper-light: #f7edcf;
  --paper-mid: #e7d5ad;
  --paper-dark: #b9925e;
  --binding: #4a2f20;
  --cyan: #1cb9cd;
  --orange: #e97822;
  --yellow: #e7b928;
  --red: #d94a43;
  --green: #64a958;
  --pink: #d4528d;
  --purple: #7854a2;
  --fiber-texture: url("/images/paper-fibers.svg");
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  overflow-x: clip;
  background: #17213b;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  color: var(--ink);
  font-family: "Chalkboard SE", "Comic Sans MS", ui-rounded, sans-serif;
  background:
    var(--fiber-texture),
    repeating-linear-gradient(92deg, transparent 0 31px, rgb(255 255 255 / 2%) 31px 33px),
    radial-gradient(ellipse at 11% 12%, #2e5368 0, transparent 37rem),
    radial-gradient(ellipse at 86% 85%, #51353b 0, transparent 42rem),
    #17213b;
  background-blend-mode: soft-light, normal, normal, normal, normal;
}

.scrapbook-shell {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: clamp(1rem, 4vw, 4rem);
}

.scrapbook {
  position: relative;
  width: min(96vw, 90rem);
  min-height: clamp(48rem, 68vw, 62rem);
  padding: clamp(2rem, 4.5vw, 4.75rem) clamp(1.5rem, 5vw, 5.5rem) clamp(2.5rem, 4.5vw, 4.5rem);
  overflow: hidden;
  border: clamp(0.5rem, 1.15vw, 1rem) solid var(--binding);
  border-radius: 1.1rem 1.65rem 1rem 1.4rem / 1.4rem 1.05rem 1.55rem 0.9rem;
  background:
    var(--fiber-texture),
    linear-gradient(118deg, rgb(255 255 255 / 7%), transparent 26% 72%, rgb(24 10 4 / 16%)),
    #4b2e20;
  box-shadow:
    0 2.6rem 5rem rgb(3 10 25 / 58%),
    0 0.45rem 0 #2b1b14,
    inset 0 0 0 2px rgb(255 226 188 / 13%),
    inset 0 0 2.2rem rgb(20 8 3 / 45%);
  isolation: isolate;
}

.scrapbook::before {
  position: absolute;
  inset: 0.15rem 1.4rem 0.1rem;
  z-index: 2;
  border-right: 1px solid rgb(255 236 198 / 12%);
  border-left: 1px solid rgb(20 8 3 / 24%);
  content: "";
  pointer-events: none;
}

.scrapbook::after {
  position: absolute;
  right: 1.15rem;
  bottom: 0.36rem;
  left: 1.25rem;
  z-index: 2;
  height: 0.42rem;
  border-radius: 0 0 48% 35%;
  background: repeating-linear-gradient(0deg, #b99e72 0 1px, #ead8af 1px 2px, #755636 2px 3px);
  box-shadow: 0 0.18rem 0.3rem rgb(24 11 4 / 45%);
  content: "";
  opacity: 0.72;
  pointer-events: none;
  transform: rotate(-0.08deg);
}

.paper-sheet {
  position: absolute;
  inset: 0.38rem 0.28rem 0.48rem 0.35rem;
  z-index: 0;
  overflow: hidden;
  background:
    var(--fiber-texture),
    radial-gradient(circle at 14% 13%, rgb(255 255 255 / 58%), transparent 25rem),
    radial-gradient(ellipse at 79% 72%, rgb(154 100 42 / 16%), transparent 23rem),
    radial-gradient(circle at 4% 61%, rgb(117 68 30 / 10%), transparent 16rem),
    repeating-linear-gradient(0deg, transparent 0 8px, rgb(86 59 35 / 3%) 8px 9px),
    linear-gradient(90deg, #efe3c5 0 48.8%, #d2bb8d 49.55%, #b99a68 49.93%, #e8d9b8 50.55%, #f1e4c6 100%);
  background-blend-mode: multiply, normal, multiply, multiply, multiply, normal;
  box-shadow:
    inset 0 0 5rem rgb(89 52 22 / 23%),
    inset 0 0 0 1px rgb(90 53 25 / 16%);
  clip-path: polygon(
    0.35% 0.8%, 2.5% 0.25%, 5.5% 0.7%, 9% 0.22%, 13% 0.55%, 18% 0.18%, 23% 0.6%, 29% 0.15%,
    35% 0.55%, 41% 0.12%, 48% 0.48%, 54% 0.1%, 61% 0.52%, 67% 0.16%, 74% 0.6%, 81% 0.14%,
    88% 0.5%, 94% 0.2%, 99.55% 0.72%, 99.8% 5%, 99.5% 11%, 99.87% 18%, 99.58% 27%,
    99.9% 36%, 99.55% 46%, 99.82% 57%, 99.45% 68%, 99.78% 78%, 99.42% 89%, 99.65% 99.15%,
    94% 99.7%, 88% 99.28%, 81% 99.82%, 74% 99.42%, 67% 99.78%, 60% 99.3%, 53% 99.74%,
    46% 99.36%, 39% 99.82%, 32% 99.3%, 25% 99.76%, 18% 99.38%, 11% 99.8%, 5% 99.34%, 0.42% 99.65%,
    0.72% 92%, 0.32% 84%, 0.68% 75%, 0.26% 65%, 0.62% 55%, 0.2% 44%, 0.65% 34%, 0.24% 24%,
    0.58% 14%, 0.25% 6%
  );
  filter: drop-shadow(0 0.35rem 0.3rem rgb(29 15 7 / 45%));
  pointer-events: none;
}

.paper-sheet::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(101deg, transparent 0 18%, rgb(94 60 31 / 8%) 18.1%, transparent 18.4%),
    linear-gradient(78deg, transparent 0 72%, rgb(255 255 255 / 17%) 72.1%, rgb(101 66 35 / 8%) 72.35%, transparent 72.7%),
    repeating-linear-gradient(89deg, transparent 0 76px, rgb(77 49 28 / 2%) 77px, transparent 78px);
  content: "";
  mix-blend-mode: multiply;
  opacity: 0.9;
}

.paper-sheet::after {
  position: absolute;
  inset: 0 auto 0 50%;
  width: clamp(1.2rem, 2.4vw, 2.4rem);
  background:
    linear-gradient(90deg, transparent 0, rgb(75 46 25 / 13%) 22%, rgb(52 31 18 / 25%) 44%, rgb(255 250 225 / 35%) 57%, rgb(94 59 29 / 9%) 74%, transparent 100%);
  box-shadow: -0.22rem 0 0.45rem rgb(75 46 25 / 8%);
  content: "";
  opacity: 0.9;
  transform: translateX(-50%) rotate(0.15deg);
}

.page-wear {
  position: absolute;
  inset: 0.6rem;
  z-index: 3;
  overflow: hidden;
  pointer-events: none;
}

.page-wear::before {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 2% 28%, rgb(107 63 28 / 24%), transparent 7%),
    radial-gradient(ellipse at 98% 17%, rgb(107 63 28 / 18%), transparent 8%),
    radial-gradient(ellipse at 94% 96%, rgb(107 63 28 / 20%), transparent 9%),
    radial-gradient(ellipse at 16% 98%, rgb(107 63 28 / 14%), transparent 8%),
    linear-gradient(90deg, rgb(96 56 25 / 12%), transparent 4% 96%, rgb(96 56 25 / 10%));
  content: "";
  mix-blend-mode: multiply;
}

.page-wear::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(8deg, transparent 0 24%, rgb(74 50 30 / 4%) 24.1% 24.25%, transparent 24.4%),
    linear-gradient(-4deg, transparent 0 81%, rgb(74 50 30 / 4%) 81.1% 81.25%, transparent 81.4%);
  content: "";
}

.water-ring {
  position: absolute;
  top: 7%;
  right: 5%;
  width: clamp(5rem, 10vw, 9rem);
  aspect-ratio: 1.08;
  border: clamp(2px, 0.22vw, 4px) solid rgb(113 72 36 / 12%);
  border-radius: 49% 51% 46% 54%;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 17%) inset,
    0.18rem 0.12rem 0 rgb(113 72 36 / 5%);
  opacity: 0.8;
  transform: rotate(18deg) scaleY(0.72);
}

.water-ring::after {
  position: absolute;
  inset: 0.28rem 0.18rem 0.2rem 0.35rem;
  border: 1px solid rgb(113 72 36 / 6%);
  border-radius: inherit;
  content: "";
}

.finger-smudge {
  position: absolute;
  bottom: 5%;
  left: 7%;
  width: clamp(3rem, 7vw, 6.5rem);
  height: clamp(1rem, 2vw, 1.8rem);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(99 61 31 / 13%), transparent 70%);
  filter: blur(0.16rem);
  transform: rotate(-11deg);
}

.fold-mark {
  position: absolute;
  width: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(92 58 29 / 13%) 16% 82%, transparent);
  box-shadow: 0 1px rgb(255 255 255 / 22%);
  opacity: 0.85;
}

.fold-mark-left {
  top: 64%;
  left: 1%;
  transform: rotate(-5deg);
}

.fold-mark-right {
  top: 38%;
  right: -3%;
  transform: rotate(4deg);
}

.paper-scar {
  position: absolute;
  top: -0.1rem;
  left: 22%;
  width: clamp(2.5rem, 6vw, 5.5rem);
  height: clamp(0.5rem, 1vw, 0.9rem);
  background: linear-gradient(168deg, rgb(75 46 25 / 28%) 0 20%, rgb(251 240 209 / 65%) 25% 48%, transparent 52%);
  clip-path: polygon(0 0, 14% 35%, 27% 8%, 43% 52%, 61% 13%, 76% 49%, 100% 6%, 100% 0);
}

.title-card {
  position: relative;
  z-index: 30;
  width: min(100%, 74rem);
  margin-inline: auto;
  text-align: center;
  animation: title-arrives 650ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.eyebrow {
  display: inline-block;
  margin: 0 0 0.08em;
  padding: 0.12em 0.38em 0.16em;
  color: var(--ink);
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: clamp(1.15rem, 2.75vw, 2.45rem);
  font-weight: 1000;
  letter-spacing: 0.055em;
  line-height: 1;
  text-transform: uppercase;
  background:
    var(--fiber-texture),
    linear-gradient(94deg, #ead8b7, #f7edcf 42%, #dfc99f);
  box-shadow: 0.12rem 0.18rem 0 rgb(79 48 25 / 17%);
  clip-path: polygon(1% 8%, 18% 3%, 38% 7%, 58% 2%, 78% 6%, 99% 1%, 98% 92%, 79% 97%, 56% 93%, 34% 98%, 16% 92%, 2% 97%);
  transform: rotate(-0.65deg);
}

h1 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.15rem, 0.75vw, 0.65rem);
  margin: 0;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: clamp(3.8rem, 9.4vw, 8.4rem);
  font-weight: 1000;
  letter-spacing: -0.07em;
  line-height: 0.9;
  text-transform: uppercase;
}

.name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.025em;
  white-space: nowrap;
}

.name-matt {
  transform: rotate(0.5deg);
}

.name-alex {
  transform: rotate(-0.45deg) translateY(0.02em);
}

.cut-letter {
  --letter-color: var(--red);
  --letter-turn: -1.4deg;
  --letter-y: 0;
  display: inline-grid;
  min-width: 0.66em;
  height: 0.98em;
  padding: 0.025em 0.018em 0.055em;
  place-items: center;
  color: var(--letter-color);
  -webkit-text-stroke: 0.038em #26313a;
  line-height: 0.82;
  paint-order: stroke fill;
  text-shadow:
    -0.055em -0.055em 0 #f7edcf,
    0.055em -0.055em 0 #f7edcf,
    -0.055em 0.055em 0 #f7edcf,
    0.055em 0.055em 0 #f7edcf,
    0 -0.065em 0 #f7edcf,
    0 0.065em 0 #f7edcf,
    -0.065em 0 0 #f7edcf,
    0.065em 0 0 #f7edcf,
    0.075em 0.095em 0 #4d514d;
  filter: drop-shadow(0.018em 0.025em 0 rgb(255 255 255 / 55%));
  transform: translateY(var(--letter-y)) rotate(var(--letter-turn));
}

.name-matt .cut-letter:nth-child(1) {
  --letter-color: #39bfd2;
  --letter-turn: -2.2deg;
  --letter-y: 0.02em;
}

.name-matt .cut-letter:nth-child(2) {
  --letter-color: #ef7930;
  --letter-turn: 1.4deg;
  --letter-y: -0.025em;
}

.name-matt .cut-letter:nth-child(3) {
  --letter-color: #db4e45;
  --letter-turn: -0.7deg;
  --letter-y: 0.015em;
}

.name-matt .cut-letter:nth-child(4) {
  --letter-color: #e9b62c;
  --letter-turn: 2deg;
  --letter-y: -0.015em;
}

.name-alex .cut-letter:nth-child(1) {
  --letter-color: #38bcd0;
  --letter-turn: 1.8deg;
  --letter-y: 0.015em;
}

.name-alex .cut-letter:nth-child(2) {
  --letter-color: #eb762e;
  --letter-turn: -1.3deg;
  --letter-y: -0.025em;
}

.name-alex .cut-letter:nth-child(3) {
  --letter-color: #d94d43;
  --letter-turn: 0.7deg;
  --letter-y: 0.02em;
}

.name-alex .cut-letter:nth-child(4) {
  --letter-color: #67a955;
  --letter-turn: -2deg;
  --letter-y: -0.01em;
}

.ampersand {
  display: inline-block;
  padding: 0.15em 0.18em 0.2em;
  color: #f7edcf;
  -webkit-text-stroke: 0.09em #26313a;
  font-family: "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  font-size: 0.42em;
  font-weight: 1000;
  letter-spacing: 0;
  line-height: 1;
  paint-order: stroke fill;
  text-shadow: 0.13em 0.16em 0 #4d514d;
  transform: rotate(-4deg) translateY(0.04em);
}

.scribble {
  display: table;
  margin: 0.72rem auto 0;
  padding: 0.05em 0.35em 0.1em;
  font-family: "Marker Felt", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: clamp(0.95rem, 1.7vw, 1.35rem);
  font-weight: 700;
  background: linear-gradient(transparent 72%, rgb(182 128 63 / 22%) 72% 86%, transparent 86%);
  transform: rotate(-1.35deg);
}

.memory-collage {
  position: relative;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(0.35rem, 1vw, 1rem) 0;
  width: 100%;
  margin-top: clamp(1.5rem, 3vw, 3rem);
  padding: clamp(0.5rem, 1vw, 1rem) 0 clamp(2.5rem, 5vw, 5rem);
}

.memory {
  --deckle: polygon(1% 2%, 15% 0.6%, 29% 1.7%, 43% 0.4%, 58% 1.4%, 73% 0.5%, 87% 1.8%, 99% 0.8%, 98.5% 23%, 99.4% 44%, 98.7% 67%, 99.2% 85%, 98% 99%, 81% 98.2%, 65% 99.4%, 48% 98.5%, 31% 99.3%, 14% 98.1%, 1.2% 99%, 1.8% 78%, 0.6% 59%, 1.5% 37%, 0.4% 18%);
  --mount: #eee0bd;
  --x: 0;
  --y: 0;
  position: relative;
  margin: 0;
  padding: clamp(0.38rem, 0.58vw, 0.62rem) clamp(0.38rem, 0.58vw, 0.62rem) clamp(1.65rem, 2.35vw, 2.35rem);
  background: transparent;
  isolation: isolate;
  transform: translate(var(--x), var(--y)) rotate(var(--tilt));
  transform-origin: center;
  transition: opacity 180ms ease, transform 180ms ease, filter 180ms ease;
  animation: memory-arrives 580ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.memory::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    var(--fiber-texture),
    radial-gradient(circle at 9% 12%, rgb(255 255 255 / 48%), transparent 28%),
    radial-gradient(ellipse at 89% 92%, rgb(115 67 29 / 16%), transparent 24%),
    linear-gradient(105deg, var(--mount), #f8edcf 52%, #d8c096);
  box-shadow:
    inset 0 0 1.25rem rgb(94 53 23 / 17%),
    inset 0 0 0 1px rgb(79 48 27 / 17%);
  clip-path: var(--deckle);
  content: "";
  filter:
    drop-shadow(0 0.85rem 0.7rem rgb(54 34 20 / 25%))
    drop-shadow(0 0.18rem 0.08rem rgb(54 34 20 / 24%));
}

.memory::after {
  position: absolute;
  inset: clamp(0.38rem, 0.58vw, 0.62rem);
  z-index: 3;
  background:
    linear-gradient(111deg, transparent 0 32%, rgb(255 255 255 / 11%) 32.2%, transparent 33%),
    radial-gradient(ellipse at 7% 88%, rgb(94 53 24 / 13%), transparent 17%),
    radial-gradient(ellipse at 93% 8%, rgb(94 53 24 / 10%), transparent 15%),
    var(--fiber-texture);
  clip-path: polygon(0.8% 1.2%, 99% 0.5%, 99.2% 99%, 0.5% 98.6%);
  content: "";
  mix-blend-mode: multiply;
  opacity: 0.46;
  pointer-events: none;
}

.memory img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgb(58 43 33 / 25%);
  box-shadow:
    0 0 0 1px rgb(255 250 230 / 36%),
    inset 0 0 0.6rem rgb(73 44 24 / 18%);
  clip-path: polygon(0.35% 0.7%, 99.4% 0.25%, 99.7% 98.9%, 0.6% 99.6%);
  filter: sepia(0.08) saturate(0.93) contrast(0.98) brightness(0.98);
}

.memory figcaption {
  position: absolute;
  right: 0.55rem;
  bottom: 0.22rem;
  left: 0.55rem;
  z-index: 2;
  overflow: hidden;
  color: #302631;
  font-family: "Marker Felt", "Bradley Hand", "Comic Sans MS", cursive;
  font-size: clamp(0.72rem, 1.25vw, 1.05rem);
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  text-overflow: ellipsis;
  text-shadow: 0 1px rgb(255 250 225 / 52%);
  white-space: nowrap;
  transform: rotate(-0.45deg);
}

.memory-select {
  position: absolute;
  inset: 0;
  z-index: 7;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 0.45rem;
  color: transparent;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}

.memory-select:focus-visible {
  outline: 0.24rem solid #126f92;
  outline-offset: -0.6rem;
}

.memory:hover,
.memory:focus-within {
  z-index: 25;
  filter: drop-shadow(0 1.4rem 1.1rem rgb(54 34 20 / 19%));
  transform: translate(var(--x), calc(var(--y) - 0.35rem)) rotate(0) scale(1.015);
}

.memory-collage.has-active .memory:not(.is-active) {
  opacity: 0.66;
  filter: saturate(0.72) brightness(0.88);
}

.memory-collage.has-active .memory:not(.is-active):hover,
.memory-collage.has-active .memory:not(.is-active):focus-within {
  opacity: 0.86;
}

.memory.is-active,
.memory.is-active:hover,
.memory.is-active:focus-within {
  z-index: 100;
  opacity: 1;
  filter: drop-shadow(0 1.8rem 1.35rem rgb(36 22 13 / 34%));
  transform: translate(var(--x), var(--y)) rotate(0) scale(1.075);
}

.memory-avocado {
  --tilt: -7.4deg;
  --mount: #dfcca2;
  --x: -2%;
  --y: 0.8rem;
  grid-column: 1 / 6;
  grid-row: 2;
  z-index: 1;
  animation-delay: 170ms;
}

.memory-lunar {
  --tilt: 4.1deg;
  --mount: #e8d8b5;
  --x: 1.5%;
  --y: -0.2rem;
  grid-column: 6 / 13;
  grid-row: 2;
  z-index: 3;
  animation-delay: 240ms;
}

.memory-big-box {
  --tilt: -2.9deg;
  --mount: #e6d2a9;
  --x: 0.5%;
  --y: -0.7rem;
  grid-column: 1 / 7;
  grid-row: 1;
  z-index: 5;
  animation-delay: 30ms;
}

.memory-car-wash {
  --tilt: 5.7deg;
  --mount: #eadbb8;
  --x: 1.8%;
  --y: 0.35rem;
  grid-column: 7 / 13;
  grid-row: 3;
  z-index: 4;
  animation-delay: 310ms;
}

.memory-coastal {
  --tilt: 3.1deg;
  --mount: #dac397;
  --deckle: polygon(1.2% 0.7%, 14% 1.4%, 28% 0.3%, 43% 1.5%, 58% 0.4%, 73% 1.7%, 88% 0.5%, 99% 1.2%, 98.3% 19%, 99.4% 38%, 98.6% 59%, 99.5% 78%, 98.1% 99%, 82% 98.2%, 66% 99.3%, 49% 98.4%, 32% 99.5%, 15% 98.3%, 0.8% 99%, 1.7% 81%, 0.5% 62%, 1.5% 41%, 0.4% 20%);
  --x: 1.2%;
  --y: -0.2rem;
  grid-column: 7 / 13;
  grid-row: 1;
  z-index: 6;
  animation-delay: 100ms;
}

.memory-costco {
  --tilt: -4.4deg;
  --mount: #dfc99f;
  --x: -1.5%;
  --y: 0.6rem;
  grid-column: 1 / 7;
  grid-row: 3;
  z-index: 7;
  animation-delay: 380ms;
}

.memory-dmv {
  --tilt: -2.5deg;
  --mount: #e7d6af;
  --x: -0.5%;
  --y: -1rem;
  grid-column: 1 / 8;
  grid-row: 4;
  z-index: 9;
  animation-delay: 450ms;
}

.memory-hammock {
  --tilt: 6.6deg;
  --mount: #ead9b2;
  --deckle: polygon(0.8% 1.6%, 17% 0.4%, 33% 1.4%, 49% 0.3%, 66% 1.7%, 82% 0.6%, 99% 1.4%, 98.4% 21%, 99.5% 43%, 98.7% 64%, 99.3% 83%, 98.2% 98.8%, 84% 98.1%, 68% 99.4%, 51% 98.4%, 34% 99.5%, 18% 98.2%, 1% 99%, 1.8% 79%, 0.5% 57%, 1.4% 35%, 0.3% 17%);
  --x: 2%;
  --y: 0.4rem;
  grid-column: 8 / 13;
  grid-row: 4;
  z-index: 8;
  animation-delay: 520ms;
}

.memory-supermarket {
  --tilt: 3.8deg;
  --mount: #e1c99e;
  --x: 1.4%;
  --y: -0.7rem;
  grid-column: 6 / 13;
  grid-row: 5;
  z-index: 10;
  animation-delay: 590ms;
}

.memory-rome {
  --tilt: -5.2deg;
  --mount: #ebdbb9;
  --x: -1.8%;
  --y: 0.8rem;
  grid-column: 1 / 6;
  grid-row: 5;
  z-index: 11;
  animation-delay: 660ms;
}

.memory-standup {
  --tilt: -3.2deg;
  --mount: #ddc59b;
  --x: -0.8%;
  --y: -0.9rem;
  grid-column: 1 / 7;
  grid-row: 6;
  z-index: 13;
  animation-delay: 730ms;
}

.memory-wedding {
  --tilt: 4.6deg;
  --mount: #ead9b4;
  --x: 1.2%;
  --y: 0.35rem;
  grid-column: 7 / 13;
  grid-row: 6;
  z-index: 12;
  animation-delay: 800ms;
}

.memory-camping {
  --tilt: -5.7deg;
  --mount: #dbc294;
  --x: -1.4%;
  --y: 0.7rem;
  grid-column: 1 / 6;
  grid-row: 7;
  z-index: 14;
  animation-delay: 870ms;
}

.memory-petrol {
  --tilt: 3.3deg;
  --mount: #ead6ad;
  --x: 1%;
  --y: -0.55rem;
  grid-column: 6 / 13;
  grid-row: 7;
  z-index: 15;
  animation-delay: 940ms;
}

.tape {
  position: absolute;
  z-index: 5;
  width: clamp(3.3rem, 6vw, 6rem);
  height: clamp(1rem, 1.9vw, 1.65rem);
  opacity: 0.72;
  background:
    var(--fiber-texture),
    linear-gradient(96deg, rgb(150 117 54 / 25%), transparent 14% 82%, rgb(119 88 36 / 20%)),
    repeating-linear-gradient(0deg, rgb(255 244 184 / 25%) 0 2px, transparent 2px 5px),
    rgb(218 190 118 / 91%);
  box-shadow:
    0 0.14rem 0.18rem rgb(59 41 24 / 26%),
    inset 0 1px rgb(255 255 255 / 37%);
  clip-path: polygon(0 11%, 5% 19%, 1% 31%, 6% 44%, 2% 59%, 7% 73%, 1% 91%, 20% 96%, 43% 92%, 63% 97%, 82% 91%, 100% 96%, 96% 79%, 100% 63%, 95% 47%, 99% 31%, 94% 14%, 76% 5%, 57% 9%, 38% 4%, 19% 10%);
  pointer-events: none;
}

.tape::before {
  position: absolute;
  inset: 14% 8%;
  background: linear-gradient(94deg, transparent 0 42%, rgb(255 255 255 / 19%) 47%, rgb(107 79 33 / 12%) 51%, transparent 57%);
  content: "";
  transform: skewX(-8deg);
}

.tape::after {
  position: absolute;
  right: 6%;
  bottom: 0;
  width: 19%;
  height: 15%;
  background: rgb(89 61 25 / 16%);
  border-radius: 50%;
  content: "";
  filter: blur(1px);
}

.tape-top {
  top: -0.63rem;
  left: 50%;
  transform: translateX(-50%) rotate(-2.7deg);
}

.memory-hammock .tape-top {
  transform: translateX(-50%) rotate(2.2deg);
}

.tape-left {
  top: 42%;
  left: -2.25rem;
  transform: rotate(-91deg);
}

.tape-right {
  top: 42%;
  right: -2.25rem;
  transform: rotate(86deg);
}

@keyframes title-arrives {
  from {
    opacity: 0;
    transform: translateY(-1rem) scale(0.96);
  }
}

@keyframes memory-arrives {
  from {
    opacity: 0;
    transform: translate(var(--x), calc(var(--y) + 1.5rem)) rotate(var(--tilt)) scale(0.94);
  }
}

@media (max-width: 760px) {
  .scrapbook-shell {
    padding: 0.65rem;
  }

  .scrapbook {
    min-height: 56rem;
    padding: 2.55rem 1rem 2rem;
    border-width: 0.55rem;
  }

  .paper-sheet {
    inset: 0.28rem 0.2rem 0.38rem;
    background:
      var(--fiber-texture),
      radial-gradient(circle at 18% 14%, rgb(255 255 255 / 48%), transparent 18rem),
      radial-gradient(ellipse at 81% 72%, rgb(154 100 42 / 14%), transparent 16rem),
      repeating-linear-gradient(0deg, transparent 0 8px, rgb(91 65 39 / 3%) 8px 9px),
      #efe3c5;
  }

  .paper-sheet::after {
    display: none;
  }

  .fold-mark-right,
  .water-ring {
    opacity: 0.42;
  }

  h1 {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0.18rem 0.5rem;
    font-size: clamp(3.2rem, 19vw, 5.7rem);
  }

  .name-matt {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .ampersand {
    grid-column: 1;
    grid-row: 2;
    align-self: center;
    justify-self: end;
  }

  .name-alex {
    grid-column: 2;
    grid-row: 2;
  }

  .eyebrow {
    font-size: clamp(1.05rem, 5.4vw, 1.65rem);
  }

  .ampersand {
    font-size: 0.21em;
  }

  .scribble {
    max-width: 28ch;
    margin-top: 0.8rem;
  }

  .memory-collage {
    row-gap: 0;
    margin-top: 2rem;
    padding: 0 0.15rem 2rem;
  }

  .memory {
    --x: 0;
    --y: 0;
    grid-column: 1 / -1;
    grid-row: auto;
    z-index: auto;
    margin-top: -1.15rem;
  }

  .memory:first-child {
    margin-top: 0;
  }

  .memory:nth-child(odd) {
    --tilt: -1.5deg;
    --x: -1.2%;
  }

  .memory:nth-child(even) {
    --tilt: 1.4deg;
    --x: 1.2%;
  }

  .memory:hover,
  .memory:focus-within {
    transform: translate(var(--x), -0.2rem) rotate(0) scale(1.008);
  }

  .memory.is-active,
  .memory.is-active:hover,
  .memory.is-active:focus-within {
    transform: translate(var(--x), 0) rotate(0) scale(1.025);
  }

  .memory figcaption {
    font-size: clamp(0.68rem, 3vw, 0.9rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}