/* OMA landing page. Wordmark top left, ring and tagline centred. */

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-latin-wght.woff2") format("woff2-variations"),
       url("/fonts/bricolage-grotesque-latin-wght.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #FFF7EC;          /* Milk */
  --fg: #1F1530;          /* Plum */
  --seat: rgba(31, 21, 48, 0.9);
  --coral: #FF5A3C;
  --sunny: #FFD23F;
  --lilac: #9B8CFF;
  --bubblegum: #FF9ACB;
  --nature: #2F5E46;      /* Moss on light, Sky on dark */
  --dusk: #3D7F86;
  --font-brand: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1F1530;
    --fg: #FFF7EC;
    --seat: rgba(255, 247, 236, 0.55);
    --nature: #BFD6D6;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-brand);
  display: flex;
  flex-direction: column;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.site-header {
  padding-block: max(clamp(20px, 3vw, 40px), env(safe-area-inset-top, 0px)) 0;
  padding-inline: clamp(8px, 2.5vw, 40px);
}

.wordmark {
  display: inline-block;
  font-weight: 600;
  font-size: clamp(30px, 3vw, 42px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--fg);
  text-decoration: none;
  border-radius: 6px;
}

.wordmark:focus-visible { outline: 2px solid var(--fg); outline-offset: 6px; }

.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(32px, 4vw, 48px);
  padding-block: 24px max(clamp(56px, 9vh, 96px), env(safe-area-inset-bottom, 0px));
  text-align: center;
}

.ring {
  width: clamp(168px, 17vw, 240px);
  height: auto;
  max-width: 100%;
  display: block;
  overflow: visible;
}

.ring .seats { fill: var(--seat); }
.ring .tile { transform-box: fill-box; transform-origin: center; }
.ring .b { fill: var(--bubblegum); }
.ring .n { fill: var(--nature); }
.ring .d { fill: var(--dusk); }
.ring .c { fill: var(--coral); }
.ring .s { fill: var(--sunny); }
.ring .l { fill: var(--lilac); }

.tagline {
  margin: 0;
  font-weight: 600;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
  max-width: 12ch;
}

@media (min-width: 720px) {
  .tagline { max-width: none; }
}

/* 404 page */
.notfound p { margin: 0; font-size: 18px; line-height: 1.5; }
.notfound a { color: inherit; text-underline-offset: 4px; }