/* Storybook pages: cream paper on the felt meadow.
   Loaded after styles.css so the column, cards, and buttons win. */

html,
body {
  min-height: 100%;
}

/* One meadow, fixed to the window, so the paper sits on felt
   for the whole scroll. It is not tiled, and it is not a second
   crop laid over itself. */
html {
  background-color: #72682E;
  background-image: url("images/meadow-hero-2000.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  background-attachment: fixed;
}

body {
  position: relative;
  background: transparent;
}

/* Desktop: the fixed meadow is the picture, so the hero is a
   clear opening above the card. Top alignment keeps the bee's
   wings and Pip in frame. Phone: the same art is shown whole,
   at its real shape, so neither of them is cropped. */
.book-hero {
  position: relative;
  width: 100%;
  height: clamp(420px, 72vh, 760px);
  margin: 0;
  padding: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}

.book-hero-art {
  display: none;
}

.book-hero .reading-bar {
  position: absolute;
  top: 0.45rem;
  left: 0.7rem;
  right: auto;
  z-index: 2;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  justify-content: flex-start;
}

.book-hero .reading-ctrl button {
  opacity: 0.9;
  text-shadow:
    0 0 2px #FBF6EB,
    0 0 6px #FBF6EB,
    1px 0 0 #FBF6EB,
    -1px 0 0 #FBF6EB,
    0 1px 0 #FBF6EB,
    0 -1px 0 #FBF6EB;
}

.book-hero .reading-ctrl button[aria-pressed="true"] {
  opacity: 1;
}

body > * {
  position: relative;
  z-index: 1;
}

main,
footer,
.hero,
.action-row,
.add-page,
.reading-bar {
  background: transparent;
}

.reading-bar {
  padding: 0.85rem 1.5rem 0.15rem;
}

.hero {
  display: block;
}

.hero-inner,
.action-row-inner,
.see-wide {
  position: static;
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
  display: block;
  pointer-events: auto;
}

.bot-card .action-row {
  width: auto;
  margin: 1.15rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 2px solid var(--box);
  background: transparent;
}

.bot-card .action-row-inner {
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

/* One paper column. 720px on a wide screen, full width on a phone
   with 24px of padding inside the sheet. */
.bot-card,
.add-card,
.section.wrap,
.see-wide,
.links.wrap,
.footer-inner {
  width: 100%;
  max-width: none;
  margin: 1.15rem 0 0;
  background: var(--cream);
  color: var(--ink);
  border: 0;
  border-radius: 0;
  box-shadow: 0 14px 36px rgba(27, 42, 74, 0.16);
  padding: 1.35rem 24px 1.6rem;
}

.hero .bot-card,
.add-main .add-card {
  margin-top: -3.25rem;
}

.bot-card-body {
  padding: 0;
}

.footer-inner {
  margin-bottom: 1.75rem;
  border-top: 0;
  text-align: center;
}

.makers {
  display: block;
  margin: 0 0 0.95rem;
  border-radius: 18px;
  overflow: hidden;
  border: 1.5px solid var(--box);
  line-height: 0;
}
.makers img {
  display: block;
  width: 100%;
  height: auto;
}
.makers:hover,
.makers:focus-visible {
  border-color: var(--gold);
}

.see {
  padding: 0;
  background: transparent;
}

.section {
  padding: 0;
}

.links {
  padding: 0;
}

@media (min-width: 768px) {
  .bot-card,
  .add-card,
  .section.wrap,
  .see-wide,
  .links.wrap,
  .footer-inner {
    width: min(45rem, calc(100% - 4.5rem));
    margin-left: auto;
    margin-right: auto;
    border-radius: 22px;
    padding: 1.7rem 2.5rem 1.9rem;
  }

  .hero .bot-card,
  .add-main .add-card {
    margin-top: -4.5rem;
  }
}

.bot-card h1,
.add-card h1 {
  text-align: center;
  letter-spacing: -0.01em;
  font-size: clamp(1.65em, 4.2vw, 2.05em);
}

.section h2,
.see h2,
.links h2,
.note h2,
.hs-os h2,
.add-note h2,
.fallback h2 {
  text-align: center;
}

.section h2::after,
.see h2::after,
.links h2::after,
.note h2::after,
.hs-os h2::after,
.add-note h2::after,
.fallback h2::after {
  content: "";
  display: block;
  width: 3.25rem;
  height: 3px;
  margin: 0.7rem auto 0;
  background: var(--gold);
  border: 0;
  border-radius: 2px;
}

.btn {
  background: var(--mustard);
  color: var(--navy);
  border: 2px solid var(--navy);
  min-height: 56px;
  font-weight: 700;
}

.btn:hover,
.btn:focus-visible {
  background: #D09A32;
  color: var(--navy);
  border-color: var(--navy);
}

.btn:focus-visible {
  outline: 3px solid var(--navy);
  outline-offset: 3px;
}

.cta .btn {
  min-width: min(100%, 18rem);
  padding-left: 1.4rem;
  padding-right: 1.4rem;
}

@media (max-width: 900px) {
  .hero {
    display: block;
  }

  .hero-inner {
    position: static;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .bot-card {
    max-width: none;
  }
}

@media (max-width: 767px) {
  .book-hero {
    height: auto;
  }

  .book-hero-art {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
    object-fit: contain;
    object-position: center top;
  }

  .hero .bot-card,
  .add-main .add-card {
    margin-top: -2.75rem;
  }
}

@media (max-width: 700px) {
  .hero,
  .hero-inner,
  .wrap,
  .footer-inner,
  .see-wide,
  .action-row-inner {
    width: 100%;
  }

  .action-row {
    padding-left: 0;
    padding-right: 0;
  }
}