:root {
  color-scheme: dark;
  --background: #17282b;
  --background-deep: #102024;
  --text: #f5f2e9;
  --secondary: #b8c5c0;
  --brass: #c5a66b;
  --page-width: 1240px;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fine-line: rgb(184 197 192 / 15%);
  --illumination: rgb(184 197 192 / 5%);
  --header-top: clamp(24px, 5svh, 48px);
  --header-bottom: clamp(12px, 3svh, 28px);
  --hero-top: clamp(12px, 3svh, 32px);
  --hero-bottom: clamp(20px, 4svh, 40px);
  --copy-padding: clamp(8px, 2svh, 20px);
  --contact-gap: 20px;
  --contact-padding: 9px 15px;
  --contact-font-size: 13px;
}
* { box-sizing: border-box; }
html { background: var(--background-deep); }
body { margin: 0; background: radial-gradient(ellipse at 72% 42%, var(--background) 0%, var(--background-deep) 85%); color: var(--text); font-family: var(--font-family); -webkit-font-smoothing: antialiased; }
.page { width: min(var(--page-width), calc(100% - 112px)); min-height: 100svh; margin-inline: auto; display: flex; flex-direction: column; }
.header { padding-block: var(--header-top) var(--header-bottom); }
.brand { display: block; width: 410px; max-width: 100%; height: auto; }
main { display: grid; grid-template-columns: 55fr 45fr; align-items: center; flex: 1; padding-block: var(--hero-top) var(--hero-bottom); }
main:focus { outline: none; }
.hero-copy { position: relative; z-index: 1; padding-block: var(--copy-padding); }
.status { display: flex; align-items: center; gap: 12px; margin: 0 0 28px; color: var(--brass); font-size: 10px; font-weight: 600; letter-spacing: 2.7px; text-transform: uppercase; }
.status span { width: 22px; height: 1px; background: var(--brass); }
h1 { font-family: inherit; font-weight: 650; font-size: clamp(30px, 4.1vw, 58px); line-height: 1.1; letter-spacing: -.035em; margin: 0 0 28px; }
.description { max-width: 490px; font-size: 16px; line-height: 1.85; color: var(--secondary); margin: 0; text-wrap: pretty; }
.support { margin-top: 30px; }
.rule { display: block; width: 36px; height: 1px; background: var(--brass); opacity: .6; margin-bottom: 21px; }
.support p { margin: 0; font-size: 14px; line-height: 1.85; color: var(--secondary); }
.contact-link { display: inline-block; margin-top: var(--contact-gap); padding: var(--contact-padding); background: var(--brass); color: var(--background-deep); font-size: var(--contact-font-size); font-weight: 600; line-height: 1.5; text-decoration: none; }
.contact-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.terrain { position: relative; margin: 0 -24px 0 -42px; isolation: isolate; }
.terrain::before { content: ''; position: absolute; inset: 12% 0; z-index: -1; border-radius: 50%; background: radial-gradient(ellipse, var(--illumination), transparent 68%); }
.terrain img { display: block; width: 100%; height: auto; }
footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 23px 27px; border-top: 1px solid var(--fine-line); color: var(--secondary); }
footer p { font-size: 11px; letter-spacing: .3px; margin: 0; }
.footer-mark { color: var(--brass); font-size: 15px; opacity: .7; }
.skip-link { position: absolute; top: 12px; left: 20px; z-index: 2; padding: 14px 20px; background: var(--text); color: var(--background); transform: translateY(-150%); }
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--brass); outline-offset: 4px; }
a:focus-visible { outline: 2px solid var(--brass); outline-offset: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy, .terrain { animation: arrive 1s ease-out both; }
  .terrain { animation-delay: .12s; }
  @keyframes arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 800px) {
  .page { width: calc(100% - 72px); }
  .header { padding-block: min(36px, var(--header-top)) var(--header-bottom); }
  .brand { width: 380px; }
  main { grid-template-columns: 1fr; padding-block: var(--hero-top) var(--hero-bottom); }
  .hero-copy { padding-block: 16px 0; }
  h1 { font-size: clamp(30px, 7vw, 58px); }
  .description { max-width: 540px; }
  .terrain { width: min(100%, 510px); margin: -5px auto -5px; }
  .desktop-break { display: none; }
}
@media (max-width: 480px) {
  .page { width: calc(100% - 48px); }
  .header { padding-block: min(28px, var(--header-top)) var(--header-bottom); }
  .brand { width: 340px; }
  main { padding-block: 20px 16px; }
  .status { font-size: 9px; margin-bottom: 24px; }
  h1 { font-size: clamp(26px, 8vw, 38px); letter-spacing: -.035em; line-height: 1.1; margin-bottom: 24px; }
  .description { font-size: 15px; line-height: 1.8; }
  .support { margin-top: 26px; }
  .support p { font-size: 13px; }
  .terrain { margin-block: 8px 0; }
  footer { padding-block: 21px 25px; }
  footer p { font-size: 10px; letter-spacing: 0; }
}