:root {
  --color-surface: #0b5c55;
  --color-underground: #06403b;
  --color-stratum-middle: #053831;
  --color-stratum-deep: #043029;
  --color-tunnel: #0f5951;
  --color-rule: #1d5a53;
  --color-text: #f2faf8;
  --color-text-muted: #a9d6cf;
  --color-worm: #f7b6c2;
  --color-worm-eye: #06403b;
  --color-card: #e4f4f1;
  --color-card-title: #06403b;
  --color-card-body: #2e6a63;
  --color-card-remember-title: #4a1621;
  --color-card-remember-body: #6e2d3a;

  --font-rounded: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --gutter: 24px;
  --frame-width: 1200px;
  --hero-padding-top: 24px;
  --hero-gap: 48px;
  --hero-body-gap: 40px;
  --hero-copy-gap: 20px;
  --hero-worm-width: 100%;
  --brand-mark-width: 28px;
  --brand-mark-height: 15px;
  --brand-size: 18px;
  --display-size: 64px;
  --display-leading: 64px;
  --lede-size: 20px;
  --lede-leading: 28px;
  --underground-padding-top: 64px;
  --underground-padding-bottom: 40px;
  --section-gap: 80px;
  --digging-gap: 32px;
  --section-heading-size: 32px;
  --section-heading-leading: 40px;
  --closing-size: 36px;
  --closing-leading: 40px;
  --closing-gap: 16px;
  --card-width: 100%;
  --card-padding-block: 20px;
  --card-padding-inline: 24px;
  --card-gap: 4px;
  --card-radius: 20px;
  --card-title-size: 22px;
  --card-title-leading: 28px;
  --card-body-size: 16px;
  --tunnel-depth: 48px;
  --tunnel-inset: 25.75%;
  --tunnel-bore-width: 24px;
  --tunnel-worm-width: 14px;
  --footer-direction: column;
  --footer-gap: 4px;
  --peek-size: 40px;
}

@media (min-width: 768px) {
  :root {
    --gutter: 48px;
    --hero-padding-top: 40px;
    --hero-gap: 64px;
    --hero-body-gap: 48px;
    --hero-copy-gap: 24px;
    --hero-worm-width: 496px;
    --brand-mark-width: 30px;
    --brand-mark-height: 16px;
    --brand-size: 20px;
    --display-size: 96px;
    --display-leading: 92px;
    --lede-size: 24px;
    --lede-leading: 32px;
    --underground-padding-top: 96px;
    --underground-padding-bottom: 64px;
    --section-gap: 96px;
    --digging-gap: 48px;
    --section-heading-size: 40px;
    --section-heading-leading: 48px;
    --closing-size: 56px;
    --closing-leading: 60px;
    --closing-gap: 24px;
    --card-width: min(480px, 60%);
    --card-padding-block: 24px;
    --card-padding-inline: 32px;
    --card-gap: 8px;
    --card-radius: 24px;
    --card-title-size: 24px;
    --card-title-leading: 32px;
    --card-body-size: 17px;
    --tunnel-depth: 96px;
    --tunnel-inset: calc(var(--card-width) / 2);
    --tunnel-bore-width: 32px;
    --tunnel-worm-width: 20px;
    --footer-direction: row;
    --footer-gap: 24px;
    --peek-size: 48px;
  }
}

@media (min-width: 1280px) {
  :root {
    --hero-gap: 96px;
    --hero-copy-gap: 32px;
    --display-size: 128px;
    --display-leading: 120px;
    --section-gap: 128px;
    --section-heading-size: 48px;
    --section-heading-leading: 56px;
    --closing-size: 72px;
    --closing-leading: 76px;
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-underground);
  color: var(--color-text);
  font-family: var(--font-rounded);
  font-synthesis: none;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ol {
  margin: 0;
}

.frame {
  width: min(var(--frame-width), 100% - 2 * var(--gutter));
  margin-inline: auto;
}

.surface {
  background: var(--color-surface);
  overflow: clip;
}

.hero {
  display: flex;
  flex-direction: column;
  gap: var(--hero-gap);
  padding-top: var(--hero-padding-top);
}

.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--brand-size);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 24px;
}

