/* Animals for Allie.
   Loaded only on /animals-for-allie/. Roger wrote these for his great-niece
   when she was small, so this one section gets a rounder, friendlier face:
   Fredoka (SIL Open Font License, self-hosted - see fonts/OFL.txt), bigger
   type, and a soft colour per animal. The masthead, nav and footer stay the
   same as everywhere else, so it still reads as part of the one site. */

@font-face {
  font-family: "Fredoka";
  src: url("fonts/fredoka-latin-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fredoka";
  src: url("fonts/fredoka-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.allie {
  --round: "Fredoka", "Nunito", "Trebuchet MS", system-ui, sans-serif;

  /* Card tints. Text on all of them is --ink, which clears WCAG AA by a
     wide margin in both themes. */
  --t1: #fbe3d9;  --t2: #fdf0c9;  --t3: #dcefdc;
  --t4: #d9ebf6;  --t5: #eadff4;  --t6: #f8dde7;
  --badge-ink: #fffdfa;
  --b1: #b4533b;  --b2: #8f6a0c;  --b3: #3f7a46;
  --b4: #2f6d93;  --b5: #6e4a93;  --b6: #a23d62;
}

@media (prefers-color-scheme: dark) {
  .allie {
    --t1: #3a2620;  --t2: #37301a;  --t3: #1f3222;
    --t4: #1c2d39;  --t5: #2b2238;  --t6: #38212b;
    --badge-ink: #16130f;
    --b1: #eaa08c;  --b2: #e4c56b;  --b3: #93cf99;
    --b4: #8ec3e6;  --b5: #c3a7e6;  --b6: #eb9ab8;
  }
}

/* ---- heading -------------------------------------------------------- */

.allie-intro {
  max-width: 36rem;
  margin: 0 auto 2rem;
  text-align: center;
}

.allie-intro h1 {
  font-family: var(--round);
  font-weight: 600;
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.1rem);
  letter-spacing: 0;
  margin-bottom: 0.6rem;
}

.allie-intro p {
  font-family: var(--round);
  font-size: 1.12rem;
  line-height: 1.55;
  color: var(--ink-mid);
  margin: 0 0 0.6rem;
}

.allie-intro .aside { font-size: 0.95rem; color: var(--ink-soft); }

/* ---- the row of animal names ---------------------------------------- */

.zoo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  list-style: none;
  max-width: 42rem;
  margin: 0 auto 2.8rem;
  padding: 0;
}

.zoo a {
  display: inline-block;
  font-family: var(--round);
  font-size: 1rem;
  padding: 0.45rem 0.95rem;
  min-height: 2.6rem;
  line-height: 1.7;
  border-radius: 999px;
  color: var(--ink);
  background: var(--tint);
  text-decoration: none;
  border: 2px solid transparent;
}

.zoo a:hover { border-color: var(--badge); }

/* ---- the cards ------------------------------------------------------ */

.menagerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 1.5rem;
  max-width: 50rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.critter {
  background: var(--tint);
  border-radius: 18px;
  padding: 1.5rem 1.6rem 1.7rem;
  scroll-margin-top: 1.5rem;
}

.critter:target { outline: 3px solid var(--badge); outline-offset: 3px; }

.critter header {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}

.badge {
  flex: none;
  display: grid;
  place-items: center;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  background: var(--badge);
  color: var(--badge-ink);
  font-family: var(--round);
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 1;
}

.critter h2 {
  font-family: var(--round);
  font-weight: 600;
  font-size: 1.55rem;
  letter-spacing: 0;
  margin: 0;
}

.critter .verse {
  font-family: var(--round);
  font-size: 1.14rem;
  line-height: 1.6;
}

.critter .verse p { margin: 0 0 1em; }
.critter .verse p:last-child { margin-bottom: 0; }

/* Same hanging indent as the main poems, so a wrapped line reads as a
   continuation rather than a new line. */
.critter .verse span {
  display: block;
  padding-left: 1.2em;
  text-indent: -1.2em;
}

.critter .unfinished {
  margin: 1.1rem 0 0;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-mid);
}

.critter .back {
  display: inline-block;
  margin-top: 1.1rem;
  font-family: var(--round);
  font-size: 0.9rem;
  color: var(--ink-mid);
}

/* Six tints, cycling. */
.c1 { --tint: var(--t1); --badge: var(--b1); }
.c2 { --tint: var(--t2); --badge: var(--b2); }
.c3 { --tint: var(--t3); --badge: var(--b3); }
.c4 { --tint: var(--t4); --badge: var(--b4); }
.c5 { --tint: var(--t5); --badge: var(--b5); }
.c6 { --tint: var(--t6); --badge: var(--b6); }

.allie-foot {
  max-width: 36rem;
  margin: 3rem auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--ink-mid);
}

@media print {
  .zoo, .critter .back { display: none; }
  .critter { background: none; border: 1px solid #999; break-inside: avoid; }
  .badge { background: none; color: #000; border: 2px solid #000; }
}