/* The storybook theme: warm cream paper, honey and cocoa, round chunky letters, soft cards that
   sit up off the page like stickers. Switched on by class="storybook" on <html>; loaded last. */

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

html.storybook {
  --sb-paper: #fff7e8;
  --sb-paper-2: #fdeed3;
  --sb-card: #fffcf4;
  --sb-edge: #f1d9b0;
  --sb-honey: #f0b04f;
  --sb-honey-deep: #d98b2b;
  --sb-cocoa: #5a3a22;
  --sb-cocoa-soft: #8a6446;
  --sb-pink: #f7c9bf;
  --sb-leaf: #8cba6b;
  --sb-leaf-deep: #5e9248;
  --sb-sky: #cfe6ec;
  --sb-round: "Fredoka", "Nunito", system-ui, sans-serif;
  --sb-body: "Nunito", system-ui, sans-serif;
  --sb-shadow: 0 6px 0 var(--sb-edge), 0 14px 28px rgba(140, 90, 40, 0.1);

  /* the site's own names, pointed at the new palette */
  --paper: var(--sb-paper);
  --card: var(--sb-card);
  --ink: var(--sb-cocoa);
  --muted: var(--sb-cocoa-soft);
  --line: var(--sb-edge);
  --accent: var(--sb-honey-deep);
  --accent-deep: var(--sb-cocoa);
  --accent-soft: var(--sb-paper-2);
  --display: var(--sb-round);
  --hand: var(--sb-round);
  --serif: var(--sb-round);
}

html.storybook body {
  font-family: var(--sb-body);
  color: var(--sb-cocoa);
  background-color: var(--sb-paper);
  /* a faint scatter of honey dots and little paw prints */
  background-image:
    radial-gradient(circle at 20px 20px, rgba(240, 176, 79, 0.16) 2.5px, transparent 3px),
    radial-gradient(circle at 70px 60px, rgba(140, 186, 107, 0.14) 2px, transparent 2.5px);
  background-size: 96px 96px, 96px 96px;
}
html.storybook ::selection {
  background: var(--sb-pink);
}
html.storybook a {
  text-decoration-color: rgba(217, 139, 43, 0.5);
  text-decoration-thickness: 2px;
}
html.storybook a:hover {
  color: var(--sb-honey-deep);
}

/* ---- type ---- */
html.storybook h1,
html.storybook h2,
html.storybook h3 {
  font-family: var(--sb-round);
  font-weight: 600;
  font-variation-settings: normal;
  color: var(--sb-cocoa);
  letter-spacing: -0.01em;
}
html.storybook h1 {
  letter-spacing: -0.02em;
}
html.storybook h1 em,
html.storybook h2 em {
  font-style: normal;
  font-weight: 700;
  color: var(--sb-honey-deep);
  font-variation-settings: normal;
  /* a honey underline swash */
  background: linear-gradient(transparent 72%, rgba(240, 176, 79, 0.4) 72%, rgba(240, 176, 79, 0.4) 92%, transparent 92%);
  border-radius: 6px;
  padding: 0 0.06em;
}
html.storybook p,
html.storybook li {
  color: inherit;
}
html.storybook .hero-lead,
html.storybook .dek,
html.storybook .section-heading p:not(.kicker),
html.storybook .pull p,
html.storybook .project-note p:first-child,
html.storybook .diary-earlier q {
  font-family: var(--sb-round) !important;
  font-style: normal !important;
  font-weight: 500 !important;
  font-variation-settings: normal !important;
}
html.storybook .hero-lead {
  color: var(--sb-cocoa-soft);
}
html.storybook .kicker {
  display: inline-flex;
  font-family: var(--sb-round);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--sb-cocoa);
  background: var(--sb-paper-2);
  border: 2px solid var(--sb-edge);
  padding: 5px 14px 5px 12px;
  border-radius: 999px;
}
html.storybook .kicker::before {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--sb-honey);
  box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.08);
}
html.storybook .section-heading .kicker,
html.storybook .questions-section > .kicker,
html.storybook .story-copy > .kicker,
html.storybook .frogs-hero .kicker,
html.storybook .essay > .kicker,
html.storybook main > .kicker {
  margin-left: auto;
  margin-right: auto;
}
html.storybook .story-copy > .kicker,
html.storybook .questions-section > .kicker,
html.storybook .frogs-hero .kicker,
html.storybook main > .kicker {
  display: flex;
  width: max-content;
}
html.storybook mark {
  background: linear-gradient(transparent 55%, rgba(247, 201, 191, 0.85) 55%) !important;
  border-radius: 4px;
}
html.storybook .margin-note {
  font-family: var(--sb-round);
  font-weight: 500;
  color: var(--sb-honey-deep);
}
html.storybook .dropcap::first-letter,
html.storybook .body > p:first-of-type::first-letter {
  font-family: var(--sb-round);
  font-weight: 700;
  color: var(--sb-honey-deep);
  font-variation-settings: normal;
}
html.storybook .pull::before,
html.storybook .pull::after {
  font-family: var(--sb-round);
  color: rgba(240, 176, 79, 0.5);
}
html.storybook .pull p {
  color: var(--sb-cocoa) !important;
}

