/* hardytruehopper.com. Mobile first, then wider screens from 40em and 60em.
   The look comes from the books: the cover lettering, Hardy's red and yellow
   scarf, Book 2's slate guess stones, the meadow and its seasons. */

@font-face {
  font-family: Bonum;
  src: url("/fonts/bonum-bold.e6c873b086.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Bonum;
  src: url("/fonts/bonum-bold-italic.f1349c3272.woff2") format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: Nunito;
  src: url("/fonts/nunito.8b03affaef.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Nunito;
  src: url("/fonts/nunito-italic.ba86c9d7a7.woff2") format("woff2");
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
}

:root {
  color-scheme: light;

  --paper: #fbf6ea;
  --paper-deep: #f3e8d2;
  --card: #fffdf7;
  --ink: #392616;
  --ink-soft: #66513d;
  --orange: #e56e1e;
  --orange-deep: #a8480f;
  --outline: #44200a;
  --red: #c4372c;
  --yellow: #f3c234;
  --leaf: #7d9b4b;
  --leaf-deep: #4f6e30;
  --moss: #557535;
  --slate: #4b5258;
  --slate-deep: #33393e;
  --chalk: #f6f2e9;
  --sky: #e4eff0;
  --night: #1d3140;
  --font-display: bonum, "Bookman Old Style", "URW Bookman", "Bookman", georgia, serif;
  --font-body: nunito, ui-rounded, "Segoe UI", system-ui, sans-serif;
  --gutter: clamp(1rem, 4.5vw, 2.25rem);
  --shadow-card: 0 1px 1px rgb(57 38 22 / 6%), 0 14px 30px -16px rgb(57 38 22 / 38%);
  --ease-spring: cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

html {
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1rem;
}

body {
  margin: 0;
  background: var(--paper) url("/img/grain.fbb21c96a3.png") repeat;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1.06rem, 1rem + 0.25vw, 1.15rem);
  font-weight: 450;
  line-height: 1.62;
  overflow-x: clip;
  text-rendering: optimizelegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
}

img {
  height: auto;
}

p {
  margin: 0 0 1em;
  text-wrap: pretty;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  text-wrap: balance;
}

a {
  color: var(--orange-deep);
  text-decoration-thickness: 0.09em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--red);
}

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 0.35rem;
}

::selection {
  background: var(--yellow);
  color: var(--ink);
}

.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  z-index: 10;
  padding: 0.6rem 1rem;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 800;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

.wrap {
  width: 100%;
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.wrap--narrow {
  max-width: 50rem;
}

/* The cover lettering. Orange with a dark brown outline and a soft drop,
   as on both covers. */
.lettering {
  color: var(--orange);
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.004em;
  text-shadow:
    0.045em 0 0 var(--outline),
    -0.045em 0 0 var(--outline),
    0 0.045em 0 var(--outline),
    0 -0.045em 0 var(--outline),
    0.032em 0.032em 0 var(--outline),
    -0.032em 0.032em 0 var(--outline),
    0.032em -0.032em 0 var(--outline),
    -0.032em -0.032em 0 var(--outline),
    0.05em 0.1em 0.09em rgb(40 20 5 / 45%);
}

/* Hardy's scarf, knitted across the top of every page. */
.scarf {
  height: 0.55rem;
  background:
    repeating-linear-gradient(60deg, rgb(255 255 255 / 12%) 0 2px, transparent 2px 5px),
    repeating-linear-gradient(90deg, var(--red) 0 1.15rem, var(--yellow) 1.15rem 2.3rem);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 12%);
}

.masthead__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem 0.75rem;
  max-width: 76rem;
  margin-inline: auto;
  padding: 0.65rem var(--gutter);
}

.wordmark {
  font-size: clamp(1.15rem, 1rem + 1vw, 1.45rem);
  text-decoration: none;
  white-space: nowrap;
}

.nav {
  display: flex;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  font-size: 0.97rem;
  font-weight: 800;
  list-style: none;
}

.nav a {
  display: block;
  padding: 0.45rem 0.65rem;
  border-radius: 999px;
  color: var(--ink);
  text-decoration: none;
}

.nav a:hover {
  background: var(--paper-deep);
  color: var(--ink);
}

.page--home .wordmark {
  display: none;
}

.page--home .masthead__bar {
  justify-content: flex-end;
}

.nav .nav__news {
  background: var(--ink);
  color: var(--paper);
}

.nav .nav__news:hover {
  background: var(--red);
  color: #fff;
}

/* Smooth river stones for buttons, like the guess stones in Book 2. */
.pebble {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 3.35rem;
  padding: 0.7rem 1.35rem 0.75rem 1.55rem;
  border-radius: 46% 54% 52% 48% / 62% 58% 42% 38%;
  font-size: 1.08rem;
  font-weight: 850;
  line-height: 1.12;
  text-align: left;
  text-decoration: none;
  transition:
    transform 0.3s var(--ease-spring),
    box-shadow 0.3s var(--ease-spring);
}

.pebble > span {
  display: flex;
  flex-direction: column;
}

.pebble small {
  font-size: 0.78em;
  font-weight: 700;
  opacity: 0.9;
}

.pebble .arrow {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
}

.pebble:hover {
  transform: translateY(-2px) rotate(-1.2deg);
}

.pebble:active {
  transform: translateY(1px);
}