.brand-mark {
  flex-shrink: 0;
  width: var(--brand-mark-width);
  height: var(--brand-mark-height);
  fill: none;
  stroke: var(--color-worm);
  stroke-width: 5.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-body {
  display: flex;
  flex-direction: column;
  gap: var(--hero-body-gap);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: var(--hero-copy-gap);
}

h1 {
  font-size: var(--display-size);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: var(--display-leading);
}

.lede {
  color: var(--color-text-muted);
  font-size: var(--lede-size);
  font-weight: 500;
  line-height: var(--lede-leading);
}

.hero-worm {
  display: block;
  flex-shrink: 0;
  align-self: flex-end;
  width: var(--hero-worm-width);
  max-width: 100%;
  height: auto;
}

.hero-worm path {
  fill: none;
  stroke: var(--color-worm);
  stroke-width: 64;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-worm circle {
  fill: var(--color-worm-eye);
}

@media (min-width: 1280px) {
  .hero-body {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .hero-copy {
    flex: 1 1 0;
    padding-bottom: 96px;
  }
}

.underground {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
  padding-top: var(--underground-padding-top);
  padding-bottom: var(--underground-padding-bottom);
  background: var(--color-underground);
  overflow: clip;
}

.strata {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.stratum-middle {
  fill: var(--color-stratum-middle);
}

.stratum-deep {
  fill: var(--color-stratum-deep);
}

.strata-wide {
  display: none;
}

@media (min-width: 768px) {
  .strata-wide {
    display: block;
  }

  .strata-narrow {
    display: none;
  }
}

.underground-body,
.site-footer {
  position: relative;
}

.underground-body {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.digging {
  display: flex;
  flex-direction: column;
  gap: var(--digging-gap);
}

h2 {
  font-size: var(--section-heading-size);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: var(--section-heading-leading);
}

.burrow {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
}

.chamber {
  display: flex;
  flex-direction: column;
}

.card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  width: var(--card-width);
  padding: var(--card-padding-block) var(--card-padding-inline);
  border-radius: var(--card-radius);
  background: var(--color-card);
  rotate: -1deg;
}

.chamber:nth-child(even) .card {
  align-self: flex-end;
  rotate: 1deg;
}

.card h3 {
  color: var(--color-card-title);
  font-size: var(--card-title-size);
  font-weight: 700;
  line-height: var(--card-title-leading);
}

.card p {
  color: var(--color-card-body);
  font-size: var(--card-body-size);
  font-weight: 500;
  line-height: 24px;
}

.card-remember {
  background: var(--color-worm);
}

.card-remember h3 {
  color: var(--color-card-remember-title);
}

.card-remember p {
  color: var(--color-card-remember-body);
}

.tunnel {
  position: relative;
  height: var(--tunnel-depth);
  margin-inline: var(--tunnel-inset);
}

.tunnel-shape,
.tunnel-crawl {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tunnel-shape path {
  fill: none;
  vector-effect: non-scaling-stroke;
}

.tunnel-crawl {
  position: absolute;
  inset: 0;
  visibility: hidden;
}

.tunnel-bore {
  stroke: var(--color-tunnel);
  stroke-width: var(--tunnel-bore-width);
}

.tunnel-worm {
  stroke: var(--color-worm);
  stroke-width: var(--tunnel-worm-width);
  stroke-linecap: round;
}

.tunnel-worm-wide {
  display: none;
}

@media (min-width: 768px) {
  .tunnel-worm-wide {
    display: inline;
  }

  .tunnel-worm-narrow {
    display: none;
  }
}

.moved-in {
  display: flex;
  flex-direction: column;
  gap: var(--closing-gap);
}

.peeking-worm {
  display: none;
  width: var(--peek-size);
  height: var(--peek-size);
  margin-top: calc(var(--lede-leading) - var(--peek-size));
  margin-left: 8px;
  vertical-align: bottom;
}

.peeking-worm path {
  fill: none;
  stroke: var(--color-worm);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.peeking-worm circle {
  fill: var(--color-underground);
}

.moved-in-heading {
  font-size: var(--closing-size);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: var(--closing-leading);
}

.moved-in-sentence,
.moved-in-sentence > span {
  display: block;
}

@media (min-width: 768px) {
  .moved-in-sentence > span {
    display: inline;
  }
}

.site-footer {
  display: flex;
  flex-direction: var(--footer-direction);
  justify-content: space-between;
  gap: var(--footer-gap);
  padding-top: 24px;
  border-top: 1px solid var(--color-rule);
  color: var(--color-text-muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .crawl-ready .surface {
      view-timeline: --surface block;
    }

    .crawl-ready .chamber {
      view-timeline: --chamber block;
    }

    .crawl-ready .hero-worm {
      animation: dive linear both;
      animation-timeline: --surface;
      animation-range: exit 0% exit 80%;
    }

    .crawl-ready .tunnel-worm {
      display: none;
    }

    .crawl-ready .tunnel-crawl {
      visibility: visible;
    }

    .crawl-ready .crawling-worm {
      fill: none;
      stroke: var(--color-worm);
      stroke-width: var(--tunnel-worm-width);
      stroke-linecap: round;
      stroke-dasharray: var(--worm-body) 3;
      animation: crawl linear both;
      animation-timeline: --chamber;
      animation-range: entry 45vh entry calc(100% + 45vh);
    }

    .crawl-ready .peeking-worm {
      display: inline-block;
      view-timeline: --peek block;
    }

    .crawl-ready .peeking-body {
      animation: peek linear both;
      animation-timeline: --peek;
      animation-range: entry 100% cover 18%;
    }
  }
}

@keyframes dive {
  to {
    transform: translateY(100%);
  }
}

@keyframes crawl {
  from {
    stroke-dashoffset: var(--worm-body);
  }

  to {
    stroke-dashoffset: -1;
  }
}

@keyframes peek {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}