/* ---- the header ---- */
html.storybook .site-header,
html.storybook .top {
  background: none;
}
html.storybook .wordmark {
  font-family: var(--sb-round) !important;
  font-style: normal !important;
  font-weight: 700 !important;
  font-variation-settings: normal !important;
  color: var(--sb-cocoa) !important;
  letter-spacing: -0.01em;
}
html.storybook .site-header nav,
html.storybook .top nav {
  background: var(--sb-card) !important;
  border: 3px solid var(--sb-edge) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 0 var(--sb-edge) !important;
  padding: 5px !important;
}
html.storybook .site-header nav a,
html.storybook .top nav a {
  font-family: var(--sb-round);
  font-weight: 500;
  color: var(--sb-cocoa) !important;
  border-radius: 999px;
  padding: 6px 14px;
  text-decoration: none;
}
html.storybook .site-header nav a:hover,
html.storybook .top nav a:hover {
  background: var(--sb-paper-2);
}
html.storybook nav a[aria-current="page"] {
  background: var(--sb-honey) !important;
  color: var(--sb-cocoa) !important;
}
html.storybook .x-link {
  color: var(--sb-cocoa) !important;
}

/* ---- buttons: chunky honey stickers ---- */
html.storybook .land-link,
html.storybook .action,
html.storybook .button.primary,
html.storybook .join-cta .land-link {
  font-family: var(--sb-round);
  font-weight: 600;
  font-size: 16px;
  color: var(--sb-cocoa) !important;
  background: var(--sb-honey) !important;
  border: 3px solid var(--sb-cocoa) !important;
  border-radius: 999px !important;
  box-shadow: 0 5px 0 var(--sb-cocoa) !important;
  padding: 11px 26px;
  transition: transform 0.12s, box-shadow 0.12s;
}
html.storybook .land-link:hover,
html.storybook .action:hover,
html.storybook .button.primary:hover {
  transform: translateY(2px) !important;
  box-shadow: 0 3px 0 var(--sb-cocoa) !important;
  filter: none;
}
html.storybook .action.quiet {
  background: var(--sb-card) !important;
}
html.storybook .action:disabled {
  opacity: 0.45;
  transform: none !important;
}
html.storybook .inline-link {
  font-family: var(--sb-round);
  font-weight: 600;
}

/* ---- cards: soft paper stickers ---- */
html.storybook .trying li,
html.storybook .activity-preview,
html.storybook .rules ul,
html.storybook .story-copy .source-note,
html.storybook .frog-cards a,
html.storybook .posts li,
html.storybook .questions-list details,
html.storybook .q-card,
html.storybook .my-frogs li,
html.storybook .diary-archive article,
html.storybook .claim,
html.storybook .closed {
  background: var(--sb-card) !important;
  border: 3px solid var(--sb-edge) !important;
  border-radius: 28px !important;
  box-shadow: var(--sb-shadow) !important;
}
html.storybook .q-card details {
  border: 0 !important;
  box-shadow: none !important;
  background: none !important;
}
html.storybook .trying li {
  padding: 26px 26px 24px !important;
}
html.storybook .trying .num,
html.storybook .diary-how .num {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 0 12px;
  font-family: var(--sb-round);
  font-size: 24px;
  font-weight: 700;
  color: var(--sb-cocoa);
  background: var(--sb-honey);
  border: 3px solid var(--sb-cocoa);
  border-radius: 50%;
  transform: none;
}
html.storybook .trying li:nth-child(2) .num {
  background: var(--sb-pink);
  transform: none;
}
html.storybook .trying li:nth-child(3) .num {
  background: var(--sb-leaf);
}
html.storybook .diary-how .num {
  width: 36px;
  height: 36px;
  font-size: 18px;
  top: -4px;
}
html.storybook .diary-how li {
  padding-left: 52px;
}
html.storybook .story-copy .source-note {
  border-left-width: 3px !important;
  padding: 18px 24px !important;
}
html.storybook .note-label {
  font-family: var(--sb-round);
  color: var(--sb-honey-deep);
}
html.storybook .questions-list summary {
  font-family: var(--sb-round) !important;
  font-weight: 600 !important;
}

/* the pastime tabs */
html.storybook .activities {
  background: var(--sb-card) !important;
  border: 3px solid var(--sb-edge) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 0 var(--sb-edge) !important;
}
html.storybook .activity {
  font-family: var(--sb-round);
  font-weight: 600;
  color: var(--sb-cocoa) !important;
  border-radius: 999px !important;
}
html.storybook .activity.active {
  background: var(--sb-honey) !important;
  color: var(--sb-cocoa) !important;
}