.pebble--carrot {
  background: radial-gradient(130% 120% at 28% 18%, #ffc27e 0%, #f79a49 38%, #ec7a2a 100%);
  box-shadow:
    inset 0 -3px 0 rgb(150 60 0 / 30%),
    inset 0 2px 0 rgb(255 255 255 / 40%),
    0 8px 16px -8px rgb(160 70 0 / 70%);
  color: #3a1a05;
}

.pebble--carrot:hover {
  color: #3a1a05;
}

.pebble--slate {
  background: radial-gradient(
    130% 120% at 28% 18%,
    #626a70 0%,
    var(--slate) 45%,
    var(--slate-deep) 100%
  );
  box-shadow:
    inset 0 -3px 0 rgb(0 0 0 / 30%),
    inset 0 2px 0 rgb(255 255 255 / 18%),
    0 8px 16px -8px rgb(20 25 30 / 70%);
  color: var(--chalk);
}

.pebble--slate:hover {
  color: #fff;
}

.pebble--moss {
  background: radial-gradient(130% 120% at 28% 18%, #5f7f3d 0%, #4a6a2c 50%, #36501f 100%);
  box-shadow:
    inset 0 -3px 0 rgb(0 0 0 / 25%),
    inset 0 2px 0 rgb(255 255 255 / 25%),
    0 8px 16px -8px rgb(40 60 20 / 70%);
  color: #fff;
}

.pebble--moss:hover {
  color: #fff;
}

.pebble--moss small {
  opacity: 1;
}

.pebble--paper {
  background: var(--card);
  box-shadow:
    inset 0 0 0 2px var(--ink),
    0 6px 0 -2px var(--paper-deep),
    0 6px 0 0 var(--ink);
  color: var(--ink);
}

.pebble--paper:hover {
  color: var(--ink);
}

/* Section headings, with the little red squiggle. */
.section {
  padding-block: clamp(3.25rem, 9vw, 6rem);
}

.section-head {
  max-width: 44rem;
  margin: 0 auto clamp(1.75rem, 5vw, 3rem);
  text-align: center;
}

.kicker {
  margin: 0 0 0.45rem;
  color: var(--orange-deep);
  font-size: 0.85rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.section-head__title {
  font-size: clamp(1.85rem, 1.4rem + 2.6vw, 3rem);
}

.squiggle {
  display: block;
  width: 5.5rem;
  height: 0.9rem;
  margin: 0.55rem auto 0;
  color: var(--red);
}

.section-head__intro {
  margin: 1rem auto 0;
  color: var(--ink-soft);
  font-size: 1.08em;
}

.intro {
  text-align: center;
}

.intro .wrap > p,
.about__text {
  max-width: 34rem;
  margin-inline: auto;
  text-align: left;
}

.lede {
  font-size: 1.16em;
  font-weight: 600;
}

/* The hero. On a phone the title sits in the sky of Book 2's cover art,
   as it does on the cover, and the meadow grows up from the bottom. */
.hero {
  position: relative;
  display: grid;
  grid-template-areas:
    "art"
    "text";
  grid-template-columns: minmax(0, 1fr);
}

.hero__title {
  z-index: 2;
  grid-area: art;
  place-self: start center;
  margin-top: clamp(0.8rem, 5vw, 1.8rem);
  font-size: clamp(1.9rem, 8.9vw, 3.6rem);
  line-height: 1;
  text-align: center;
}

.hero__title span {
  display: inline-block;
}

.hero__art {
  position: relative;
  grid-area: art;
  overflow: hidden;
  isolation: isolate;
}

.hero__img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.hero__grass {
  position: absolute;
  inset: auto 0 -1px;
  height: clamp(3.5rem, 15vw, 6.5rem);
  background-image: url("/img/grass-hero.c8b1a4d6cb.svg");
}

.hero__text {
  position: relative;
  grid-area: text;
  padding: 0.9rem var(--gutter) 1rem;
  text-align: center;
}

.hero__tagline {
  max-width: 30rem;
  margin: 0 auto 0.6rem;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 1.1rem + 1.8vw, 2.1rem);
  line-height: 1.22;
  text-wrap: balance;
}

.hero__meta {
  margin-bottom: 1.4rem;
  color: var(--ink-soft);
  font-size: 0.95rem;
  font-weight: 750;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem 0.9rem;
}

/* Little sparks of light drifting up through the sunbeams. */
.motes i {
  position: absolute;
  width: 0.5rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(255 251 225 / 100%) 0%, rgb(255 236 170 / 0%) 70%);
  opacity: 0;
  animation: drift 13s ease-in-out infinite;
}

.motes i:nth-child(1) {
  top: 62%;
  left: 9%;
  animation-delay: -1s;
}

.motes i:nth-child(2) {
  top: 48%;
  left: 22%;
  width: 0.35rem;
  animation-delay: -5s;
  animation-duration: 16s;
}

.motes i:nth-child(3) {
  top: 70%;
  left: 31%;
  animation-delay: -9s;
}

.motes i:nth-child(4) {
  top: 40%;
  left: 70%;
  width: 0.65rem;
  animation-delay: -3s;
  animation-duration: 15s;
}

.motes i:nth-child(5) {
  top: 66%;
  left: 82%;
  animation-delay: -7s;
}

.motes i:nth-child(6) {
  top: 30%;
  left: 56%;
  width: 0.3rem;
  animation-delay: -11s;
  animation-duration: 11s;
}

.motes i:nth-child(7) {
  top: 54%;
  left: 90%;
  width: 0.4rem;
  animation-delay: -2s;
  animation-duration: 17s;
}

.motes i:nth-child(8) {
  top: 36%;
  left: 14%;
  width: 0.6rem;
  animation-delay: -8s;
}

.motes i:nth-child(9) {
  top: 76%;
  left: 62%;
  width: 0.35rem;
  animation-delay: -12s;
  animation-duration: 14s;
}

.motes i:nth-child(10) {
  top: 24%;
  left: 38%;
  width: 0.4rem;
  animation-delay: -6s;
  animation-duration: 18s;
}

.motes i:nth-child(11) {
  top: 58%;
  left: 47%;
  width: 0.3rem;
  animation-delay: -4s;
}

.motes i:nth-child(12) {
  top: 44%;
  left: 4%;
  width: 0.45rem;
  animation-delay: -10s;
  animation-duration: 12s;
}

@keyframes drift {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(0.6);
  }

  15% {
    opacity: 0.95;
  }

  50% {
    transform: translate3d(1.1rem, -3rem, 0) scale(1);
  }

  85% {
    opacity: 0.8;
  }

  100% {
    opacity: 0;
    transform: translate3d(-0.7rem, -6.5rem, 0) scale(0.7);
  }
}

