:root {
  color-scheme: light;
  --font-date-time: "Brush Script MT", "Segoe Print", "Bradley Hand", cursive;
  --route-ink: rgb(92 51 31);
  --text-shadow-color: #f9ecb6;
  font-family:
    Inter,
    ui-sans-serif,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  color: #27221e;
  background: #d7c9b6;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-width: 320px;
}

body {
  text-shadow: 0 0 14px var(--text-shadow-color);
}

.page {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  padding: clamp(1.5rem, 4vw, 4rem) clamp(1.25rem, 8vw, 10rem) 20vh;
}

.paper {
  position: fixed;
  z-index: -2;
  inset: 0;
  overflow: hidden;
  background-color: #d7c9b6;
  pointer-events: none;
}

.paper-image {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 100vw;
  height: auto;
  max-width: none;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  filter: blur(3px);
  will-change: transform;
}

.paper::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(
    180deg,
    rgb(255 252 246 / 0.08),
    rgb(65 45 30 / 0.12)
  );
  pointer-events: none;
}

.route {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100vw;
  pointer-events: none;
}

.route-grid {
  stroke: #b99b86;
  stroke-width: 1;
  shape-rendering: crispEdges;
  transition: opacity 180ms ease;
}

.route-labels {
  fill: #6e5040;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  filter: drop-shadow(0 0 8px var(--text-shadow-color));
  transition: opacity 180ms ease;
}

.grid-hidden .route-grid,
.grid-hidden .route-labels {
  opacity: 0;
}

.route-path {
  stroke: var(--route-ink);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: var(--route-line-width, 22px);
  filter: drop-shadow(0 4px 8px rgb(66 35 19 / 0.18));
}

.route-waypoint {
  fill: var(--route-ink);
  stroke: var(--text-shadow-color);
  stroke-width: var(--route-waypoint-stroke-width, 5px);
  filter: drop-shadow(0 0 8px var(--text-shadow-color));
}

.route-start {
  fill: none;
  stroke: var(--route-ink);
  stroke-width: var(--route-start-stroke-width, 14px);
  filter: drop-shadow(0 4px 8px rgb(66 35 19 / 0.18));
}

.route-end {
  stroke: var(--route-ink);
  stroke-linecap: square;
  stroke-width: var(--route-end-stroke-width, 18px);
  filter: drop-shadow(0 4px 8px rgb(66 35 19 / 0.18));
}

.stortemelk-image {
  position: absolute;
  z-index: 1;
  display: block;
  left: -200vw;
  height: auto;
  max-width: none;
  transform: translate3d(0, 0, 0);
  filter: sepia(1);
  will-change: transform;
}

.eckernfoerde-coa-image {
  position: absolute;
  z-index: 1;
  display: block;
  height: auto;
  max-width: none;
  transform: rotate(-15deg);
  transform-origin: center;
  filter: sepia(1);
}

.mt-polaroid-image {
  position: absolute;
  z-index: 1;
  display: block;
  height: auto;
  max-width: none;
  filter: sepia(1);
  transform: rotate(10deg);
  transform-origin: center;
  will-change: transform;
}

.mt-polaroid-image.is-spinning {
  animation: polaroid-spin 620ms linear both;
}

@keyframes polaroid-spin {
  from { transform: rotate(10deg) scale(0.04); }
  to { transform: rotate(3610deg) scale(1); }
}

.eckernfoerde-map-image {
  position: absolute;
  z-index: -1;
  display: block;
  height: auto;
  max-width: none;
  transform: rotate(-7deg);
  transform-origin: center;
  will-change: transform;
}

.framed-photo-image {
  position: absolute;
  z-index: 1;
  display: block;
  height: auto;
  max-width: none;
  filter: sepia(1);
  transform: rotate(5deg);
  transform-origin: center;
}

.framed-photo-image.is-wobbling {
  animation: framed-photo-wobble 780ms cubic-bezier(0.32, 0.01, 0.28, 1);
}

.blowing-image {
  position: absolute;
  z-index: 1;
  display: block;
  height: auto;
  max-width: none;
  will-change: transform;
}

.video-medallion {
  position: absolute;
  z-index: 1;
  padding: clamp(5px, 1.2vw, 15px);
  overflow: hidden;
  border-radius: 50%;
  background: var(--route-ink);
  box-shadow: 0 5px 12px rgb(54 29 13 / 0.35);
  transform-origin: center;
  will-change: transform;
}

.video-medallion__viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 2px solid var(--route-ink);
  border-radius: 50%;
  background: #20140d;
}

.video-medallion video {
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: auto;
  height: 100%;
  max-width: none;
  filter: sepia(1);
  transform: translateX(-50%);
  transition: filter 900ms ease;
}

@media (hover: hover) {
  .video-medallion:hover video {
    filter: sepia(0);
  }
}

