/* Lumiose family frame: the shared header, footer and layout rules for
   every Lumiose site (lumiose.au, rise.lumiose.au, mipandfriends.com).

   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 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;
}