/* academy.similia.io in Hive's look (design/directions/hive/tokens.json): honey on cream in light,
   the same honey under a night sky in dark, Nunito, and cards with Hive's chunky edge. Hand-written;
   the HTML beside it is generated by scripts/site.js. */

@font-face { font-family: "Nunito"; font-weight: 600; font-style: normal; font-display: swap; src: url("/fonts/nunito-600semibold.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 600; font-style: italic; font-display: swap; src: url("/fonts/nunito-600semibold-italic.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 800; font-style: normal; font-display: swap; src: url("/fonts/nunito-800extrabold.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-weight: 900; font-style: normal; font-display: swap; src: url("/fonts/nunito-900black.woff2") format("woff2"); }

:root {
  color-scheme: light dark;
  --bg: #FFF8E6;
  --surface: #FFFFFF;
  --primary: #FFB703;
  --primary-deep: #DB8A00;
  --soft: #FFEDBE;
  --line: #F0E2BD;
  --edge: #EAD7A4;
  --comb: url("/images/honeycomb.svg");
  --accent: #9A5B00;
  --ink: #3A2A12;
  --ink-2: #75613F;
  --focus: #2459D6;
  --font: "Nunito", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111833;
    --surface: #1D2546;
    --primary: #FFB703;
    --primary-deep: #C98700;
    --soft: #2A3157;
    --line: #343C68;
    --edge: #0B1029;
    --comb: none;
    --accent: #FFC23D;
    --ink: #FFF6E0;
    --ink-2: #CBC3AE;
    --focus: #FFC23D;
  }
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--ink);
  font: 600 1.0625rem/1.65 var(--font);
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

/* The comb in light, a sky of stars in dark, behind the top of every page. */
body::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 22rem;
  z-index: -1;
  background: var(--comb) top center / 76px 132px repeat;
  -webkit-mask-image: linear-gradient(#000, transparent);
  mask-image: linear-gradient(#000, transparent);
}
@media (prefers-color-scheme: dark) {
  body::before {
    height: 26rem;
    background:
      radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 78% 12%, #fff 50%, transparent 51%),
      radial-gradient(1.4px 1.4px at 88% 34%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 30% 8%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 62% 26%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 6% 46%, #fff 50%, transparent 51%),
      radial-gradient(1px 1px at 94% 58%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 48% 4%, #fff 50%, transparent 51%),
      radial-gradient(90% 60% at 80% 0%, rgba(120, 110, 220, .22), transparent 70%),
      radial-gradient(120% 60% at 50% 0%, rgba(255, 183, 3, .12), transparent 70%);
  }
}

.wrap {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding-inline: max(1rem, env(safe-area-inset-left)) max(1rem, env(safe-area-inset-right));
}

a { color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.skip { position: absolute; left: 1rem; top: -4rem; padding: .5rem 1rem; border-radius: 999px; background: var(--surface); font-weight: 800; z-index: 1; }
.skip:focus { top: 1rem; }

/* ── The top: the emblem, the name and the pages ── */

.top { padding-block: max(1.25rem, env(safe-area-inset-top)) .5rem; }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; }

.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); text-decoration: none; font-weight: 900; font-size: 1.125rem; line-height: 1.15; letter-spacing: -.01em; }
.brand img { flex: none; width: 48px; height: 48px; }
@media (prefers-color-scheme: dark) { .brand img, .hero { filter: drop-shadow(0 0 14px rgba(255, 214, 102, .35)); } }

nav { display: flex; flex-wrap: wrap; gap: .4rem; }
nav a {
  padding: .35rem .85rem;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  font-size: .9375rem;
  box-shadow: inset 0 0 0 2px var(--line);
  background: var(--surface);
}
nav a:hover { box-shadow: inset 0 0 0 2px var(--primary); }
nav a[aria-current="page"] { background: var(--primary); color: #3A2A12; box-shadow: inset 0 0 0 2px var(--primary), 0 3px 0 var(--primary-deep); }

/* ── The page: one card with Hive's edge ── */

main { padding-block: 1rem 1.5rem; }

.card {
  background: var(--surface);
  border-radius: 28px;
  padding: clamp(1.25rem, 5vw, 2.75rem);
  box-shadow: inset 0 0 0 2px var(--line), 0 6px 0 var(--edge);
}

h1, h2, h3 { font-weight: 900; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
h1 { margin: 0 0 .5rem; font-size: clamp(1.75rem, 6vw, 2.375rem); }
h2 { margin: 2.25rem 0 .6rem; font-size: 1.375rem; display: flex; align-items: center; gap: .55rem; }
h2::before { content: ""; flex: none; width: .8rem; height: .9rem; background: var(--primary); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }
h3 { margin: 1.75rem 0 .4rem; font-size: 1.125rem; }

p { margin: 0 0 1rem; }
strong { font-weight: 800; }
em { font-style: italic; }

/* The line under the title: the date, what the page covers. */
h1 + p { color: var(--ink-2); font-size: .9375rem; padding-bottom: 1.25rem; border-bottom: 2px dashed var(--line); margin-bottom: 1.5rem; }

ul { margin: 0 0 1.25rem; padding: 0; list-style: none; }
li { position: relative; padding-left: 1.5rem; margin-bottom: .55rem; }
li::before { content: ""; position: absolute; left: .2rem; top: .62em; width: .55rem; height: .62rem; background: var(--primary); clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); }

/* ── The home page ── */

.hero { display: block; width: 112px; height: 112px; margin: 0 0 1rem; }
.home h1 { margin-bottom: .25rem; }
.home h1 + p { color: var(--accent); font-size: 1.125rem; font-weight: 800; padding: 0; border: 0; margin-bottom: 1.25rem; }
.home h1 + p strong { font-weight: 800; }

/* ── The foot ── */

footer { padding-block: .5rem max(2rem, env(safe-area-inset-bottom)); color: var(--ink-2); font-size: .875rem; text-align: center; }
footer p { margin: 0; }

@media (prefers-contrast: more) {
  :root { --line: var(--ink-2); }
  .card { box-shadow: inset 0 0 0 2px var(--ink); }
}

@media print {
  body::before, nav, .skip, .hero { display: none; }
  body { background: #fff; color: #000; }
  .card { box-shadow: none; padding: 0; }
  a { color: inherit; }
}