/* Corporate identity (shared with Mauler Katenkamp): the landing page. Colours come from ci.js as CSS variables (--bg, --ink, --cut, --accent). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;700&display=swap');
:root { --bg: #e3e4e8; --ink: #4a2bff; --cut: #00ff00; --accent: #00ff00; }   /* ci.js sets the live values */
html, body { margin: 0; height: 100%; background: var(--bg); }
body { font-family: 'Archivo', sans-serif; }
a { color: inherit; text-decoration: none; }
a:hover { font-weight: 700; }
#page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: space-between;
  gap: 16px; padding: clamp(20px, 4vw, 48px) clamp(20px, 5vw, 56px); box-sizing: border-box;
  color: var(--ink); touch-action: none; }
.rule-top { border-bottom: 2px solid currentColor; }
a.rule-top { display: block; padding: 14px 0 12px; margin: -14px 0 -12px; }   /* the line is a link: bigger hit area, same place */
a.name:hover, a.rule-top:hover { font-weight: 700; }
#stage { display: flex; justify-content: center; align-items: center; flex: 1 1 auto; min-height: 0; padding: 8px 0; }
#stage > svg { width: min(80vw, 40vh, 420px); width: min(80vw, 40dvh, 420px); height: auto; display: block; }   /* the landing-page drawing only */
.footer { display: flex; flex-direction: column; gap: 14px; border-top: 2px solid currentColor; padding-top: 24px; }
.name { font-weight: 700; font-size: clamp(18px, 7.4vw, 72px); line-height: 1.02; letter-spacing: 0.02em;
  text-transform: uppercase; white-space: nowrap; }   /* one line always; ci.js fits it to the width exactly */
.meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px;
  font-size: 14px; letter-spacing: 0.2em; text-transform: uppercase; }
.cities { display: flex; gap: 8px; align-items: baseline; }