@font-face {
  font-family: Caveat;
  src: url("assets/memorial/fonts/Caveat[wght].ttf") format("truetype");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

@font-face {
  font-family: "Allura Memorial";
  src: url("assets/memorial/fonts/Allura-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.hero-scroll-runway {
  position: relative;
  height: 220svh;
  background: #302318;
}

.hero {
  font-family: "Times New Roman", Times, serif;
  position: sticky;
  top: var(--hero-sticky-top, 0px);
  z-index: 0;
  isolation: isolate;
  width: 100%;
  height: 100svh;
  overflow: hidden;
  background: #302318;
}

.hero__artboard {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(100vw, 177.58svh);
  aspect-ratio: 1671 / 941;
  overflow: hidden;
  container-type: inline-size;
  background: #dfa15b;
  transform: translate(-50%, -50%);
}

.hero__scene,
.hero__scene img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero__scene { z-index: 0; }
.hero__scene img { object-fit: cover; }

.hero__tree,
.hero__ground,
.hero__gear,
.hero__frame,
.hero__portrait,
.hero__signs,
.hero__left-copy,
.hero__right-copy,
.hero__header-motto,
.hero__plaque-copy,
.hero__header {
  position: absolute;
}

.hero__tree {
  z-index: 2;
  top: -6%;
  left: -2%;
  width: 24%;
  margin: 0;
}

.hero__tree img {
  width: 100%;
  height: auto;
}

.hero__portrait {
  z-index: 3;
  top: 11.9%;
  left: 39.44%;
  width: 21.42%;
  aspect-ratio: 358 / 524;
  overflow: hidden;
  border-radius: 50% 50% 0 0 / 31% 31% 0 0;
  background: #df9b4b;
}

.hero__portrait img {
  position: absolute;
  top: -21.374%;
  left: -184.078%;
  width: 466.76%;
  max-width: none;
  height: auto;
}

.hero__frame {
  z-index: 4;
  top: 10.5%;
  left: 32.4%;
  width: 35.67%;
  height: auto;
  max-width: none;
  pointer-events: none;
}

.hero__plaque-copy {
  z-index: 8;
  top: 70%;
  left: 39%;
  width: 22%;
  color: #24180e;
  text-align: center;
  text-shadow: 0 1px 0 rgb(247 212 155 / 58%);
  pointer-events: none;
}

.hero__plaque-name,
.hero__plaque-motto {
  margin: 0;
  text-transform: uppercase;
}

.hero__plaque-name {
  font-size: 1.5cqw;
  font-weight: 600;
  letter-spacing: .035em;
  line-height: 1.05;
}

.hero__plaque-motto {
  margin-top: .3cqw;
  font-size: .82cqw;
  letter-spacing: .16em;
  line-height: 1.35;
}

.hero__signs {
  z-index: 6;
  top: 12.5%;
  left: .4%;
  display: grid;
  width: 9.6%;
  gap: .4cqw;
}

.hero__sign {
  position: relative;
  display: grid;
  min-height: 3.35cqw;
  place-items: center;
  overflow: hidden;
  border: .2cqw solid #52321c;
  border-radius: .38cqw;
  background: #89562d url("assets/memorial/generated/wood-tile.png") center / cover;
  box-shadow: 0 .3cqw .6cqw rgb(25 16 9 / 48%), inset 0 0 1.2cqw rgb(39 21 9 / 42%);
  color: #17100b;
  font-size: 1.25cqw;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 0 rgb(238 195 133 / 65%);
  text-transform: uppercase;
  transform: rotate(-2deg);
}

.hero__sign:nth-child(even) { transform: rotate(1.5deg); }
.hero__sign:hover { filter: brightness(1.1); }
.hero__sign:focus-visible { z-index: 2; outline-color: #fff0ce; }

.hero__left-copy {
  z-index: 6;
  top: 19%;
  left: 15.5%;
  width: 25.2%;
  color: #21170f;
}

.hero__eyebrow {
  margin: 0 0 1.75cqw;
  font-size: 1cqw;
  letter-spacing: .16em;
  line-height: 1.35;
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__eyebrow::after {
  display: block;
  width: 3.1cqw;
  height: .12cqw;
  margin-top: .85cqw;
  background: #a8792d;
  content: "";
}

.hero__left-copy h1 {
  margin: 0;
  font-size: 4.85cqw;
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: .9;
}

.hero__name {
  margin: .55cqw 0 0;
  font-size: 2.45cqw;
  font-weight: 500;
  line-height: 1.1;
  white-space: nowrap;
}

.hero__tribute {
  margin: .7cqw 0 0;
  font-size: 1.85cqw;
  font-style: italic;
  line-height: 1.1;
  white-space: nowrap;
}

.hero__rule {
  display: block;
  width: 3.1cqw;
  height: .12cqw;
  margin: 1.9cqw 0 1.35cqw;
  background: #a8792d;
}

.hero__description {
  margin: 0;
  font-size: 1.25cqw;
  line-height: 1.35;
}

.hero__right-copy {
  z-index: 6;
  top: 19.2%;
  left: 68.2%;
  width: 22%;
  color: #21170f;
}

.hero__script {
  margin: 0;
  font-family: "Allura Memorial", cursive;
  font-size: 3.25cqw;
  font-weight: 400;
  line-height: .9;
  transform: rotate(-4deg);
}

.hero__right-copy .hero__rule { margin: 1.6cqw 0 1.2cqw; }

.hero__right-message {
  margin: 0;
  font-size: 1.2cqw;
  letter-spacing: .13em;
  line-height: 1.55;
  text-transform: uppercase;
}

.hero__rule--short { width: 3.7cqw; margin-top: 1.15cqw !important; }

.hero__header {
  z-index: 9;
  inset: 0;
  pointer-events: none;
}

.hero__brand,
.hero__navigation,
.hero__header-motto {
  position: absolute;
  pointer-events: auto;
}

.hero__brand {
  top: 3.15%;
  left: 15%;
  width: 4.7%;
  color: #a8792d;
}

.hero__brand svg { width: 100%; height: auto; }

.hero__navigation {
  top: 3.45%;
  left: 33.5%;
  display: flex;
  width: 32.3%;
  align-items: flex-start;
  justify-content: space-between;
}

.hero__link {
  position: relative;
  padding: 0 .45cqw .45cqw;
  color: #17130f;
  font-size: 1.32cqw;
  line-height: 1.35;
  text-decoration: none;
  white-space: nowrap;
}

.hero__link--current { font-weight: 700; }

.hero__link--current::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: .12cqw;
  background: #a8792d;
  content: "";
}

.hero__header-motto {
  z-index: 9;
  top: 3.5%;
  right: 4.8%;
  width: 10.5%;
  margin: 0;
  color: #211a13;
  font-size: .91cqw;
  font-weight: 500;
  letter-spacing: .25em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
}

.hero__header-motto span { display: block; white-space: nowrap; }
.hero__header-motto i { display: block; width: 29%; height: .12cqw; margin: .55cqw auto 0; background: #a8792d; }

.hero__gear {
  z-index: 8;
  right: .5%;
  bottom: 1%;
  width: auto;
  height: 70%;
  max-width: none;
  pointer-events: none;
}

.hero__gear img { width: auto; height: 100%; max-width: none; }

.hero__ground {
  z-index: 7;
  right: -6%;
  bottom: 0;
  width: 112%;
  margin: 0;
  pointer-events: none;
}

.hero__ground img { width: 100%; height: auto; }

.hero__portrait,
.hero__frame,
.hero__ground,
.hero__tree,
.hero__signs,
.hero__gear,
.hero__scene {
  --parallax-y: 0px;
  translate: 0 var(--parallax-y);
  will-change: translate;
}

.hero__scene { --parallax-y: 0px; }

.hero__header a:focus-visible {
  outline-color: #fff0ce;
  outline-offset: .25cqw;
}

@media (max-width: 900px) {
  .hero-scroll-runway { height: 220svh; }
  .hero { height: 100svh; min-height: 0; }

  .hero__artboard {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    transform: none;
  }

  .hero__tree {
    top: 22%;
    left: -7%;
    width: 42%;
    height: 50%;
    overflow: hidden;
  }

  .hero__tree img { width: 100%; height: 100%; object-fit: contain; object-position: left top; }

  .hero__portrait {
    top: 27%;
    left: 28%;
    width: 44%;
    aspect-ratio: 358 / 524;
  }

  .hero__frame {
    top: 20%;
    left: 14.5%;
    width: 71%;
  }

  .hero__plaque-copy {
    top: 51.5%;
    left: 31%;
    width: 38%;
  }

  .hero__plaque-name { font-size: 3.1cqw; }
  .hero__plaque-motto { margin-top: .5cqw; font-size: 1.55cqw; letter-spacing: .12em; }

  .hero__signs {
    top: 34%;
    left: 1.5%;
    width: 22%;
    gap: .8cqw;
  }

  .hero__sign {
    min-height: 5.9cqw;
    border-width: .4cqw;
    border-radius: .8cqw;
    box-shadow: 0 .7cqw 1.4cqw rgb(25 16 9 / 50%), inset 0 0 2.2cqw rgb(39 21 9 / 42%);
    font-size: 3.2cqw;
  }

  .hero__left-copy,
  .hero__right-copy { display: contents; }

  .hero__eyebrow {
    position: absolute;
    z-index: 6;
    top: 13%;
    left: 4%;
    width: 50%;
    margin: 0;
    font-size: 2.05cqw;
    letter-spacing: .08em;
    white-space: normal;
  }

  .hero__eyebrow::after { width: 8cqw; height: .45cqw; margin-top: 1.1cqw; }

  .hero__left-copy h1 {
    position: absolute;
    z-index: 6;
    top: 16.5%;
    left: 4%;
    width: 49%;
    font-size: 5.55cqw;
    line-height: .99;
  }

  .hero__name {
    position: absolute;
    z-index: 6;
    top: 59%;
    left: 5%;
    width: 55%;
    margin: 0;
    font-size: 4.3cqw;
    white-space: normal;
  }

  .hero__tribute {
    position: absolute;
    z-index: 6;
    top: 62.6%;
    left: 5%;
    width: 55%;
    margin: 0;
    font-size: 3.8cqw;
    white-space: normal;
  }

  .hero__rule { display: none; }

  .hero__description {
    position: absolute;
    z-index: 6;
    top: 66.5%;
    left: 5%;
    width: 58%;
    margin: 0;
    font-size: 3.15cqw;
    line-height: 1.3;
  }

  .hero__script {
    position: absolute;
    z-index: 6;
    top: 13.5%;
    right: 4%;
    width: 39%;
    margin: 0;
    font-size: 9cqw;
    line-height: .88;
  }

  .hero__right-message {
    position: absolute;
    z-index: 6;
    top: 59.2%;
    right: 4%;
    width: 31%;
    margin: 0;
    font-size: 2.55cqw;
    letter-spacing: .08em;
    line-height: 1.4;
  }

  .hero__header { z-index: 10; }

  .hero__brand {
    top: 1.2%;
    left: 4%;
    width: 8%;
  }

  .hero__navigation {
    top: 1.7%;
    left: 16%;
    width: 80%;
  }

  .hero__link {
    padding: 0 .5cqw 1cqw;
    font-size: 3.35cqw;
  }

  .hero__link--current::after { height: .5cqw; }

  .hero__header-motto {
    top: 6.2%;
    right: 5%;
    width: 42%;
    font-size: 2.15cqw;
    letter-spacing: .19em;
    line-height: 1.3;
  }

  .hero__header-motto span { display: inline; }
  .hero__header-motto span + span::before { content: " "; }
  .hero__header-motto i { width: 14%; height: .45cqw; margin-top: .8cqw; }

  .hero__gear {
    z-index: 5;
    right: -2%;
    bottom: -8%;
    width: 31%;
    height: 32%;
    overflow: hidden;
  }

  .hero__gear img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }

  .hero__ground {
    z-index: 7;
    right: -7%;
    bottom: -6%;
    width: 116%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__scene,
  .hero__tree,
  .hero__portrait,
  .hero__frame,
  .hero__ground,
  .hero__gear { translate: none; will-change: auto; }
}

/* Keep the layered composition readable when the portrait layout stacks. */
@media (max-width: 900px) {
  .hero-scroll-runway { height: max(220svh, calc(980px + 120svh)); }
  .hero { min-height: 980px; }
  .hero__artboard { min-height: 980px; width: min(100%, 440px); left: 50%; transform: translateX(-50%); }
  .hero { background: #302318 url("assets/memorial/generated/hero-scene-mobile.png") center / cover no-repeat; }
  .hero__scene { translate: none; }
  .hero__tree { top: 205px; left: -5%; width: 43%; height: auto; overflow: visible; }
  .hero__tree img { width: 100%; height: auto; object-fit: initial; }
  .hero__portrait { top: 228px; left: 35%; width: 47%; }
  .hero__frame { top: 221px; left: 19.5%; width: 78.2%; }
  .hero__plaque-copy { top: calc(221px + 73cqw); left: 32%; width: 51%; }
  .hero__plaque-name { font-size: max(12px, 3.1cqw); line-height: 1; }
  .hero__plaque-motto { margin-top: 1px; font-size: 12px; letter-spacing: .03em; line-height: 1; }
  .hero__signs { top: 290px; left: 3%; width: 25%; gap: 7px; }
  .hero__sign { min-height: 36px; font-size: 14px; }
  .hero__eyebrow { top: 86px; left: 5%; width: 90%; font-size: 14px; }
  .hero__left-copy h1 { top: 121px; left: 5%; width: 57%; font-size: clamp(30px, 8cqw, 54px); }
  .hero__name { top: 597px; left: 5%; width: 60%; font-size: 26px; }
  .hero__tribute { top: 636px; left: 5%; width: 61%; font-size: 20px; }
  .hero__description { top: 689px; left: 5%; width: 55%; font-size: 16px; line-height: 1.4; }
  .hero__script { top: 120px; right: 4%; width: 31%; font-size: 32px; line-height: .9; }
  .hero__right-message { top: 613px; right: 4%; width: 31%; font-size: 16px; letter-spacing: .02em; line-height: 1.4; }
  .hero__brand { top: 15px; }
  .hero__navigation { top: 19px; }
  .hero__link { font-size: 16px; }
  .hero__header-motto { top: 52px; right: 4%; width: 75%; font-size: 14px; letter-spacing: .08em; }
  .hero__gear { z-index: 8; right: 2%; bottom: 2%; width: auto; height: 190px; overflow: visible; }
  .hero__gear img { width: auto; height: 100%; object-fit: initial; }
  .hero__ground { bottom: 0; right: -7%; width: 116%; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__signs { translate: none; will-change: auto; }
}


/* These five linked crops retain the boards from the approved source artwork. */
.hero__sign {
  aspect-ratio: 160 / 65;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background-image: url("assets/memorial/generated/hero-signs-transparent.png");
  background-size: 1044.375% auto;
  background-position: left calc(var(--sign-source-y) * 100% / 876);
  box-shadow: none;
  transform: none;
}
.hero__sign:nth-child(even) { transform: none; }
.hero__sign span { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; }
.hero__tree { top: 0; left: 0; width: auto; height: 100%; }
.hero__tree img { width: auto; height: 100%; max-width: none; }
@media(max-width:900px) {
  .hero__tree { top: 205px; left: -3%; height: 775px; width: auto; overflow: visible; }
  .hero__tree img { width: auto; height: 100%; }
  .hero__signs { top: 290px; left: 0; width: 28%; gap: 0; }
  .hero__sign { min-height: 0; }
}
.hero__tree { mask-image: linear-gradient(to right, #000 0 27%, transparent 43%); }
@media(max-width:900px) {
  .hero-scroll-runway { height: max(220svh, calc(1100px + 120svh)); }
  .hero, .hero__artboard { min-height: 1100px; }
  .hero__tree { left: -6%; height: 895px; mask-image: linear-gradient(to right, #000 0 20%, transparent 37%); }
  .hero__name, .hero__tribute { left: 20%; width: 76%; }
  .hero__description { left: 20%; width: 43%; }
  .hero__right-message { top: 689px; }
}
@media(min-width:901px) { .hero__ground { right: -1%; } }
@media(max-width:900px) {
  .hero__tree {
    mask-image: linear-gradient(to right, #000 0 20%, transparent 37%), linear-gradient(to bottom, transparent, #000 4%);
    mask-composite: intersect;
  }
}

.hero__artboard::before {
  position: absolute;
  z-index: 1;
  top: 12%;
  left: 11.5%;
  width: 30%;
  height: 66%;
  background: radial-gradient(ellipse, rgb(255 240 208 / 90%) 0%, rgb(255 238 203 / 78%) 42%, transparent 74%);
  filter: blur(18px);
  content: "";
  pointer-events: none;
}
.hero__source-plaque {
  position: absolute;
  z-index: 8;
  top: 67.8%;
  left: 33.87%;
  width: 32.016%;
  aspect-ratio: 535 / 115;
  background: url("assets/memorial/backdrops/hero-backdrop.png") 49.82394% 77.48184% / 312.33645% auto no-repeat;
  pointer-events: none;
}
@media(min-width:901px) {
  .hero__plaque-copy { width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media(max-width:900px) {
  .hero__source-plaque { display: none; }
  .hero__artboard::before { display: none; }
  .hero__artboard::after {
    position: absolute;
    z-index: 1;
    top: 570px;
    left: 13%;
    width: 89%;
    height: 300px;
    background: radial-gradient(ellipse, rgb(255 240 208 / 87%) 0%, rgb(255 238 203 / 60%) 48%, transparent 76%);
    filter: blur(14px);
    content: "";
    pointer-events: none;
  }
}


.hero__source-plaque::before {
  position: absolute;
  inset: 5% 18% 6%;
  background: url("assets/memorial/generated/hero-frame-v2.png") 40% 88% / 315% auto no-repeat;
  content: "";
  pointer-events: none;
}
.hero__source-plaque .hero__plaque-copy {
  top: 50%;
  left: 50%;
  width: 64%;
  height: auto;
  overflow: visible;
  clip-path: none;
  transform: translate(-50%, -50%);
  color: #21160d;
  text-align: center;
}
.hero__source-plaque .hero__plaque-name { font-size: 32px; font-weight: 500; line-height: 1.1; letter-spacing: .015em; }
.hero__source-plaque .hero__plaque-motto { margin-top: 3px; font-size: 17px; line-height: 1.25; letter-spacing: .03em; }
@media(max-width:900px) {
  .hero__source-plaque { display: block; top: 498px; left: 15%; width: 85%; }
  .hero__source-plaque .hero__plaque-name { font-size: 24px; line-height: 1.1; }
  .hero__source-plaque .hero__plaque-motto { margin-top: 2px; font-size: 14px; line-height: 1.15; letter-spacing: 0; }
}
.hero__source-plaque::before {
  filter: brightness(.94) saturate(.88);
  box-shadow: inset 0 0 15px rgb(133 79 34 / 24%);
  mask-image: linear-gradient(to right, transparent, #000 2%, #000 98%, transparent), linear-gradient(to bottom, transparent, #000 3%, #000 97%, transparent);
  mask-composite: intersect;
}
.hero__source-plaque .hero__plaque-name { font-size: min(32px, 1.92cqw); }
.hero__source-plaque .hero__plaque-motto { font-size: min(17px, 1.02cqw); }
@media(max-width:900px) {
  .hero__source-plaque .hero__plaque-copy { width: 68%; }
  .hero__source-plaque .hero__plaque-name { font-size: clamp(20px, 6.15cqw, 24px); }
  .hero__source-plaque .hero__plaque-motto { font-size: clamp(12px, 3.6cqw, 14px); letter-spacing: -.015em; }
}


/* The overscan keeps the rocky base connected below the moving dock. */
.hero__shore-base {
  position: absolute;
  z-index: 1;
  left: -6%;
  bottom: -26svh;
  width: 112%;
  height: calc(200px + 26svh);
  background: #493a25 url("assets/memorial/generated/hero-ground.png") left bottom / 200% auto no-repeat;
  mask-image: linear-gradient(to bottom, transparent, #000 50px);
  --parallax-y: 0px;
  translate: 0 var(--parallax-y);
  will-change: translate;
  pointer-events: none;
}
.hero__ground { bottom: 50px; }
.hero__gear { bottom: calc(1% + 50px); }
@media(max-width:900px) {
  .hero__shore-base { height: calc(110px + 26svh); mask-image: linear-gradient(to bottom, transparent, #000 28px); background-size: 200% auto; }
  .hero__ground { bottom: 32px; }
  .hero__gear { bottom: calc(2% + 32px); }
}
@media(prefers-reduced-motion:reduce) {
  .hero__shore-base { translate: none; will-change: auto; }
}

.hero__sign { background-color:transparent; }
.hero__shore-base { background-size: 250% auto; }
@media(max-width:900px) { .hero__shore-base { background-size: 500% auto; } }
.hero__ground { mask-image: linear-gradient(to bottom, #000 calc(100% - 8px), transparent); }

.hero__ground { mask-image:linear-gradient(to bottom,#000 0 calc(100% - 18px),transparent 100%); }

.hero__artboard { background:transparent; }

/* The viewport owns the scenery; portrait offsets share a width-based anchor. */
@media(min-width:901px) {
  .hero__artboard { inset:0; width:100%; height:100%; aspect-ratio:auto; transform:none; overflow:visible; --portrait-anchor: max(65px, calc((100svh - 56.3136vw) / 2 + 5.913vw)); }
  .hero__frame { top:var(--portrait-anchor); }
  .hero__portrait { top:calc(var(--portrait-anchor) + .788vw); }
  .hero__source-plaque { top:calc(var(--portrait-anchor) + 32.268vw); }
  .hero__left-copy { top:calc(var(--portrait-anchor) + 4.787vw); }
  .hero__right-copy { top:calc(var(--portrait-anchor) + 4.9vw); }
  .hero__signs { top:calc(var(--portrait-anchor) + 1.127vw); gap:0; }
  .hero__tree { top:0; height:100%; }
  .hero__ground { bottom:0; }
  .hero__gear { bottom:1%; }
  .hero__shore-base { bottom:-26svh; height:calc(80px + 26svh); }
}
/* Each board is clipped along its own slanted wood edge, excluding source scenery. */
.hero__sign { background-image:url("assets/memorial/backdrops/hero-backdrop.png"); aspect-ratio:160 / 79; background-size:1044.375% auto; background-position:left calc(var(--sign-source-y) * 100% / 862); clip-path:polygon(0 0,96% 34%,100% 42%,99% 91%,95% 98%,0 65%); }
.hero__sign:nth-child(2) { aspect-ratio:160 / 72; background-position:left calc(var(--sign-source-y) * 100% / 869); clip-path:polygon(0 0,96% 27%,100% 34%,99% 92%,95% 99%,0 76%); margin-top:-.45cqw; }
.hero__sign:nth-child(3) { aspect-ratio:160 / 61; background-position:left calc(var(--sign-source-y) * 100% / 880); clip-path:polygon(0 0,96% 18%,100% 25%,99% 91%,96% 98%,0 88%); margin-top:-.16cqw; }
.hero__sign:nth-child(4) { aspect-ratio:160 / 59; background-position:left calc(var(--sign-source-y) * 100% / 882); clip-path:polygon(0 4%,97% 0,100% 9%,99% 83%,96% 92%,0 99%); margin-top:.18cqw; }
.hero__sign:nth-child(5) { aspect-ratio:160 / 65; background-position:left calc(var(--sign-source-y) * 100% / 876); clip-path:polygon(0 9%,96% 0,100% 9%,99% 70%,95% 80%,0 98%); margin-top:.05cqw; }
.hero__sign:focus-visible { filter:brightness(1.3) drop-shadow(0 0 3px #fff); }
@media(max-width:900px) {
 .hero__artboard { width:100%; max-width:none; }
 .hero__signs { width:109px; }
 .hero__sign:nth-child(2) { margin-top:-5px; }
 .hero__sign:nth-child(3) { margin-top:-2px; }
 .hero__sign:nth-child(4) { margin-top:2px; }
 .hero__sign:nth-child(5) { margin-top:1px; }
}
@media(max-width:900px) {
 .hero__artboard { width:min(100%,440px); overflow:visible; }
 .hero__ground { width:116vw; right:calc((100% - 100vw) / 2 - 7vw); }
 .hero__shore-base { width:116vw; left:calc((100% - 100vw) / 2 - 7vw); }
 .hero__gear { right:calc((100% - 100vw) / 2 + 2vw); }
 .hero__tree { top:-50px; left:calc((100% - 100vw) / 2 - 50px); height:1150px; mask-image:linear-gradient(to right,#000 0 20%,transparent 37%); }
 .hero__source-plaque { top:calc(221px + 71cqw); }
}
@media(max-width:900px) {
 .hero__signs { left:calc((100% - 100vw) / 2 + 4px); }
 .hero__name { top:650px; }
 .hero__tribute { top:689px; }
 .hero__description, .hero__right-message { top:738px; }
}
/* Overscan offsets the apron’s own travel so it still reaches the viewport edge at full progress. */
.hero__shore-base { bottom:-26svh; height:calc(80px + 26svh); background-color:transparent; }
@media(max-width:900px) { .hero__shore-base { bottom:-26svh; height:calc(110px + 26svh); } }
@media(max-width:900px) {
 .hero__tree { mask-image:linear-gradient(to right,#000 0 20%,transparent 37%),linear-gradient(to bottom,transparent 0 16%,#000 25%); mask-composite:intersect; }
}

@media(max-width:900px) {
  .hero__name { top:590px; }
  .hero__tribute { top:630px; }
  .hero__description { top:674px; font-size:14px; line-height:1.3; }
  .hero__right-message { top:674px; font-size:14px; letter-spacing:.02em; line-height:1.3; }
}

/* Keep the mobile tribute between the portrait and the connected dock foreground. */
@media(max-width:900px) {
  .hero__tree { mask-image:linear-gradient(to right,#000 0 20%,transparent 37%),linear-gradient(to bottom,transparent 0 16%,#000 25% 94%,transparent 100%); }
  .hero__name { top:620px; }
  .hero__tribute { top:660px; }
  .hero__description, .hero__right-message { top:708px; }
  .hero__ground { bottom:130px; }
  .hero__gear { bottom:138px; height:212px; }
  .hero__right-message { z-index:9; text-shadow:0 0 3px #ffe4ac,0 0 5px #ffe4ac; }
  .hero__shore-base { height:calc(227px + 26svh); background:#493a25 url("assets/memorial/generated/hero-ground.png") left bottom / 500% 250% no-repeat; }
}