/* Grass is drawn once as an SVG picture (build/decor.ts), which sways on
   its own inside the file. A still copy takes over for less motion. */
.grass {
  display: block;
  width: 100%;
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
}

/* Falling autumn leaves for Book 1. */
.leaves {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.leaf {
  position: absolute;
  top: -2.5rem;
  width: 1.35rem;
  height: 1.35rem;
  fill: currentcolor;
  animation: fall 14s linear infinite;
}

.leaf--1 {
  left: 8%;
  color: #e0752a;
  animation-delay: -2s;
}

.leaf--2 {
  left: 30%;
  width: 1rem;
  color: #c94b26;
  animation-delay: -9s;
  animation-duration: 17s;
}

.leaf--3 {
  left: 62%;
  color: #e9a93a;
  animation-delay: -5s;
  animation-duration: 15s;
}

.leaf--4 {
  left: 84%;
  width: 1.1rem;
  color: #b8452a;
  animation-delay: -12s;
}

.leaf--5 {
  left: 48%;
  width: 0.9rem;
  color: #f0bf4a;
  animation-delay: -7s;
  animation-duration: 19s;
}

.leaf--6 {
  left: 18%;
  width: 1.2rem;
  color: #d86a2b;
  animation-delay: -14s;
  animation-duration: 16s;
}

.leaf--7 {
  left: 74%;
  width: 1rem;
  color: #e48b2f;
  animation-delay: -4s;
  animation-duration: 18s;
}

@keyframes fall {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: 0;
  }

  8% {
    opacity: 0.9;
  }

  25% {
    transform: translate3d(2.2rem, 25vh, 0) rotate(90deg);
  }

  50% {
    transform: translate3d(-1.2rem, 50vh, 0) rotate(200deg);
  }

  75% {
    transform: translate3d(1.8rem, 75vh, 0) rotate(290deg);
  }

  92% {
    opacity: 0.85;
  }

  100% {
    transform: translate3d(-0.6rem, 105vh, 0) rotate(380deg);
    opacity: 0;
  }
}

/* The books. */
.shelf {
  display: grid;
  gap: 2rem;
}

.shelf--single {
  max-width: 36rem;
  margin-inline: auto;
}

.book-card {
  position: relative;
  display: grid;
  align-content: start;
  gap: 1.6rem;
  padding: 2.25rem clamp(1.1rem, 4vw, 2rem) 1.9rem;
  overflow: hidden;
  border-radius: 2rem;
  box-shadow: var(--shadow-card);
}

