/* Lumiose family frame: the shared header, footer and layout rules for
   lumiose.au (it was shared with the other sites until Oct 2026).

   Copy this file unchanged. Link it BEFORE the site's own stylesheet, and
   set any --lm-* variable there to fit the site (for example its own text
   colour, or dark-mode colours). Everything here starts with "lm-" so it
   can't clash with a site's own styles.

   No outside fonts: the system's own font everywhere. */

:root {
  --lm-ink: #1F1D2B;        /* text */
  --lm-soft: #5E5A6B;       /* quieter text: footer, nav */
  --lm-line: #E7E3DA;       /* hairlines */
  --lm-sun: #F2A65A;        /* the wordmark's dot */
  --lm-sun-glow: #FCEBD3;

  --lm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lm-round: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", system-ui, -apple-system, sans-serif;
  --lm-serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;

  /* Layout: content never wider than --lm-max; 16px side margins on phones. */
  --lm-max: 1080px;
  --lm-gutter: 16px;
  --lm-radius: 20px;
  --lm-space: 24px;
}
@media (min-width: 700px) {
  :root { --lm-gutter: 32px; }
}

/* The column every section sits in. */
.lm-wrap {
  max-width: var(--lm-max);
  margin: 0 auto;
  padding-left: var(--lm-gutter);
  padding-right: var(--lm-gutter);
}

/* "Skip to content" link, shown only when reached with the keyboard. */
.lm-skip {
  position: absolute; left: -999px; top: 8px; z-index: 10;
  background: #fff; color: var(--lm-ink);
  padding: 8px 14px; border-radius: 10px; font: 600 1rem/1.4 var(--lm-font);
}
.lm-skip:focus { left: var(--lm-gutter); }

/* Header: the wordmark on the left, the three streams on the right. */
.lm-top {
  font: 1rem/1.4 var(--lm-font);
  color: var(--lm-ink);
}
.lm-top .lm-wrap {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 20px;
  padding-top: 20px; padding-bottom: 20px;
}
.lm-wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--lm-ink); text-decoration: none;
  font-weight: 650; font-size: 1.3rem; letter-spacing: 0.01em;
}
.lm-dot {
  width: 14px; height: 14px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 35%, #FFE7A8, var(--lm-sun) 70%);
  box-shadow: 0 0 0 4px var(--lm-sun-glow);
}
.lm-nav { display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 0.95rem; }
.lm-nav a { color: var(--lm-soft); text-decoration: none; padding: 6px 0; }
.lm-nav a:hover,
.lm-nav a[aria-current="page"] { color: var(--lm-ink); text-decoration: underline; text-underline-offset: 4px; }

/* Footer. */
.lm-foot {
  margin-top: 64px;
  font: 0.9rem/1.6 var(--lm-font);
  color: var(--lm-soft);
}
.lm-foot-in {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 32px;
  padding: 24px 0 40px;
  border-top: 1px solid var(--lm-line);
}
.lm-foot nav { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.lm-foot p { margin: 0; }
.lm-foot-text { display: flex; flex-direction: column; gap: 2px; }
.lm-nowrap { white-space: nowrap; }
.lm-foot a { color: var(--lm-soft); text-underline-offset: 3px; }
.lm-foot a:hover { color: var(--lm-ink); }

/* Keyboard focus: always visible. */
.lm-top a:focus-visible,
.lm-foot a:focus-visible {
  outline: 2px solid var(--lm-ink); outline-offset: 3px; border-radius: 4px;
}