@keyframes framed-photo-wobble {
  0% { transform: rotate(5deg); }
  15% { transform: rotate(0deg); }
  34% { transform: rotate(8.5deg); }
  52% { transform: rotate(2deg); }
  70% { transform: rotate(9.5deg); }
  86% { transform: rotate(4deg); }
  100% { transform: rotate(5deg); }
}

.anchor-tile-band {
  position: absolute;
  z-index: -1;
  display: flex;
  overflow: hidden;
}

.anchor-tile-band img {
  display: block;
  flex: 0 0 var(--anchor-tile-size);
  width: var(--anchor-tile-size);
  height: var(--anchor-tile-height);
  object-fit: cover;
  filter: sepia(1);
  transition: filter 650ms ease, transform 420ms ease;
}

.anchor-tile-band img.is-color-cycling {
  animation: anchor-tile-color-wave 1.667s ease-in-out both;
  animation-delay: var(--anchor-tile-delay);
}

.anchor-tile-band img:first-child {
  margin-left: var(--anchor-first-tile-offset);
}

.anchor-tile-band img:nth-child(even) {
  transform: scaleX(-1);
}

@media (hover: hover) {
  .anchor-tile-band img:hover {
    animation: none;
    filter: sepia(0);
    transform: scale(1.045);
  }

  .anchor-tile-band img:nth-child(even):hover {
    transform: scaleX(-1) scale(1.045);
  }
}

@keyframes anchor-tile-color-wave {
  0%, 1%, 100% { filter: sepia(1); }
  4% { filter: sepia(0); }
  7% { filter: sepia(0); }
  12% { filter: sepia(1); }
}

.stortemelk-image,
.eckernfoerde-coa-image,
.mt-polaroid-image,
.framed-photo-image {
  transition: filter 900ms ease;
}

@media (hover: hover) {
  .stortemelk-image:hover,
  .eckernfoerde-coa-image:hover,
  .mt-polaroid-image:hover,
  .framed-photo-image:hover {
    filter: sepia(0);
  }
}

.matrix-heading {
  position: absolute;
  z-index: 2;
  margin: 0;
}

.matrix-title {
  position: absolute;
  z-index: 2;
  margin: 0;
}

.matrix-copy {
  position: absolute;
  z-index: 2;
}

.date-time-heading {
  margin: 0;
  color: var(--route-ink);
  font-family: var(--font-date-time);
  font-size: clamp(1.15rem, 5.2vw, 5.5rem);
  font-weight: 400;
  line-height: 0.88;
  transform: rotate(-1.5deg);
  transform-origin: left center;
}

.date-time-copy {
  margin: 0 !important;
  color: var(--route-ink);
  font-family: var(--font-date-time);
  font-size: clamp(1rem, 4.6vw, 4.75rem);
  font-weight: 400;
  line-height: 0.92;
}

.matrix-copy p {
  margin: 1rem 0 0;
  font-size: clamp(0.9rem, 1.8vw, 1.45rem);
  line-height: 1.45;
}

.matrix-copy--copy p {
  margin-top: 0;
}

@media (max-width: 600px) {
  .matrix-copy p {
    font-size: clamp(0.78rem, 3.2vw, 0.9rem);
    line-height: 1.32;
  }
}

.scroll-reveal {
  opacity: 0;
  transform: translate3d(0, clamp(2rem, 6vw, 5rem), 0);
  transition: opacity 1400ms ease, transform 1400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.scroll-reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.content {
  position: relative;
  z-index: 0;
  width: min(100%, 44rem);
}

.intro {
  padding-top: 13vh;
}

.eyebrow {
  margin: 0 0 1rem;
  color: #6e5040;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.17em;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin-top: 0;
}

h1,
h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 0.95;
}

h1 {
  max-width: 13ch;
  margin-bottom: 1.75rem;
  font-size: clamp(2rem, 9.5vw, 9rem);
}
h2 {
  max-width: inherit;
  margin-bottom: 0;
  font-size: clamp(1.7rem, 7vw, 6.5rem);
}

.lead {
  max-width: 40rem;
  margin-bottom: 0;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  line-height: 1.5;
}

.note {
  margin-top: clamp(26rem, 58vh, 48rem);
  margin-left: auto;
  padding: clamp(1.4rem, 3vw, 2.5rem);
  border: 1px solid rgb(39 34 30 / 0.25);
  background: rgb(255 252 245 / 0.32);
  box-shadow: 0 18px 40px rgb(65 45 30 / 0.1);
  backdrop-filter: blur(2px);
}

.note p {
  margin-bottom: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  line-height: 1.35;
}

.closing {
  margin-top: 760vh;
}

@media (prefers-reduced-motion: reduce) {
  .paper-image {
    transform: none !important;
  }

  .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .mt-polaroid-image.is-spinning {
    animation: none;
  }

  .framed-photo-image.is-wobbling {
    animation: none;
  }

  .anchor-tile-band img.is-color-cycling {
    animation: none;
  }
}