/* Support Us page: the sleeping dragon and tip jar (1774 x 887, 2:1).
   Loaded after site.css; shared navigation, buttons and footer styles come from there.

   Artwork landmarks (artwork pixels): open wooden floor x ~320-880; tip jar x 900-1070,
   y 500-640, with coins to y ~745; dragon x 950-1530, y 260-650; foreground scroll, compass
   and books along the bottom right. The message is centred on the open floor (x ~600). */

/* ---------- Desktop: height-first scene, message in the open floor area ---------- */

.support {
  position: relative;
  height: var(--vh);
  overflow: hidden;
  background: var(--walnut-950);
}

/* Narrower windows crop the sides, centred so both the message area and the dragon survive;
   wider windows centre the scene on solid walnut. The artwork is never blurred or feathered. */
.support__stage {
  --w: calc(var(--vh) * 2);
  position: absolute;
  top: 0;
  left: max(calc((100% - var(--w)) * .57), calc((100% - var(--w)) / 2));
  width: var(--w);
  aspect-ratio: 1774 / 887;
  container-type: inline-size;
}

.support__art {
  position: absolute;
  inset: 0;
}
.support__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.support__message {
  position: absolute;
  left: 33.82%;
  top: 50%;
  z-index: 2;
  width: 30.5%;
  transform: translate(-50%, -50%);
  font-size: clamp(15px, 1.08cqw, 24px);
  line-height: 1.5;
  text-align: center;
  color: #f7ecd6;
  text-shadow:
    0 1px 2px #000,
    0 0 8px rgba(0, 0, 0, .9),
    0 0 18px rgba(0, 0, 0, .6);
}
/* A soft pool of shade behind the words so they stay readable over the sunlit floorboards. */
.support__message::before {
  content: "";
  position: absolute;
  inset: -10% -14%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(16, 8, 3, .62), rgba(16, 8, 3, .38) 62%, transparent);
  pointer-events: none;
}
.support__message h1 {
  margin: 0 0 .55em;
  font-size: 1.95em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .01em;
  color: #ffe2a6;
}
.support__message p { margin: 0 0 .7em; }
.support__sign {
  font-family: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  font-size: 1.6em;
  line-height: 1.1;
  color: #ffe8bf;
}
.support__message p.support__sign { margin: .15em 0 .85em; }

.support__cta {
  width: auto;
  min-height: 3em;
  padding: .65em 1.7em;
  font-size: 1.08em;
}

/* ---------- Portrait and phone ----------
   The supplied portrait artwork (941 x 1672) is the full-width hero. The dragon and tip jar sit
   in its upper half (artwork y ~300-900); the message starts on the open floor below the coins
   and scroll (artwork y 930) and continues past the painting's lower edge, which darkens softly
   into the walnut page so the scene and the message read as one. Same condition as the homepage
   layout switch, duplicated in the <source media> attributes in support/index.html. */

@media (max-aspect-ratio: 7/5), (max-width: 760px) {
  .support { height: auto; overflow: visible; }

  .support__stage {
    position: relative;
    left: auto;
    width: min(100%, 680px);
    margin: 0 auto;
    aspect-ratio: auto;
    container-type: inline-size;
  }
  .support__art {
    position: relative;
    display: block;
  }
  .support__art img { height: auto; }
  .support__art::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 54%, rgba(20, 11, 5, .38) 66%, rgba(20, 11, 5, .72) 86%, var(--walnut-950));
    pointer-events: none;
  }

  /* Pull the message up onto the floor: 177.69cqw is the artwork's height, and the floor
     starts 55.6% of the way down, so the remaining 44.4% (78.9cqw) overlaps. */
  .support__message {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    max-width: 34em;
    margin: -78.9cqw auto 0;
    padding: 0 22px 30px;
    transform: none;
    font-size: clamp(16px, 4.2cqw, 19px);
    line-height: 1.45;
  }
  .support__message::before { display: none; }
  .support__message h1 { font-size: 1.75em; margin-bottom: .4em; }
  .support__message p { margin-bottom: .55em; }
  .support__message p.support__sign { margin: .05em 0 .6em; }
  .support__sign { font-size: 1.7em; }
  .support__cta {
    width: min(100%, 340px);
    font-size: 1.1em;
  }
}