* { box-sizing: border-box; }
body { margin: 0; background: #142720; color: #faf5e6; font: 16px/1.8 system-ui, sans-serif; }
.cover { display: grid; isolation: isolate; }
.scene, .cover::after, .layout { grid-area: 1 / 1; }
.scene { z-index: -2; position: relative; }
.scene img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; }
.cover::after { content: ""; z-index: -1; background: linear-gradient(0deg, #101d17 0%, #101d17e8 23%, #101d1722 72%), linear-gradient(180deg, #101d17bf, transparent 24%); }
.layout { display: grid; grid-template-rows: auto 1fr auto; min-height: 100vh; min-height: 100svh; padding: clamp(22px, 4vw, 25px) clamp(20px, 6vw, 96px) 20px; }
header, footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; }
.wordmark { font-size: 23px; font-weight: 700; letter-spacing: 2px; }
.status { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid #faf5e678; background: #142720df; }
.status::before { content: ""; width: 7px; height: 7px; background: #ff926a; border-radius: 50%; }
.intro { align-self: end; padding: clamp(130px, 21vh, 260px) 0 clamp(28px, 5vw, 64px); }
.location { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: #ffe0bd; font-size: 13px; letter-spacing: .15em; }
.location::before { content: ""; width: 30px; height: 2px; background: #ff926a; }
h1 { margin: 0; font-size: clamp(50px, 9vw, 132px); font-weight: 850; line-height: 1.06; letter-spacing: -.045em; }
.description { max-width: 28em; margin: 18px 0 0; color: #f6edda; font-size: clamp(16px, 1.45vw, 21px); }
footer { padding-top: 14px; border-top: 1px solid #faf5e640; color: #e4ddca; }
a { color: inherit; text-underline-offset: .18em; }
a:focus-visible { outline: 2px solid #ff926a; outline-offset: 4px; }
@media (max-width: 760px) {
  .wordmark { font-size: clamp(17px, 4.4vw, 23px); }
  .scene img { object-position: 70% center; }
  .cover::after { background: linear-gradient(0deg, #101d17 0%, #101d17ef 29%, #101d1722 72%, #101d17bf 100%); }
  .layout { min-height: max(620px, 100svh); }
}
