:root {
  --navy: #071427;
  --navy2: #0a1c3a;
  --orange: #e26a1a;
  --amber: #f0a04a;
  --crimson: #b11a2b;
  --cream: #f3e6d2;
  --mute: #c9c4b8;
  --line: rgba(243,230,210,.18);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; min-height: 100%;
  background: var(--navy);
  color: var(--cream);
  font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
}
.sky {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 85% 42% at 50% 118%, #c45c18 0%, #8a2818 28%, transparent 58%),
    radial-gradient(ellipse 40% 28% at 78% 86%, #e07a28 0%, transparent 70%),
    linear-gradient(180deg, #071427 0%, #0a1c3a 38%, #12284a 62%, #3a2a48 78%, #c45c18 100%);
  pointer-events: none;
}
.jump {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-wrap: wrap; gap: .45rem;
  padding: .65rem 1rem;
  background: rgba(7,20,39,.92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.jump a {
  color: var(--cream);
  text-decoration: none;
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .45rem .7rem;
  border: 1px solid var(--line);
}
.jump a:hover { border-color: var(--crimson); background: rgba(177,26,43,.25); }
.hero {
  position: relative; z-index: 1;
  min-height: 70vh;
  display: grid;
  align-items: end;
}
.hero img, .hero .hero-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: right center;
  z-index: 0;
}
.hero-copy {
  position: relative; z-index: 1;
  max-width: 42rem;
  margin: 0 auto;
  padding: 18vh 1.5rem 3rem;
  background: linear-gradient(90deg, rgba(7,20,39,.88) 0%, rgba(7,20,39,.55) 55%, transparent 100%);
  width: 100%;
}
.mark {
  letter-spacing: .42em; text-transform: uppercase; font-size: .68rem;
  color: var(--mute); margin: 0 0 .75rem;
}
.rule {
  width: 3.2rem; height: 1px; background: var(--crimson); margin: 0 0 1.15rem;
  border: 0;
}
h1 {
  font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.4rem); line-height: 1.15; margin: 0 0 1rem;
  letter-spacing: .01em;
}
.lede { margin: 0; color: var(--mute); font-size: 1.05rem; }
main {
  position: relative; z-index: 1;
  max-width: 42rem; margin: 0 auto; padding: 2rem 1.5rem 4rem;
}
.panel {
  padding: 2.5rem 0 2rem;
  border-top: 1px solid var(--line);
}
.panel-tight { padding-top: 1.5rem; padding-bottom: 0.5rem; border-top: 0; }
.panel h2 {
  font-weight: 400;
  font-size: 1.45rem;
  letter-spacing: .02em;
  margin: 0 0 1rem;
}
.panel-art {
  display: block; width: 100%; height: auto;
  margin: 0 0 1.25rem;
  border: 1px solid var(--line);
}
.panel p {
  margin: 0 0 1rem;
  line-height: 1.45;
  font-size: 1.02rem;
}
.cta {
  font-size: 1.05rem; margin: 0 0 1.15rem; color: var(--cream);
  letter-spacing: .02em;
}
form { display: grid; gap: 1rem; }
label {
  display: grid; gap: .4rem; font-size: .7rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--mute);
}
input, textarea {
  font: inherit; color: var(--cream);
  background: rgba(7,20,39,.72);
  border: 1px solid var(--line);
  border-bottom: 1px solid var(--crimson);
  padding: .75rem .8rem; border-radius: 0;
}
input:focus, textarea:focus {
  outline: none;
  border-color: #4a6aa0;
  border-bottom-color: var(--orange);
}
button {
  justify-self: start; margin-top: .55rem; padding: .75rem 1.55rem;
  font: inherit; letter-spacing: .2em; text-transform: uppercase; font-size: .72rem;
  color: var(--cream); background: var(--crimson); border: 0; cursor: pointer;
}
button:hover { background: #d02236; }
.site-foot {
  position: relative; z-index: 1;
  max-width: 42rem; margin: 0 auto;
  padding: 2rem 1.5rem 3.5rem;
  border-top: 1px solid var(--line);
  color: var(--mute);
  font-size: .85rem;
  letter-spacing: .04em;
}
.site-foot p { margin: 0 0 .35rem; }
@media (max-width: 640px) {
  .hero {
    min-height: 58vh;
    align-items: end;
  }
  .hero img, .hero .hero-img {
    object-fit: cover;
    object-position: 70% center;
  }
  .hero-copy {
    margin-top: 0;
    padding: 3.5rem 1.25rem 1.75rem;
    background: linear-gradient(180deg, transparent 0%, rgba(7,20,39,.55) 35%, rgba(7,20,39,.92) 100%);
  }
  .hero::before { content: none; display: none; }
}