/* Compact country placeholder pages: a small content block and atmospheric line art. */
.country-page {
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: clip;
}
.country-page .site-shell {
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.country-header { flex: 0 0 auto; }
.country-nav { text-transform: none; letter-spacing: 0; font-size: 11px; font-weight: 600; }
.country-nav a { display: inline-flex; align-items: center; gap: 10px; color: #e4e9eb; }
.country-nav a::after { bottom: -8px; }
.country-nav svg { width: 15px; height: 15px; fill: none; stroke: var(--lime); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.country-main {
  flex: 1 0 auto;
  min-height: calc(100vh - 78px);
  min-height: calc(100svh - 78px);
  display: flex;
  align-items: center;
  position: relative;
  isolation: isolate;
  padding-top: clamp(36px, 6vh, 72px);
  padding-bottom: clamp(42px, 7vh, 82px);
}
/* Removed the extra page-wide atmospheric gradients: the line-art now blends at the artwork level. */
.country-copy { position: relative; z-index: 2; width: min(100%, 540px); padding-top: 18px; }
.country-flag {
  width: 112px;
  height: 72px;
  position: relative;
  overflow: hidden;
  margin-bottom: 28px;
  border: 1px solid rgba(158, 255, 0, .58);
  border-radius: 7px;
  box-shadow: 0 0 24px rgba(158, 255, 0, .13), 0 8px 28px rgba(0, 0, 0, .25);
  isolation: isolate;
}
.country-flag--usa {
  background: repeating-linear-gradient(
    to bottom,
    #b22234 0%, #b22234 7.6923%,
    #fff 7.6923%, #fff 15.3846%
  );
}
.us-canton {
  position: absolute;
  top: 0;
  left: 0;
  width: 43.5%;
  height: 53.85%;
  background-color: #26366a;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 1px 0;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .23);
}
.us-star-row {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  width: 100%;
  height: auto;
  flex: 1 1 0;
  min-height: 0;
  line-height: 1;
  color: #fff;
}
.us-star-row--5 { width: 83.333%; margin-inline: auto; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.us-star-row i { display: block; font-family: Arial, sans-serif; font-size: 4px; line-height: 1; font-style: normal; font-weight: 700; transform: translateY(-.1px); }
.country-flag--germany { display: flex; flex-direction: column; background: #111; }
.country-flag--germany span { display: block; width: 100%; flex: 1 1 33.333%; }
.country-flag--germany span:nth-child(1) { background: #050505; }
.country-flag--germany span:nth-child(2) { background: #dd0000; }
.country-flag--germany span:nth-child(3) { background: #ffce00; }
.country-copy h1 {
  margin: 0;
  color: var(--text);
  font-size: clamp(42px, 4vw, 54px);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -2.5px;
}
.country-tagline {
  margin: 15px 0 0;
  max-width: 580px;
  color: #e0e7f1;
  font-size: clamp(25px, 2.5vw, 34px);
  line-height: 1.2;
  letter-spacing: -1px;
  font-weight: 500;
}
.country-tagline span { color: var(--lime); }
.country-rule { margin-top: 24px; width: 36px; }
.country-description { margin: 18px 0 0; max-width: 470px; color: var(--muted); font-size: 13px; line-height: 1.75; }

/* Abstract light-field: open, sweeping data paths rather than orbital rings or a footer. */
.country-visual {
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  right: -7%;
  width: min(82%, 1000px);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: .92;
  /* Keep the light field from being clipped at its own rectangular bounds.
     The illustration itself is feathered, while the glow can extend out softly. */
  overflow: visible;
  /* Keep this wrapper unmasked: masking the parent clips overflowing SVG art at the
     wrapper's right border. Vertical fading now lives inside each SVG instead. */
}
.country-visual-glow {
  position: absolute;
  inset: -9% -20% -7% -20%;
  background: radial-gradient(ellipse at 58% 57%, rgba(121, 218, 0, .105), rgba(72, 130, 0, .035) 39%, transparent 73%);
  filter: blur(24px);
}
.country-visual-art {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  flex: 0 0 auto;
  overflow: visible;
  transform: translate(-2%, 3%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.025) 7%, rgba(0,0,0,.22) 16%, rgba(0,0,0,.72) 27%, #000 38%, #000 59%, rgba(0,0,0,.86) 72%, rgba(0,0,0,.48) 85%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.025) 7%, rgba(0,0,0,.22) 16%, rgba(0,0,0,.72) 27%, #000 38%, #000 59%, rgba(0,0,0,.86) 72%, rgba(0,0,0,.48) 85%, transparent 100%);
}
.country-visual-art .country-flow { stroke-dasharray: 3 10; animation: country-flow 34s linear infinite; }
.country-visual-art .country-flow--slow { stroke-dasharray: 1 0; animation: country-drift 30s ease-in-out infinite alternate; }
.country-visual-art .country-flow--reverse { animation-direction: reverse; animation-duration: 42s; }

.country-page a:focus-visible { outline-offset: 5px; }
@keyframes country-flow { to { stroke-dashoffset: -260; } }
@keyframes country-drift { from { translate: 0 0; } to { translate: 10px -5px; } }

@media (min-width: 2001px) {
  .country-main { padding-block: clamp(68px, 7vh, 104px); }
  .country-copy { padding-left: min(1.3vw, 22px); }
  /* Give the light field room to breathe on ultrawide screens. Keep its edges feathered,
     and let its left side sit quietly behind the copy instead of stopping at a hard boundary. */
  .country-visual { right: -8%; width: min(92%, 1150px); }
  .country-visual-art { transform: translate(-3%, 2%); }
}
@media (max-width: 900px) {
  .country-visual { right: -2%; width: min(64%, 720px); min-width: 0; opacity: .72; }
  .country-copy { max-width: 500px; }
}
@media (max-width: 640px) {
  .country-visual-glow { inset: 4% -18% -5% -18%; filter: blur(19px); }
  .country-page .site-header { height: 70px; }
  .country-page .brand { gap: 11px; font-size: 22px; }
  .country-page .brand-mark { width: 25px; height: 27px; }
  .country-nav { gap: 0; font-size: 11px; }
  .country-nav a { gap: 7px; }
  .country-main { min-height: calc(100svh - 70px); align-items: flex-start; padding-top: 66px; padding-bottom: 80px; }
  .country-copy { width: 100%; max-width: 420px; padding-top: 0; }
  .country-flag { width: 94px; height: 61px; margin-bottom: 24px; }
  .us-star-row i { font-size: 3.2px; }
  .country-copy h1 { font-size: 45px; letter-spacing: -2px; }
  .country-tagline { margin-top: 13px; font-size: clamp(24px, 6.1vw, 30px); letter-spacing: -.8px; }
  .country-rule { margin-top: 20px; }
  .country-description { max-width: 365px; margin-top: 15px; font-size: 12px; }
  .desktop-break { display: none; }
  .country-visual { top: auto; bottom: -5%; right: -24px; width: 112vw; min-width: 0; opacity: .58; align-items: flex-end; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 27%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 27%, #000 100%); }
  .country-visual-art { width: 100%; transform: translate(5%, 6%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 8%, #000 22%, #000 100%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.18) 8%, #000 22%, #000 100%); }
  .country-visual-glow { inset: 15% -20% 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .country-visual-art .country-flow { animation: none; }
}