/* The JustBee look, taken over from the justbee-showcase theme on justbee.nl (brand.css and the
   inline style of the Mercator page) when the lab moved to its own subdomain. Loaded after
   styles.css, so these colours and fonts win. */
:root {
  --paper: #faf7ee;
  --ink: #1f1f1f;
  --yellow: #ffc629;
  --muted: #6a665d;
  --line: #e8dfc9;
  --sage: #eee6cf;
  --bg: #faf7ee;
  --panel: #fffdf7;
  --accent: #ffc629;
  --accent-soft: #fff0b7;
  --sea: #f1eedf;
  --land: #3d4940;
  --grid: #3d494033;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: 'Nunito Sans', sans-serif;
  font-size: 17px;
}

h1,
h2,
h3 {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.09;
}

.eyebrow {
  font-family: 'Nunito Sans', sans-serif;
  color: #777165;
  font-size: 11px;
  letter-spacing: .17em;
  font-weight: 800;
}

.brand img {
  display: block;
  width: 100%;
  height: auto;
}

.justbee-return {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 8px max(24px, calc((100vw - 1280px) / 2));
  background: #faf7ee;
  border-bottom: 1px solid #e8dfc9;
  font: 800 14px 'Nunito Sans', sans-serif;
}

.justbee-return a {
  color: #1f1f1f;
  text-decoration: none;
}

.justbee-return .brand {
  display: block;
  width: 156px;
  line-height: 0;
}

.justbee-mercator .layout { max-width: 1260px; padding-top: 30px; }
.justbee-mercator .hero,
.justbee-mercator .map-card,
.justbee-mercator .notes { background: #fffdf6; box-shadow: none; border: 1px solid #e8dfc9; backdrop-filter: none; }
.justbee-mercator .hero { padding: 34px; border-radius: 24px; }
.justbee-mercator h1 { font-size: clamp(36px, 4vw, 55px); max-width: 21ch; line-height: 1.07; }
.justbee-mercator h2 { font-size: 30px; }
.justbee-mercator .intro,
.justbee-mercator .notes p,
.justbee-mercator .map-header p { font-family: 'Nunito Sans', sans-serif; color: #6a665d; }
.justbee-mercator button { font-family: 'Nunito Sans', sans-serif; font-weight: 800; background: #ffc629; color: #1f1f1f; }
.justbee-mercator button.secondary { background: #eee6d3; }
.justbee-mercator .eyebrow { color: #73654c; }
.justbee-mercator input[type=range] { accent-color: #b38b10; }
.justbee-mercator .animation-controls label,
.justbee-mercator .animation-controls select { font-family: 'Nunito Sans', sans-serif; }
.justbee-mercator .notes { margin-top: 24px; }
.justbee-mercator .notes a { color: #1f1f1f; text-decoration-thickness: 2px; text-decoration-color: #d5a400; text-underline-offset: 4px; }
.justbee-mercator .reading-note { padding-top: 22px; margin-top: 25px; border-top: 1px dashed #d4c9af; }
.justbee-mercator .reading-note h3 { font-size: 25px; margin-bottom: 12px; }
.justbee-mercator .reading-note p { font-size: 16px; }

@media (max-width: 700px) {
  body { font-size: 16px; }
  .justbee-mercator .hero { padding: 24px; }
  .justbee-mercator h1 { font-size: 36px; }
  .justbee-mercator h2 { font-size: 27px; }
  .justbee-mercator .controls { gap: 9px; }
  .justbee-mercator button { font-size: 13px; padding: 12px 16px; }
  .justbee-return { padding-inline: 18px; }
  .justbee-return .brand { width: 126px; }
  .justbee-return > a:last-child { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}