.book-card--autumn {
  background:
    radial-gradient(120% 60% at 50% 0%, #fbdcaa 0%, rgb(251 220 170 / 0%) 70%),
    linear-gradient(#fdf3e1, var(--card));
}

.book-card--spring {
  background:
    radial-gradient(120% 60% at 50% 0%, #d9eac4 0%, rgb(217 234 196 / 0%) 70%),
    linear-gradient(#f1f6e6, var(--card));
}

.book-card__cover {
  position: relative;
  justify-self: center;
  width: min(74vw, 19rem);
  text-decoration: none;
}

.book-card__text {
  position: relative;
}

.book-card__title {
  margin: 0.7rem 0 0.35rem;
  font-size: clamp(1.45rem, 1.2rem + 1.4vw, 1.95rem);
}

.book-card__title a {
  color: var(--ink);
  text-decoration: none;
}

.book-card__title a:hover {
  color: var(--orange-deep);
}

.book-card__subtitle {
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-style: italic;
  line-height: 1.3;
  text-wrap: balance;
}

.book-card__more {
  margin: 1.1rem 0 0;
}

.more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 850;
  min-height: 2.75rem;
}

.more .arrow {
  width: 1.05rem;
  height: 1.05rem;
  transition: transform 0.3s var(--ease-spring);
}

.more:hover .arrow {
  transform: translateX(0.25rem);
}

/* A square book, turned a little toward the reader, with its pages showing. */
.book3d {
  display: block;
  perspective: 1500px;
}

.book3d__inner {
  position: relative;
  display: block;
  transform: rotateY(14deg) rotateX(2deg);
  transform-style: preserve-3d;
  transition: transform 0.7s var(--ease-spring);
}

.book3d__cover {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  border-radius: 0.2rem 0.45rem 0.45rem 0.2rem;
  box-shadow:
    inset 0 0 0 1px rgb(0 0 0 / 8%),
    -1.4rem 1.6rem 2.4rem -0.8rem rgb(57 38 22 / 50%),
    -0.2rem 0.3rem 0.5rem rgb(57 38 22 / 25%);
}

.book3d__inner::before {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;
  width: 6%;
  border-radius: 0.2rem 0 0 0.2rem;
  background: linear-gradient(
    90deg,
    rgb(255 255 255 / 0%) 0%,
    rgb(255 255 255 / 28%) 30%,
    rgb(0 0 0 / 20%) 62%,
    rgb(0 0 0 / 0%) 100%
  );
  content: "";
  pointer-events: none;
}

.book3d__inner::after {
  position: absolute;
  top: 1.2%;
  right: -0.7rem;
  bottom: 1.2%;
  width: 0.85rem;
  border-radius: 0 0.25rem 0.25rem 0;
  background: repeating-linear-gradient(90deg, #fffdf5 0 2px, #e3d9c4 2px 3px);
  box-shadow: inset 0.2rem 0 0.35rem rgb(0 0 0 / 22%);
  content: "";
  transform: translateZ(-0.1rem);
}

a:hover .book3d__inner,
.book3d:hover .book3d__inner {
  transform: rotateY(4deg) rotateX(1deg) translateY(-0.3rem);
}

/* "Book 1", cut like the end of Hardy's scarf. */
.ribbon {
  display: inline-block;
  margin: 0;
  padding: 0.32rem 1.15rem 0.32rem 1.55rem;
  background: linear-gradient(
    90deg,
    var(--yellow) 0 0.3rem,
    var(--red) 0.3rem 0.6rem,
    var(--yellow) 0.6rem 0.9rem,
    var(--red) 0.9rem
  );
  clip-path: polygon(0 0, 100% 0, calc(100% - 0.55rem) 50%, 100% 100%, 0 100%);
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.trap {
  display: grid;
  gap: 0;
  margin: 1.2rem 0 1.4rem;
  padding: 0.3rem 1.1rem;
  border-radius: 1rem;
  background: rgb(255 255 255 / 70%);
  box-shadow: inset 0 0 0 1px rgb(57 38 22 / 8%);
}

.trap__row {
  padding: 0.7rem 0;
}

.trap__row + .trap__row {
  border-top: 2px dashed rgb(57 38 22 / 14%);
}

.trap dt {
  color: var(--red);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.trap__row + .trap__row dt {
  color: var(--moss);
}

.trap dd {
  margin: 0.1rem 0 0;
  font-weight: 700;
  line-height: 1.4;
}

.buy__main {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 0.7rem;
}

.buy .pebble {
  min-height: 3.1rem;
  padding: 0.6rem 1.05rem 0.65rem 1.25rem;
  font-size: 1.02rem;
  gap: 0.5rem;
}

.stores {
  margin-top: 1rem;
  font-size: 0.95rem;
}

.stores summary {
  display: inline-block;
  color: var(--ink-soft);
  font-weight: 800;
  cursor: pointer;
  text-decoration: underline dotted 0.1em;
  text-underline-offset: 0.2em;
  padding-block: 0.6rem;
}

.stores__list {
  display: grid;
  gap: 0.35rem;
  margin: 0.7rem 0 0;
  padding: 0;
  list-style: none;
}

.stores__list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
}

.stores__list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: 0.25rem;
}

.stores__country {
  min-width: 8.5rem;
  font-weight: 750;
}

/* The science, on pages torn from a nature notebook. */
.notebooks {
  display: grid;
  gap: 1.75rem;
}

.notebook {
  position: relative;
  padding: 1.6rem 1.25rem 1.4rem 3.3rem;
  border-radius: 0.4rem 1.1rem 1.1rem 0.4rem;
  background:
    linear-gradient(
      90deg,
      transparent 2.35rem,
      rgb(196 55 44 / 35%) 2.35rem 2.45rem,
      transparent 2.45rem
    ),
    var(--card);
  box-shadow: var(--shadow-card);
}

.notebook__sketch {
  position: relative;
  margin: 0 0 1.2rem;
  padding: 0.6rem;
  border-radius: 0.3rem;
  background: #fff;
  box-shadow: 0 6px 14px -8px rgb(57 38 22 / 45%);
  transform: rotate(-1.2deg);
}

.notebook__sketch::before {
  position: absolute;
  top: -0.65rem;
  left: 50%;
  width: 5rem;
  height: 1.3rem;
  background: rgb(243 194 52 / 55%);
  content: "";
  transform: translateX(-50%) rotate(2deg);
}

.notebook--spring .notebook__sketch {
  transform: rotate(1.1deg);
}

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

.notebook__book {
  margin: 0 0 0.2rem;
  color: var(--ink-soft);
  font-size: 0.92rem;
  font-weight: 800;
}

.notebook__title {
  margin-bottom: 0.7rem;
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.75rem);
}

/* Ruled lines sit exactly under each line of the research text. */
.notebook__text p {
  margin: 0 0 0.875rem;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 calc(1.75rem - 1px),
    rgb(110 150 190 / 30%) calc(1.75rem - 1px) 1.75rem
  );
  line-height: 1.75rem;
}

.notebook__habit {
  margin: 1.2rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 0.8rem;
  background: rgb(243 194 52 / 22%);
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-style: italic;
  line-height: 1.35;
}

.notebook__habit span {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--orange-deep);
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* The meadow friends, each in a ring of their own colors. */
.meadow {
  background: radial-gradient(
    90% 55% at 50% 72%,
    rgb(185 210 164 / 45%),
    rgb(185 210 164 / 0%) 70%
  );
}

.cast {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cast__item {
  flex: 0 0 calc((100% - 1rem) / 2);
  text-align: center;
}

.cast__ring {
  display: block;
  width: min(100%, 8.5rem);
  aspect-ratio: 1;
  margin-inline: auto;
  padding: 0.32rem;
  border-radius: 50%;
  background: repeating-conic-gradient(var(--red) 0 15deg, var(--yellow) 15deg 30deg);
  box-shadow: 0 12px 24px -12px rgb(57 38 22 / 60%);
  transition: transform 0.5s var(--ease-spring);
}

.cast__ring img {
  display: block;
  width: 100%;
  height: 100%;
  border: 0.22rem solid var(--paper);
  border-radius: 50%;
  object-fit: cover;
}

.cast__item--squirrel .cast__ring {
  background: repeating-conic-gradient(#c8622b 0 15deg, #f0b46a 15deg 30deg);
}

.cast__item--duck .cast__ring {
  background: repeating-conic-gradient(#2f7a4e 0 15deg, #f3c234 15deg 30deg);
}

.cast__item--hedgehog .cast__ring {
  background: repeating-conic-gradient(#7a5a3c 0 15deg, #e8d6b5 15deg 30deg);
}

.cast__item--mouse .cast__ring {
  background: repeating-conic-gradient(#8d8a86 0 15deg, #f2b8b4 15deg 30deg);
}

.cast__item:hover .cast__ring {
  transform: translateY(-0.4rem) rotate(-5deg);
}

.cast__name {
  margin: 0.85rem 0 0.15rem;
  font-size: 1.25rem;
}

.cast__line {
  max-width: 13rem;
  margin: 0 auto;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.45;
}

/* The guides, as little booklets clipped together. */
.guides {
  background:
    url("/img/grain.fbb21c96a3.png") repeat,
    linear-gradient(var(--paper), var(--paper-deep));
}

.booklets {
  display: grid;
  gap: 2.25rem;
}

.booklet {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2.1rem 1.35rem 1.7rem;
  border-radius: 0.45rem 1.4rem 1.4rem 0.45rem;
  background: var(--card);
  box-shadow:
    0 1px 0 #e9dfcb,
    0.4rem 0.4rem 0 -1px var(--card),
    0.4rem 0.4rem 0 0 #ddd0b6,
    0.8rem 0.8rem 0 -1px var(--card),
    0.8rem 0.8rem 0 0 #d2c3a6,
    0 22px 34px -20px rgb(57 38 22 / 50%);
}

.booklet::before {
  position: absolute;
  top: 0;
  right: 0;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0 1.4rem 0 0.4rem;
  background: linear-gradient(225deg, var(--paper-deep) 50%, #e6d9be 50%);
  content: "";
}

.booklet .pebble {
  align-self: flex-start;
  margin-top: auto;
}

.booklet__soon {
  margin-top: auto;
  color: var(--ink-soft);
  font-style: italic;
}

.booklet__soon + .pebble {
  margin-top: 0.4rem;
}

.booklet__clip {
  position: absolute;
  top: -1rem;
  left: 1.8rem;
  width: 0.95rem;
  height: 2.8rem;
  border: 0.2rem solid #8f989e;
  border-radius: 0.6rem;
  transform: rotate(-6deg);
}

.booklet__clip::after {
  position: absolute;
  inset: 0.35rem 0.12rem 0.6rem;
  border: 0.18rem solid #8f989e;
  border-radius: 0.4rem;
  content: "";
}

.booklet__kicker {
  margin: 0 0 0.3rem;
  color: var(--moss);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.booklet__title {
  margin-bottom: 0.7rem;
  font-size: clamp(1.35rem, 1.15rem + 1vw, 1.7rem);
}

.booklet__note {
  padding-left: 0.9rem;
  border-left: 0.25rem solid var(--yellow);
  font-weight: 700;
}

/* Coloring pages pegged on a washing line. */
.line {
  margin-top: clamp(3rem, 8vw, 4.5rem);
}

.line__title {
  font-size: clamp(1.3rem, 1.1rem + 1vw, 1.65rem);
  text-align: center;
}

.line__hint {
  margin: 0.4rem 0 0;
  color: var(--ink-soft);
  text-align: center;
}

.line__pages {
  display: flex;
  gap: 1.1rem;
  margin: 0 calc(var(--gutter) * -1);
  padding: 2.4rem var(--gutter) 1.6rem;
  overflow-x: auto;
  background: linear-gradient(#9c7a4d, #9c7a4d) 0 1.35rem / 100% 3px no-repeat local;
  list-style: none;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.line__page {
  position: relative;
  flex: 0 0 min(38vw, 12rem);
  scroll-snap-align: start;
  transform: rotate(-2.2deg);
  transform-origin: 50% -1rem;
}

.line__page:nth-child(even) {
  transform: rotate(1.8deg);
}

.line__page::before {
  position: absolute;
  top: -1.55rem;
  left: 50%;
  z-index: 1;
  width: 0.55rem;
  height: 1.75rem;
  border-radius: 0.2rem;
  background: linear-gradient(90deg, #c9a571, #e2c79c 50%, #b48d58);
  box-shadow: 0 2px 3px rgb(0 0 0 / 25%);
  content: "";
  transform: translateX(-50%);
}

.line__page a {
  display: block;
  color: var(--ink);
  text-decoration: none;
}

.line__page img {
  display: block;
  width: 100%;
  padding: 0.35rem;
  background: #fff;
  box-shadow: 0 10px 18px -10px rgb(57 38 22 / 55%);
}

.line__page a:hover img {
  animation: swing 1.3s ease-in-out;
}

.line__label {
  display: block;
  margin-top: 0.55rem;
  font-weight: 850;
  text-align: center;
}

.line__label small {
  display: block;
  color: var(--ink-soft);
  font-weight: 700;
}

@keyframes swing {
  0%,
  100% {
    transform: rotate(0deg);
  }

  30% {
    transform: rotate(3deg);
  }

  60% {
    transform: rotate(-2deg);
  }
}

/* Where Hardy goes next. The meadow at night, with fireflies. */
.night {
  position: relative;
  padding: clamp(4rem, 12vw, 7rem) 0 clamp(4.5rem, 12vw, 7.5rem);
  overflow: hidden;
  background:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 27% 64%, #fff6 50%, transparent 51%),
    radial-gradient(2px 2px at 44% 16%, #fff9 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 63% 38%, #fff6 50%, transparent 51%),
    radial-gradient(2px 2px at 86% 58%, #fff8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 92% 12%, #fff6 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 6% 80%, #fff5 50%, transparent 51%),
    radial-gradient(120% 90% at 80% 0%, #3f5f74 0%, #253e51 45%, var(--night) 100%);
  color: #f3ead6;
  text-align: center;
}

.night__inner {
  position: relative;
  z-index: 1;
  max-width: 42rem;
}

.night__grass {
  position: absolute;
  inset: auto 0 -1px;
  height: clamp(3rem, 10vw, 5rem);
  background-image: url("/img/grass-night.6e56031c7d.svg");
}

.night :focus-visible {
  outline-color: var(--yellow);
}

.kicker--night {
  color: var(--yellow);
}

.night__title {
  color: #fff6df;
  font-size: clamp(2rem, 1.5rem + 3vw, 3.3rem);
}

.night .squiggle {
  color: var(--yellow);
}

.night__text {
  margin: 1.2rem auto 0;
  font-size: 1.12em;
}

.night .pebble {
  margin-top: 1.5rem;
}

.night__moon {
  position: absolute;
  top: clamp(1.6rem, 6vw, 3rem);
  right: 11%;
  width: clamp(2.6rem, 9vw, 4.2rem);
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset -0.85rem 0.35rem 0 0 #f6e7b0;
  filter: drop-shadow(0 0 1.1rem rgb(246 231 176 / 55%));
}

.fireflies i {
  position: absolute;
  width: 0.38rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff7b8;
  box-shadow: 0 0 0.7rem 0.3rem rgb(255 236 140 / 60%);
  opacity: 0;
  animation: firefly 9s ease-in-out infinite;
}

.fireflies i:nth-child(1) {
  top: 72%;
  left: 6%;
  animation-delay: -1s;
}

.fireflies i:nth-child(2) {
  top: 30%;
  left: 14%;
  animation-delay: -4s;
  animation-duration: 11s;
}

.fireflies i:nth-child(3) {
  top: 82%;
  left: 24%;
  animation-delay: -7s;
}

.fireflies i:nth-child(4) {
  top: 55%;
  left: 33%;
  animation-delay: -2s;
  animation-duration: 12s;
}

.fireflies i:nth-child(5) {
  top: 88%;
  left: 46%;
  animation-delay: -5s;
}

.fireflies i:nth-child(6) {
  top: 20%;
  left: 58%;
  animation-delay: -8s;
  animation-duration: 10s;
}

.fireflies i:nth-child(7) {
  top: 76%;
  left: 66%;
  animation-delay: -3s;
}

.fireflies i:nth-child(8) {
  top: 40%;
  left: 78%;
  animation-delay: -6s;
  animation-duration: 13s;
}

.fireflies i:nth-child(9) {
  top: 86%;
  left: 88%;
  animation-delay: -9s;
}

.fireflies i:nth-child(10) {
  top: 60%;
  left: 94%;
  animation-delay: -2.5s;
  animation-duration: 11s;
}

.fireflies i:nth-child(11) {
  top: 14%;
  left: 30%;
  animation-delay: -10s;
}

.fireflies i:nth-child(12) {
  top: 64%;
  left: 52%;
  animation-delay: -4.5s;
  animation-duration: 14s;
}

.fireflies i:nth-child(13) {
  top: 26%;
  left: 90%;
  animation-delay: -7.5s;
}

.fireflies i:nth-child(14) {
  top: 92%;
  left: 12%;
  animation-delay: -11s;
  animation-duration: 12s;
}

@keyframes firefly {
  0%,
  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  20% {
    opacity: 1;
  }

  45% {
    opacity: 0.25;
    transform: translate3d(1.4rem, -1.2rem, 0);
  }

  70% {
    opacity: 0.95;
    transform: translate3d(-0.8rem, -2.2rem, 0);
  }
}

/* About the author. */
.about__inner {
  display: grid;
  gap: 1.5rem;
  justify-items: center;
  max-width: 54rem;
  text-align: center;
}

.about__ring {
  width: 8.5rem;
}

.about .squiggle {
  margin-bottom: 1rem;
}

.about__text {
  font-size: 1.05em;
}

/* Questions parents ask. */
.faq__list {
  display: grid;
  gap: 0.8rem;
}

.faq__item {
  border-radius: 1.1rem;
  background: var(--card);
  box-shadow: var(--shadow-card);
}

.faq__item summary {
  position: relative;
  padding: 1.05rem 3.4rem 1.05rem 1.25rem;
  font-weight: 850;
  cursor: pointer;
  list-style: none;
}

.faq__item summary::-webkit-details-marker {
  display: none;
}

.faq__item summary::after {
  position: absolute;
  top: 50%;
  right: 1.1rem;
  display: grid;
  width: 1.7rem;
  height: 1.7rem;
  place-items: center;
  border-radius: 50%;
  background:
    linear-gradient(var(--orange-deep) 0 0) center / 0.8rem 0.17rem no-repeat,
    linear-gradient(var(--orange-deep) 0 0) center / 0.17rem 0.8rem no-repeat,
    var(--paper-deep);
  content: "";
  transform: translateY(-50%);
  transition: transform 0.3s var(--ease-spring);
}

.faq__item[open] summary::after {
  transform: translateY(-50%) rotate(45deg);
}

.faq__item p {
  margin: 0;
  padding: 0 1.25rem 1.2rem;
  color: var(--ink-soft);
}

/* The footer meadow, with Hardy peeking out of the grass. */
.footer {
  margin-top: clamp(2rem, 6vw, 4rem);
  color: #f3ead6;
}

.footer__meadow {
  position: relative;
  height: clamp(9rem, 34vw, 12rem);
  overflow: hidden;
}

.footer__hardy {
  position: absolute;
  bottom: 0;
  left: clamp(1.2rem, 12vw, 9rem);
  z-index: 1;
  width: clamp(6rem, 22vw, 8rem);
  translate: 0 32%;
  animation: peek 7s ease-in-out infinite;
}

@keyframes peek {
  0%,
  55%,
  100% {
    transform: translateY(0) rotate(-3deg);
  }

  65% {
    transform: translateY(-0.9rem) rotate(2deg);
  }

  80% {
    transform: translateY(-0.6rem) rotate(-1deg);
  }
}

.footer__grass {
  position: absolute;
  inset: 0;
  height: 100%;
}

.footer__grass--back {
  background-image: url("/img/grass-footerBack.7db9f3f491.svg");
}

.footer__grass--front {
  inset: auto 0 -1px;
  z-index: 2;
  height: 38%;
  background-image: url("/img/grass-footerFront.0a57e0864d.svg");
}

.footer__body {
  padding: 1.5rem 0 2.5rem;
  background: var(--leaf-deep);
}

.footer__grid {
  display: grid;
  gap: 1.8rem;
}

.footer__name {
  margin: 0 0 0.4rem;
  font-size: 1.6rem;
}

.footer__heading {
  margin-bottom: 0.4rem;
  color: #ffe9a8;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.footer ul {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer a {
  display: inline-block;
  padding: 0.3rem 0;
  color: #fff6df;
  font-weight: 700;
  text-wrap: balance;
}

.footer a:hover {
  color: var(--yellow);
}

.footer :focus-visible {
  outline-color: var(--yellow);
}

.footer__small {
  margin-top: 2rem;
  color: #dfe6cf;
  font-size: 0.88rem;
}

/* A book's own page. */
.book-hero {
  position: relative;
  padding: clamp(2rem, 6vw, 4rem) 0 clamp(2.5rem, 8vw, 4.5rem);
  overflow: clip;
}

.book-hero--autumn {
  background:
    url("/img/grain.fbb21c96a3.png") repeat,
    radial-gradient(110% 55% at 50% 0%, #f9d8a2 0%, rgb(249 216 162 / 0%) 75%),
    var(--paper);
}

.book-hero--spring {
  background:
    url("/img/grain.fbb21c96a3.png") repeat,
    radial-gradient(110% 55% at 50% 0%, #d4e8c0 0%, rgb(212 232 192 / 0%) 75%),
    var(--paper);
}

.book-hero__inner {
  position: relative;
  display: grid;
  gap: 2.25rem;
}

.book-hero__cover {
  justify-self: center;
  width: min(80vw, 28rem);
}

.book-hero__title {
  margin: 0.8rem 0 0.5rem;
}

.book-hero__title .lettering {
  display: block;
  font-size: clamp(2.1rem, 9.4vw, 3.7rem);
  line-height: 1.02;
}

.book-hero__tail {
  display: block;
  margin-top: 0.2rem;
  font-size: clamp(1.45rem, 5.8vw, 2.35rem);
}

.book-hero__subtitle {
  color: var(--ink-soft);
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.35;
  text-wrap: balance;
}

.book-hero__hook {
  margin-top: 1.4rem;
  font-size: 1.2rem;
  font-weight: 850;
  line-height: 1.4;
}

.book-hero__ages {
  color: var(--ink-soft);
  font-weight: 750;
  text-wrap: balance;
}

.gallery {
  display: flex;
  gap: 1rem;
  margin: 0 calc(var(--gutter) * -1);
  padding: 0.5rem var(--gutter) 1.5rem;
  overflow-x: auto;
  list-style: none;
  overscroll-behavior-x: contain;
  scroll-padding-inline: var(--gutter);
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}

.gallery__item {
  flex: 0 0 min(84vw, 30rem);
  scroll-snap-align: start;
}

.gallery__item img {
  display: block;
  width: 100%;
  border-radius: 1.4rem;
  box-shadow: var(--shadow-card);
}

.review {
  margin-top: clamp(2.5rem, 7vw, 4rem);
  padding: 1.8rem 1.4rem;
  border: 2px dashed rgb(57 38 22 / 22%);
  border-radius: 1.6rem;
  text-align: center;
}

.review__title {
  margin-bottom: 0.8rem;
  font-size: clamp(1.45rem, 1.2rem + 1.2vw, 1.9rem);
}

.review__please {
  color: var(--ink-soft);
  font-style: italic;
}

/* Page not found. */
.lost {
  padding-block: clamp(3rem, 10vw, 6rem);
}

.lost__inner {
  display: grid;
  gap: 2rem;
  justify-items: center;
  text-align: center;
}

.lost__hardy {
  width: 11rem;
  transform: rotate(-4deg);
}

.lost__title {
  margin-bottom: 0.8rem;
  font-size: clamp(2rem, 1.5rem + 3vw, 3.2rem);
}

/* Wider screens. */
@media (width < 30em) {
  .nav__books {
    display: none;
  }

  .wordmark {
    font-size: 1.12rem;
  }

  .nav {
    font-size: 0.92rem;
  }

  .nav a {
    padding: 0.4rem 0.6rem;
  }
}

@media (width < 40em) {
  .section-head__intro {
    text-align: left;
  }

  .notebook {
    padding-left: 2.4rem;
    background:
      linear-gradient(
        90deg,
        transparent 1.6rem,
        rgb(196 55 44 / 35%) 1.6rem 1.7rem,
        transparent 1.7rem
      ),
      var(--card);
  }
}

@media (width >= 40em) {
  .cast__item {
    flex-basis: calc((100% - 2rem) / 3);
  }

  .footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .footer__brand {
    grid-column: 1 / -1;
  }

  .notebook {
    padding-left: 3.6rem;
  }
}

@media (width >= 48em) {
  .hero {
    grid-template: "title art" auto "text art" 1fr / minmax(0, 1fr) minmax(0, 1.08fr);
    gap: 0 clamp(2rem, 4vw, 4rem);
    align-items: center;
    max-width: 78rem;
    margin-inline: auto;
    padding: clamp(1.5rem, 4vw, 3rem) var(--gutter) 2rem;
  }

  .hero__title {
    grid-area: title;
    place-self: end start;
    margin: 0;
    font-size: clamp(3rem, 6.4vw, 6rem);
    text-align: left;
    white-space: normal;
  }

  .hero__title span {
    display: block;
  }

  .hero__art {
    border-radius: 47% 53% 44% 56% / 42% 46% 54% 58%;
    box-shadow:
      0 0 0 0.6rem rgb(255 253 247 / 70%),
      0 2.5rem 4rem -2rem rgb(57 38 22 / 55%);
  }

  .hero::before {
    position: absolute;
    inset: 0 calc(50% - 50vw);
    z-index: -1;
    background:
      url("/img/grain.fbb21c96a3.png") repeat,
      linear-gradient(rgb(251 246 234 / 35%), var(--paper) 92%),
      url("/img/hero-wash.6a3c4f2f38.webp") center / cover no-repeat;
    content: "";
  }

  .hero__text {
    align-self: start;
    padding: 1.4rem 0 0;
    text-align: left;
  }

  .hero__tagline {
    margin-left: 0;
  }

  .hero__actions {
    justify-content: flex-start;
  }
}

@media (width >= 60em) {
  .shelf {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }

  .shelf--single {
    grid-template-columns: minmax(0, 1fr);
  }

  .notebooks,
  .booklets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem;
  }

  .cast__item {
    flex-basis: calc((100% - 4rem) / 5);
  }

  .cast__ring,
  .about__ring {
    width: 9.5rem;
  }

  .line__pages {
    justify-content: center;
    margin: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .line__page {
    flex-basis: 12rem;
  }

  .about__inner {
    grid-template-columns: auto minmax(0, 1fr);
    gap: 3rem;
    align-items: center;
    text-align: left;
  }

  .about .squiggle {
    margin-left: 0;
  }

  .footer__grid {
    grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  }

  .footer__brand {
    grid-column: auto;
  }

  .book-hero__inner {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    align-items: start;
  }

  .book-hero__cover {
    position: sticky;
    top: 1.5rem;
  }

  .gallery {
    justify-content: center;
    margin: 0;
    padding-inline: 0;
    overflow: visible;
  }

  .gallery__item {
    flex: 1 1 0;
    max-width: 30rem;
  }

  .lost__inner {
    grid-template-columns: auto minmax(0, 32rem);
    justify-content: center;
    text-align: left;
  }

  .lost .hero__actions {
    justify-content: flex-start;
  }
}

/* Cards rise gently into view as you scroll, where the browser can do it
   without any script. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .book-card,
    .notebook,
    .cast__item,
    .booklet,
    .faq__item,
    .gallery__item {
      animation: rise both var(--ease-spring);
      animation-range: entry 0% cover 22%;
      animation-timeline: view();
    }
  }
}

@keyframes rise {
  from {
    transform: translateY(1.5rem) scale(0.985);
  }

  to {
    transform: none;
  }
}

/* Nothing moves for readers who ask for less motion, or on slow screens
   such as e-ink. */
@media (prefers-reduced-motion: reduce), (update: slow) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  .motes,
  .leaves,
  .fireflies {
    display: none;
  }

  .hero__grass {
    background-image: url("/img/grass-hero-still.41c1c96661.svg");
  }

  .night__grass {
    background-image: url("/img/grass-night-still.deb9924925.svg");
  }

  .footer__grass--back {
    background-image: url("/img/grass-footerBack-still.7aad39f3bd.svg");
  }

  .footer__grass--front {
    background-image: url("/img/grass-footerFront-still.2fe47506e6.svg");
  }
}

@media print {
  .masthead,
  .footer,
  .night,
  .hero__actions,
  .buy {
    display: none;
  }

  body {
    background: #fff;
  }
}