/* the pond picture: a framed storybook plate */
html.storybook .glimpse-view {
  border: 4px solid var(--sb-cocoa) !important;
  border-radius: 32px !important;
  overflow: hidden;
  box-shadow: 0 8px 0 var(--sb-cocoa), 0 24px 40px rgba(140, 90, 40, 0.15) !important;
}
html.storybook .glimpse figcaption {
  font-family: var(--sb-round);
  background: var(--sb-card) !important;
  border: 3px solid var(--sb-edge) !important;
  border-radius: 999px !important;
  box-shadow: 0 4px 0 var(--sb-edge) !important;
  padding: 8px 18px;
}

/* the diary page: a lined notebook sheet with a honey tab */
html.storybook .diary-page {
  background: var(--sb-card) repeating-linear-gradient(transparent 0 33px, rgba(217, 139, 43, 0.14) 33px 35px) !important;
  border: 3px solid var(--sb-edge);
  border-radius: 24px;
  box-shadow: var(--sb-shadow);
  transform: rotate(-0.8deg);
}
html.storybook .diary-page::before {
  background: rgba(247, 201, 191, 0.85) !important;
  border-radius: 6px;
}
html.storybook .diary-text {
  font-family: var(--sb-round) !important;
  font-weight: 500;
  color: var(--sb-cocoa) !important;
}
html.storybook .diary-author {
  font-family: var(--sb-round) !important;
  color: var(--sb-honey-deep) !important;
}
html.storybook .diary-date,
html.storybook .diary-earlier .when {
  color: var(--sb-honey-deep) !important;
}
html.storybook .diary-all {
  color: var(--sb-honey-deep);
  font-family: var(--sb-round);
}

/* little pills: the live line and the invite status */
html.storybook .alive,
html.storybook .status-pill {
  display: inline-flex;
  font-family: var(--sb-round);
  font-weight: 500;
  background: var(--sb-card);
  border: 3px solid var(--sb-edge);
  border-radius: 999px;
  padding: 7px 16px;
  box-shadow: 0 3px 0 var(--sb-edge);
}
html.storybook .alive .dot,
html.storybook .status-pill.open .dot {
  background: var(--sb-leaf-deep);
}
html.storybook .alive b {
  color: var(--sb-cocoa);
}

/* forms */
html.storybook input {
  font-family: var(--sb-body);
  background: var(--sb-card) !important;
  border: 3px solid var(--sb-edge) !important;
  border-radius: 999px !important;
  color: var(--sb-cocoa) !important;
}
html.storybook input:focus {
  outline: none;
  border-color: var(--sb-honey) !important;
}
html.storybook .command {
  background: var(--sb-cocoa) !important;
  color: #fde9c8 !important;
  border: 0 !important;
  border-radius: 16px !important;
}

/* between sections: a row of little scalloped hills with a honey dot */
html.storybook .story-divider {
  height: 34px;
  max-width: 420px;
  margin: 10px auto;
  background:
    radial-gradient(circle at 50% 50%, var(--sb-honey) 6px, transparent 7px) center / 34px 34px no-repeat,
    radial-gradient(circle at 50% 100%, var(--sb-edge) 9px, transparent 10px) 0 0 / 26px 20px repeat-x;
  background-position: center, center bottom;
  opacity: 0.9;
}

/* the closing line and the footer */
html.storybook .project-note p:first-child {
  color: var(--sb-cocoa) !important;
}
html.storybook .project-note .sign {
  color: var(--sb-honey-deep);
}
html.storybook .site-footer,
html.storybook .bottom {
  background: var(--sb-paper-2) !important;
  border: 3px solid var(--sb-edge) !important;
  border-radius: 36px 36px 0 0 !important;
  box-shadow: none !important;
}
html.storybook .essay,
html.storybook .project-note,
html.storybook .bottom,
html.storybook .top {
  background-image: none !important;
}

/* the bears page cards */
html.storybook .frog-cards b {
  font-family: var(--sb-round) !important;
}
html.storybook .frog-cards a:hover {
  transform: translateY(-3px) rotate(-0.6deg);
  border-color: var(--sb-honey) !important;
}

/* ---- the forest page's floating bits ---- */
html.storybook .panel,
html.storybook .hint,
html.storybook .readers button,
html.storybook .reader-sheet {
  font-family: var(--sb-body);
  background: rgba(255, 252, 244, 0.95) !important;
  border: 3px solid var(--sb-edge) !important;
  border-radius: 22px !important;
  box-shadow: 0 4px 0 var(--sb-edge) !important;
  color: var(--sb-cocoa);
}
html.storybook .readers button {
  border-radius: 999px !important;
  font-family: var(--sb-round);
  font-weight: 600;
}
html.storybook .who-name,
html.storybook .reader-sheet h2,
html.storybook .loading p {
  font-family: var(--sb-round) !important;
}
html.storybook .loading {
  background: var(--sb-paper);
}

