:root {
  --night: #160d0a;
  --soot: #2a140c;
  --rust: #c8582f;
  --rust-deep: #8e3517;
  --dust: #f1dcc0;
  --dust-dim: #c4a688;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --sign: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --gutter: clamp(20px, 5vw, 72px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--night); color: var(--dust); -webkit-text-size-adjust: 100%; }
body { font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; min-height: 100svh; }

.kicker { font: 500 .75rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; }
h1 { font: 900 clamp(2.6rem, 4.6vw, 4.8rem)/.88 var(--sign); text-transform: uppercase; letter-spacing: .01em; margin: .22em 0 .2em; }
.lede { font-size: clamp(1rem, 1.35vw, 1.2rem); font-weight: 500; }
.lede sup { font-size: .7em; line-height: 0; }
.lede a { text-decoration: none; padding: 0 .1em; }

.manifest { font: 400 .8rem/1.4 var(--mono); }
.manifest dt { color: var(--dust-dim); text-transform: uppercase; letter-spacing: .14em; }
.manifest dd span { color: var(--dust-dim); }
.fine { font: .72rem/1.5 var(--mono); color: var(--dust-dim); }

/* The photo fills the window, the title sits in the Martian sky and the
   manifest runs along the ground like a shipping label. */
main { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.hero { position: absolute; inset: 0; }
.hero picture { display: block; height: 100%; }
.hero img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(250 236 220 / .38), rgb(250 236 220 / 0) 32%),
    linear-gradient(to top, rgb(22 13 10 / .9), rgb(22 13 10 / .55) 13%, rgb(22 13 10 / 0) 26%);
}

.copy { position: absolute; top: max(clamp(20px, 4vh, 44px), env(safe-area-inset-top)); left: var(--gutter); right: var(--gutter); color: var(--soot); }
.kicker, .lede a { color: var(--rust-deep); }

.strip { position: absolute; left: var(--gutter); right: var(--gutter); bottom: max(clamp(16px, 3.5vh, 36px), env(safe-area-inset-bottom)); }
.manifest { display: flex; flex-wrap: wrap; gap: .4rem 2.2rem; }
.manifest div { display: flex; gap: .7rem; }
.fine {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 2rem;
  margin-top: .8rem; padding-top: .7rem; border-top: 1px solid rgb(241 220 192 / .18);
}

/* Portrait (phones, upright tablets): a separate tall render of the same scene
   (trading-post-portrait.jpg via <picture>), the title and manifest stacked,
   and more of the ground darkened for them. */
@media (max-aspect-ratio: 1/1) {
  .hero img { object-position: 50% 60%; }
  .hero::after {
    background:
      linear-gradient(to bottom, rgb(250 236 220 / .45), rgb(250 236 220 / 0) 30%),
      linear-gradient(to top, rgb(22 13 10 / .92), rgb(22 13 10 / .6) 22%, rgb(22 13 10 / 0) 40%);
  }
  h1 { font-size: clamp(2.6rem, 12vw, 4.4rem); }
  .lede { font-size: 1.05rem; }
  .manifest { display: grid; gap: .3rem; }
  .manifest div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0; }
  .fine { display: grid; gap: .4rem; }
}

/* Phones taller than the 9:16 render: show it full width from the top rather than
   cropping the price board and road sign off the sides; the ground fades into the night below. */
@media (max-aspect-ratio: 9/16) {
  .hero picture, .hero img { height: auto; }
}

/* Short landscape windows (a phone on its side): there's no room to overlay,
   so show the whole photo with the copy below it. */
@media (max-height: 559px) and (min-aspect-ratio: 1/1) {
  main { height: auto; min-height: 0; overflow: visible; display: flex; flex-direction: column; }
  .hero, .copy, .strip { position: static; }
  .hero img { height: auto; }
  .hero::after { display: none; }
  .copy { order: -1; padding: 20px var(--gutter) 16px; color: var(--dust); }
  .kicker, .lede a { color: var(--rust); }
  .strip { padding: 20px var(--gutter) 28px; }
}