:root {
  color-scheme: dark;
  --ink: #f8f3e7;
  --navy: #101e32;
  --subtle: #ced8e3;
  --gold: #f3cb52;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--navy);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
}
.front {
  display: grid;
  grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.45fr);
  min-height: 100svh;
  border-top: 5px solid var(--gold);
}
.intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(48px, 10vh, 130px);
  padding: clamp(26px, 5vw, 76px);
}
.logo { width: 70px; height: 70px; }
h1 {
  margin: 0;
  font: 500 clamp(68px, 8.5vw, 155px)/0.86 Georgia, serif;
  letter-spacing: -0.075em;
}
.intro p {
  max-width: 27ch;
  margin: 26px 0 0;
  color: var(--subtle);
  font-size: clamp(17px, 1.8vw, 24px);
  line-height: 1.45;
}
.flag-stage {
  position: relative;
  overflow: hidden;
  min-width: 0;
  margin: 0;
  background: #1e3953;
}
#flag {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 31% center;
}
#motion {
  position: absolute;
  right: 18px;
  bottom: 18px;
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid #a9bac9;
  border-radius: 4px;
  background: #101e32;
  color: var(--ink);
  font: 600 13px Arial, sans-serif;
  cursor: pointer;
}
#motion:hover { background: #263c55; }
#motion:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (max-width: 720px) {
  .front { grid-template-columns: 1fr; grid-template-rows: auto auto; align-content: start; }
  .intro { padding: 22px 25px 34px; gap: 35px; }
  .logo { width: 52px; height: 52px; }
  h1 { font-size: clamp(58px, 14vw, 100px); }
  .intro p { margin-top: 17px; }
  .flag-stage { aspect-ratio: 4 / 3; }
}