html.storybook .alive {
  width: max-content;
  max-width: 100%;
}

/* the old theme's wavy rules between sections: the scalloped dividers replace them */
html.storybook .adopt,
html.storybook .rules,
html.storybook .how,
html.storybook .frogs-list,
html.storybook .join,
html.storybook .essay {
  background-image: none !important;
  border-top: 0 !important;
}

/* ---- readability: darker ink, a deeper honey for any honey-coloured words, sturdier letters ---- */
html.storybook {
  --sb-cocoa: #3b2414;
  --sb-cocoa-soft: #6a4a30;
  --sb-honey-text: #a35a14;
  --ink: var(--sb-cocoa);
  --muted: var(--sb-cocoa-soft);
  --accent: var(--sb-honey-text);
}
html.storybook body {
  font-weight: 500;
  /* the dot pattern, quieter, so it never sits behind letters */
  background-image:
    radial-gradient(circle at 20px 20px, rgba(240, 176, 79, 0.09) 2.5px, transparent 3px),
    radial-gradient(circle at 70px 60px, rgba(140, 186, 107, 0.08) 2px, transparent 2.5px);
}
html.storybook p,
html.storybook li,
html.storybook summary,
html.storybook .muted {
  color: var(--sb-cocoa);
}
html.storybook .hero-description,
html.storybook .story-copy p,
html.storybook .prose p,
html.storybook .trying p,
html.storybook .diary-how p,
html.storybook .activity-preview p,
html.storybook .questions-list details p,
html.storybook .rules li,
html.storybook .body p,
html.storybook .body li,
html.storybook .lead {
  color: var(--sb-cocoa) !important;
  font-size: max(17px, 1em);
  line-height: 1.7;
}
html.storybook .hero-lead,
html.storybook .section-heading p:not(.kicker),
html.storybook .diary-intro,
html.storybook .diary-about,
html.storybook .note,
html.storybook .intro,
html.storybook .dek,
html.storybook .posts p,
html.storybook .source-note,
html.storybook .who-meta,
html.storybook .reader-note,
html.storybook .frog-cards span,
html.storybook .diary-model,
html.storybook .join-status,
html.storybook .small,
html.storybook .glimpse figcaption span {
  color: var(--sb-cocoa-soft) !important;
}
/* honey-coloured words: deep enough to read */
html.storybook h1 em,
html.storybook h2 em,
html.storybook .margin-note,
html.storybook .note-label,
html.storybook .diary-date,
html.storybook .diary-earlier .when,
html.storybook .diary-author,
html.storybook .diary-all,
html.storybook .project-note .sign,
html.storybook .dropcap::first-letter,
html.storybook .body > p:first-of-type::first-letter,
html.storybook .posts time,
html.storybook article time,
html.storybook .frog-cards .status.here,
html.storybook a:hover {
  color: var(--sb-honey-text) !important;
}
html.storybook h1 em,
html.storybook h2 em {
  background: linear-gradient(transparent 70%, rgba(240, 176, 79, 0.55) 70%, rgba(240, 176, 79, 0.55) 94%, transparent 94%);
}
html.storybook .kicker {
  color: var(--sb-cocoa) !important;
  font-weight: 700;
}
html.storybook a {
  text-decoration-color: var(--sb-honey);
}
/* the honey buttons keep dark text, which already reads well */
html.storybook .land-link,
html.storybook .action,
html.storybook .button.primary,
html.storybook .activity.active,
html.storybook nav a[aria-current="page"] {
  color: var(--sb-cocoa) !important;
}

html.storybook .story-copy .source-note {
  font-size: 16px !important;
  color: var(--sb-cocoa) !important;
}
html.storybook .source-note .note-label {
  font-size: 19px;
}

/* the little squiggle over article headings, in honey */
html.storybook .body h2::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 12'%3E%3Cpath d='M1 7 C 6 1, 11 11, 17 6 S 27 1, 33 6' fill='none' stroke='%23d98b2b' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
html.storybook .body blockquote {
  margin: 1.4em 0;
  padding: 16px 22px;
  background: var(--sb-card);
  border: 3px solid var(--sb-edge);
  border-radius: 22px;
}

/* drawings saved on old paper sit into the cream page */
/* the lost bear sits in a round honey frame */
html.storybook .lost img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid var(--sb-edge);
  box-shadow: 0 6px 0 var(--sb-edge);
}
html.storybook .loading img {
  mix-blend-mode: multiply;
}
html.storybook .lost .links {
  align-items: center;
}