/* colorearcozy.com. Plain CSS, no build step. Two rounded families: Fredoka for headings, buttons and labels, Nunito
   for text. Light only. The look follows the logo and the "Colorear Cozy" label on the covers: cream paper, dusty pink,
   sage stitching and cocoa-brown lines. */

/* Self-hosted (static/fonts/, latin subset, SIL Open Font License): no request to Google. */
@font-face {
  font-family: "Fredoka";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url(/fonts/fredoka.woff2) format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/fonts/nunito.woff2) format("woff2");
}
@font-face {
  font-family: "Nunito";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/nunito-italic.woff2) format("woff2");
}

/* Brand palette, taken from the logo (static/logo.svg). The zinc scale keeps its names but is warm, so every grey on the
   site is a soft cocoa. */
:root {
  --cream: #fbf5ee; /* the page */
  --paper: #fffcf8; /* cards and panels */
  --rose: #e9afaf; /* the mug */
  --rose-l: #f6d9d6;
  --rose-xl: #fcefec;
  --rose-d: #d99595;
  --rose-ink: #a55d66; /* pink text, readable on cream */
  --sage: #9db59a; /* the stitching */
  --sage-l: #e5eee1;
  --sage-ink: #5f7d5c;
  --butter: #f3d98f;
  --butter-l: #fcf1d2;
  --ink: #4e3630; /* cocoa: lines, headings */
  --z900: #4e3630;
  --z800: #5c433c;
  --z700: #6b5049;
  --z600: #7d635b;
  --z500: #957c73;
  --z400: #b3a097;
  --z300: #dcc9be;
  --z200: #eadcd3;
  --z100: #f5ece5;
  --z50: #faf4ee;
  /* Corner radius scale, so nested corners stay concentric across the site. */
  --r-4xl: 28px; /* cards, panels */
  --r-3xl: 22px; /* cards nested in those, sample pages */
  --r-2xl: 16px; /* images and blocks inside cards */
  --r-xl: 12px; /* small elements: icon tiles, chips */
  /* Sticker shadow: a solid cocoa offset, like the logo's tag. */
  --pop: 3px 3px 0 var(--ink);
  --soft: 0 1px 2px rgb(78 54 48 / 0.06), 0 16px 36px -20px rgb(78 54 48 / 0.32);
  --display: "Fredoka", ui-rounded, "SF Pro Rounded", system-ui, sans-serif;
  --sans: "Nunito", ui-rounded, "SF Pro Rounded", system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  /* Little hearts: list bullets and decorations (a mask, so they take the current color). */
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21C4.5 15.6 1 11.8 1 7.4A5.9 5.9 0 0 1 12 4.3 5.9 5.9 0 0 1 23 7.4C23 11.8 19.5 15.6 12 21Z'/%3E%3C/svg%3E");
  --sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Cpath d='M0-4C.4-1 1-.4 4 0 1 .4.4 1 0 4-.4 1-1 .4-4 0-1-.4-.4-1 0-4Z'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* ---- reset ------------------------------------------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0 solid;
}
html {
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  /* iPhone: no grey flash when tapping links and buttons (they have their own hover and press styles). */
  -webkit-tap-highlight-color: transparent;
  /* Keep in-page jumps (#faq, #preguntas) clear of the sticky header. */
  scroll-padding-top: 4.5rem;
}
body {
  background: var(--cream);
  color: var(--ink);
  /* In landscape the content stays clear of the notch and the Dynamic Island. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}
img,
svg {
  display: block;
  vertical-align: middle;
}
img {
  max-width: 100%;
  height: auto;
}
a {
  color: inherit;
  text-decoration: inherit;
}
b {
  font-weight: 700;
}
ul,
ol {
  list-style: none;
}
button,
input {
  font: inherit;
  color: inherit;
  background: transparent;
}
button:not(:disabled) {
  cursor: pointer;
}
[hidden] {
  display: none !important;
}
::selection {
  background: var(--rose-l);
  color: var(--ink);
}
:focus-visible {
  outline: 3px solid var(--rose-d);
  outline-offset: 3px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
@media (min-width: 40rem) {
  html {
    scroll-padding-top: 4rem;
  }
}

/* ---- layout ------------------------------------------------------------------------------------------------------ */

.site {
  min-height: 100vh;
}
.wrap {
  margin-inline: auto;
  padding-inline: 1rem;
}
.w-2xl {
  max-width: 42rem;
}
.w-3xl {
  max-width: 48rem;
}
.w-4xl {
  max-width: 56rem;
}
.w-5xl {
  max-width: 64rem;
}
.w-6xl {
  max-width: 72rem;
}
.w-7xl {
  max-width: 80rem;
}
@media (min-width: 40rem) {
  .wrap {
    padding-inline: 1.5rem;
  }
}
@media (min-width: 64rem) {
  .wrap.w-6xl {
    padding-inline: 2.5rem;
  }
  .wrap.w-7xl {
    padding-inline: 2rem;
  }
}

.pad {
  padding-block: 3rem;
}
.pad-lg {
  padding-block: 3.5rem;
}
.pad-thanks {
  padding-block: 3rem;
}
.pad-article {
  padding-block: 2.5rem;
}
@media (min-width: 64rem) {
  .pad {
    padding-block: 4rem;
  }
  .pad-lg,
  .pad-thanks {
    padding-block: 5rem;
  }
  .pad-article {
    padding-block: 3.5rem;
  }
}

.bg-white {
  background: var(--cream);
}
/* Soft pink with a polka-dot print, like a cosy blanket. */
.bg-cream {
  background-color: var(--rose-xl);
  background-image: radial-gradient(rgb(233 175 175 / 0.35) 1.6px, transparent 1.8px);
  background-size: 22px 22px;
}
.bg-zinc-50 {
  background: #f3f6ef;
}
.border-t {
  border-top: 2px dashed var(--z200);
}
.border-y {
  border-block: 2px dashed var(--sage-l);
}
.center {
  text-align: center;
}
.mx-auto {
  margin-inline: auto;
}
.max-2xl {
  max-width: 42rem;
}
.grow {
  flex: 1;
}
.balance {
  text-wrap: balance;
}
.pretty {
  text-wrap: pretty;
}
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-5 { margin-top: 1.25rem; }
.mt-6 { margin-top: 1.5rem; }
.mt-8 { margin-top: 2rem; }
.mt-10 { margin-top: 2.5rem; }
.mt-12 { margin-top: 3rem; }
.mt-14 { margin-top: 3.5rem; }

/* ---- type -------------------------------------------------------------------------------------------------------- */

.h-hero,
.h-book,
.h2,
.h2-sm,
.h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.h-hero,
.h-book {
  font-size: 2.5rem;
  line-height: 2.75rem;
}
.h-hero {
  text-wrap: balance;
}
.h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.h2-sm {
  font-size: 1.5rem;
  line-height: 2rem;
}
.h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
/* A heading's key word, underlined with a pink wavy stitch. */
.wavy {
  position: relative;
  white-space: nowrap;
  color: var(--rose-ink);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10'%3E%3Cpath d='M0 5q5-5 10 0t10 0 10 0 10 0' fill='none' stroke='%23e9afaf' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left bottom / 0.9em 0.24em;
  padding-bottom: 0.12em;
}
.h3-sm {
  font-size: 1.125rem;
}
@media (min-width: 40rem) {
  .h-hero {
    font-size: 4rem;
    line-height: 1.05;
  }
  .h-book {
    font-size: 3.25rem;
    line-height: 1.05;
  }
  .h2 {
    font-size: 2.25rem;
    line-height: 2.5rem;
  }
  .h2-sm {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}
.lead {
  font-size: 1.125rem;
  line-height: 2rem;
  color: var(--z700);
}
.lead-plain {
  font-size: 1.125rem;
  line-height: 1.75rem;
  color: var(--z700);
}
.intro-first {
  font-size: 1.25rem;
  line-height: 2rem;
  color: var(--z800);
}
.text {
  line-height: 1.75rem;
  color: var(--z700);
}
.muted {
  color: var(--z600);
}
.small-muted {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--z500);
}
.eyebrow,
.series-label {
  font-family: var(--display);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose-ink);
}
.link {
  font-weight: 700;
  color: var(--rose-ink);
  text-decoration: underline;
  text-decoration-color: var(--rose);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.link:hover {
  text-decoration-color: currentColor;
}

/* ---- buttons and chips ------------------------------------------------------------------------------------------- */

/* Site buttons: a rounded sticker with a cocoa outline and offset shadow. It lifts on hover and presses in on tap. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 3rem;
  padding: 0 1.6rem;
  border-radius: 9999px;
  border: 2px solid var(--ink);
  font-family: var(--display);
  font-size: 1.0625rem;
  line-height: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: var(--pop);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s,
    opacity 0.2s;
}
.btn:hover:not(:disabled) {
  transform: translate(-1px, -2px);
  box-shadow: 4px 5px 0 var(--ink);
}
.btn:active:not(:disabled) {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink);
}
.btn:disabled {
  opacity: 0.6;
}
.btn-dark {
  background: var(--rose);
}
.btn-dark:hover:not(:disabled) {
  background: #eebcbc;
}
.btn-light {
  background: var(--paper);
}
.btn-light:hover:not(:disabled) {
  background: var(--sage-l);
}
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.soon-pill {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  gap: 0.6rem;
  border-radius: 9999px;
  border: 2px dashed #e2c36e;
  background: var(--butter-l);
  padding: 0 1.5rem;
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
}
.dot {
  width: 0.6rem;
  height: 0.6rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--rose-d);
  box-shadow: 0 0 0 0 rgb(217 149 149 / 0.6);
  animation: dot-pulse 2.4s ease-out infinite;
}
@keyframes dot-pulse {
  70% {
    box-shadow: 0 0 0 0.5rem rgb(217 149 149 / 0);
  }
}
/* "Láminas extra", "¡Hecho!" */
.chip {
  display: inline-block;
  border-radius: 9999px;
  border: 2px solid var(--ink);
  background: var(--rose-l);
  padding: 0.2rem 0.85rem;
  font-family: var(--display);
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 2px 2px 0 var(--ink);
}

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

/* A soft paper patch with a sage stitch just inside its edge, like the logo's tag. */
.soft-card {
  border-radius: var(--r-4xl);
  border: 1.5px solid var(--z200);
  background: var(--paper);
  box-shadow: var(--soft);
  outline: 2px dashed var(--sage);
  outline-offset: -9px;
}
.pop-card {
  border-radius: var(--r-4xl);
  border: 2px solid var(--ink);
  background: var(--paper);
  box-shadow: 4px 4px 0 var(--ink);
}
.lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.lift:hover {
  transform: translateY(-0.3rem) rotate(-0.4deg);
  box-shadow: 0 1px 2px rgb(78 54 48 / 0.06), 0 22px 40px -20px rgb(78 54 48 / 0.4);
}
.r-2xl {
  border-radius: var(--r-2xl);
}
.tint-sky {
  background-color: var(--sage-l);
}
.tint-blush {
  background-color: var(--rose-l);
}
.tint-peach {
  background-color: var(--butter-l);
}
.tint-sky,
.tint-blush,
.tint-peach {
  background-image: radial-gradient(rgb(255 255 255 / 0.7) 1.6px, transparent 1.8px);
  background-size: 18px 18px;
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.book-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.card-link {
  position: absolute;
  inset: 0;
  border-radius: var(--r-4xl);
}
.book-card .series-label {
  margin-top: 1rem;
  font-size: 10px;
  line-height: 1rem;
}
.book-card-title {
  margin-top: 0.25rem;
  font-family: var(--display);
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 600;
}
.book-card > img + .book-card-title {
  margin-top: 1rem;
}
.book-card-cta {
  margin-top: auto;
  padding-top: 1rem;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rose-ink);
}
.locked-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-4xl);
  border: 2px dashed var(--z300);
  background: rgb(255 252 248 / 0.6);
  padding: 1rem;
}
.locked-cover {
  display: flex;
  aspect-ratio: 1;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-2xl);
}
.soon-icon {
  width: 3rem;
  height: 3rem;
  color: var(--z500);
}
.locked-label {
  margin-top: 1rem;
  font-family: var(--display);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--z500);
}
@media (min-width: 40rem) {
  .book-grid {
    gap: 2rem;
  }
  .book-card,
  .locked-card {
    padding: 1.4rem;
  }
  .book-card .series-label {
    font-size: 0.75rem;
  }
  .book-card-title {
    font-size: 1.25rem;
  }
  .book-card-title-sm {
    font-size: 1.125rem;
  }
  .soon-icon {
    width: 4rem;
    height: 4rem;
  }
}
@media (min-width: 64rem) {
  .book-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.cards-3 {
  display: grid;
  gap: 1.25rem;
}
.cards-tight {
  gap: 1rem;
}
@media (min-width: 40rem) {
  .cards-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .cards-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* ---- lists and FAQ ----------------------------------------------------------------------------------------------- */

.checklist > li {
  display: flex;
  gap: 0.75rem;
  line-height: 1.75rem;
  color: var(--z800);
}
.checklist > li + li {
  margin-top: 0.75rem;
}
.tight-list .checklist > li + li {
  margin-top: 0.5rem;
}
/* List bullets: a little pink heart. */
.heart {
  margin-top: 0.45rem;
  width: 1rem;
  height: 0.92rem;
  flex-shrink: 0;
  background: var(--rose-d);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
}

/* Each question is its own little card; the plus is a round pink button that turns into an ×. */
.faqs {
  display: grid;
  gap: 0.75rem;
}
.faq {
  border-radius: var(--r-3xl);
  border: 1.5px solid var(--z200);
  background: var(--paper);
  padding: 1rem 1.25rem;
  transition: border-color 0.2s, background-color 0.2s;
}
.faq[open] {
  border-color: var(--rose-d);
  background: #fffaf8;
}
.faq summary {
  display: flex;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--display);
  font-size: 1.125rem;
  line-height: 1.6rem;
  font-weight: 600;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq-plus {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 9999px;
  border: 2px solid var(--ink);
  background: var(--rose-l);
  font-size: 1.25rem;
  line-height: 1;
  transition: transform 0.2s, background-color 0.2s;
}
.faq[open] .faq-plus {
  transform: rotate(45deg);
  background: var(--sage-l);
}
.faq p {
  margin-top: 0.75rem;
  line-height: 1.75rem;
  color: var(--z700);
}

/* ---- header ------------------------------------------------------------------------------------------------------ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  padding-top: env(safe-area-inset-top);
}
/* One glass layer, a bit taller than the header, frosted and tinted down to the bottom of the header, then the blur
   and the tint ease out over the extra 2.5rem: links stay readable and there is no edge where the header ends. Solid
   along the top edge: there the blur pulls colors of the content scrolling underneath up to the top of the screen. */
.glass {
  pointer-events: none;
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -10;
  height: calc(100% + 2.5rem);
  background: linear-gradient(to bottom, rgb(251 245 238) 1rem, rgb(251 245 238 / 0.9) calc(100% - 2.5rem), rgb(251 245 238 / 0));
  mask-image: linear-gradient(to bottom, black calc(100% - 2.5rem), rgb(0 0 0 / 0.5) calc(100% - 1.25rem), transparent);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
}
/* Phones and tablets (two-row header): solid white, no blur. The blur shows content scrolling underneath along the top
   edge while scrolling fast on iPhone. The fade below the header stays. */
@media (width < 64rem) {
  .glass {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(to bottom, rgb(251 245 238) calc(100% - 2.5rem), rgb(251 245 238 / 0));
  }
}
.header-row {
  display: flex;
  height: 4rem;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 0.6rem;
}
.brand img {
  width: 2.75rem;
  transition: transform 0.3s ease;
}
.brand:hover img {
  transform: rotate(-6deg) scale(1.05);
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.brand-name {
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 600;
}
.brand-sub {
  font-size: 11px;
  font-weight: 700;
  color: var(--rose-ink);
}
@media (min-width: 40rem) {
  .brand-name {
    font-size: 1.375rem;
  }
  .brand-sub {
    font-size: 0.8125rem;
  }
}
.header-links {
  display: none;
  margin-left: auto;
  margin-right: 1rem;
  gap: 1.25rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.25rem;
  white-space: nowrap;
}
.hl {
  position: relative;
  margin-inline: -0.2em;
  border-radius: 9999px;
  padding: 0.25em 0.75em;
  transition: background-color 0.15s, color 0.15s;
}
.hl:hover {
  background: var(--rose-l);
  color: var(--ink);
}
/* The link to our other series, Colorear por Números, wears a sage sticker so it reads as a different shelf. */
.hl-x {
  background: var(--sage-l);
  color: var(--sage-ink);
}
.hl-x:hover {
  background: var(--sage);
  color: var(--ink);
}
.header-links-row {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  padding: 0.75rem 1rem 0.5rem;
  font-family: var(--display);
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  white-space: nowrap;
  scrollbar-width: none;
}
/* Each link's tap area reaches the full height of the row. */
.header-links-row .hl::after {
  content: "";
  position: absolute;
  inset: -0.75rem 0;
}
@media (max-width: 39.99rem) {
  .header-links-row {
    padding-right: 3rem;
    mask-image: linear-gradient(to right, black 80%, transparent);
  }
}
@media (min-width: 40rem) {
  .header-links-row {
    justify-content: center;
  }
}
@media (min-width: 64rem) {
  .header-links {
    display: flex;
  }
  .header-links-row {
    display: none;
  }
}

/* Menu: a round sticker button, a dimmed backdrop and a paper panel. */
.menu-btn {
  position: relative;
  z-index: 80;
  display: inline-flex;
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.2s ease, background-color 0.2s, box-shadow 0.2s;
}
.menu-btn:hover {
  background: var(--rose-l);
}
.menu-btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
.menu-btn-shine {
  display: none;
}
.menu-btn svg {
  position: relative;
  width: 1.25rem;
  height: 1.25rem;
}
.menu-btn .icon-close,
.menu-btn[aria-expanded="true"] .icon-open {
  display: none;
}
.menu-btn[aria-expanded="true"] .icon-close {
  display: block;
}
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  cursor: default;
  background: rgb(78 54 48 / 0.25);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.15s;
}
.menu-panel {
  position: fixed;
  top: calc(4.5rem + env(safe-area-inset-top));
  right: 1rem;
  left: 1rem;
  z-index: 70;
  max-height: calc(100dvh - 10rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  transform-origin: top right;
  border-radius: var(--r-4xl);
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 1.25rem;
  color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink), 0 24px 60px -16px rgb(78 54 48 / 0.35);
  outline: 2px dashed var(--sage);
  outline-offset: -9px;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.18s cubic-bezier(0.33, 1, 0.68, 1), transform 0.18s cubic-bezier(0.33, 1, 0.68, 1);
}
.menu-backdrop.is-open,
.menu-panel.is-open {
  opacity: 1;
  transform: none;
}
@media (min-width: 40rem) {
  .menu-panel {
    top: calc(4.5rem + env(safe-area-inset-top));
    left: auto;
    width: 24rem;
    max-height: calc(100dvh - 6rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  }
}
.menu-group + .menu-group {
  margin-top: 0.75rem;
  border-top: 2px dashed var(--z200);
  padding-top: 1rem;
}
.menu-title {
  padding-inline: 0.75rem;
  font-family: var(--display);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--z900);
}
/* Section titles highlighted with the brand pink behind the whole word. */
.marker {
  background: var(--rose-l);
  padding: 0.2em 0.45em;
  margin-left: -0.45em;
  border-radius: 0.35em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.menu-group ul {
  margin-top: 0.5rem;
}
.menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: var(--r-2xl);
  padding: 0.55rem 0.75rem;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 500;
  transition: background-color 0.15s;
}
.menu-link:hover {
  background: var(--rose-xl);
}
.menu-link.current {
  background: var(--sage-l);
}
.menu-link .arrow {
  color: var(--rose-d);
}
.cross-card {
  display: block;
  margin-top: 1rem;
  border: 2px dashed var(--sage);
  border-radius: var(--r-2xl);
  background: var(--sage-l);
  padding: 0.9rem 1rem;
  transition: background-color 0.15s;
}
.cross-card:hover {
  background: color-mix(in srgb, var(--sage-l), var(--sage) 25%);
}
.cross-eyebrow {
  display: block;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-ink);
}
.cross-title {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink);
}
.cross-text {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--z800);
}
.cross-cta {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  color: var(--sage-ink);
}
.menu-link .dot {
  background: var(--sage-ink);
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover:not(:disabled),
  .btn:active:not(:disabled),
  .lift:hover,
  .menu-panel {
    transform: none;
  }
  .dot,
  .mascot,
  .lights::after,
  .tab.current svg,
  .tester-demo.is-painting svg {
    animation: none;
  }
}

/* ---- footer ------------------------------------------------------------------------------------------------------ */

/* Pink, with a scalloped top edge like the trim of a blanket. */
.site-footer {
  position: relative;
  margin-top: 1.5rem;
  background: var(--rose-l);
  padding-bottom: 4rem;
}
.site-footer::before {
  content: "";
  position: absolute;
  inset: -13px 0 auto;
  height: 14px;
  background: radial-gradient(circle at 13px 14px, var(--rose-l) 12.5px, transparent 13px) repeat-x;
  background-size: 26px 14px;
}
/* A white running stitch just under the scallops. */
.site-footer::after {
  content: "";
  position: absolute;
  inset: 10px 0 auto;
  border-top: 2px dashed rgb(255 255 255 / 0.85);
}
.footer-grid {
  display: grid;
  gap: 2rem;
  padding-block: 3rem 2.5rem;
  font-size: 0.9375rem;
  line-height: 1.25rem;
  color: var(--z800);
}
.footer-grid .brand {
  color: var(--ink);
}
@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .footer-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.footer-note {
  margin-top: 0.5rem;
  max-width: 16rem;
  color: var(--z600);
  font-size: 0.875rem;
}
.footer-title {
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
}
.footer-list {
  margin-top: 0.75rem;
}
.footer-list li + li {
  margin-top: 0.5rem;
}
.footer-list a:hover {
  color: var(--rose-ink);
}
/* A last word from the sleepy mug. */
.footer-bye {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-bottom: 1.5rem;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 500;
}
.footer-bye img {
  width: 3rem;
  flex-shrink: 0;
  transform: rotate(-6deg);
}
.footer-copy {
  border-top: 2px dashed rgb(255 255 255 / 0.85);
  padding-top: 1.25rem;
  font-size: 0.8125rem;
  line-height: 1.25rem;
  color: var(--z700);
}
.footer-copy .heart {
  display: inline-block;
  background: var(--rose-ink);
  margin: 0 0.15em -0.1em;
  width: 0.85em;
  height: 0.78em;
}

/* ---- home -------------------------------------------------------------------------------------------------------- */

.home {
  padding-bottom: 4rem;
}
.home-hero {
  position: relative;
  isolation: isolate;
  padding-top: 2rem;
  padding-bottom: 2.5rem;
}
@media (min-width: 48rem) {
  .home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='%23f6d9d6' d='M12 21C4.5 15.6 1 11.8 1 7.4A5.9 5.9 0 0 1 12 4.3 5.9 5.9 0 0 1 23 7.4C23 11.8 19.5 15.6 12 21Z'/%3E%3C/svg%3E") 6% 22% / 2.6rem no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath fill='%23e5eee1' d='M12 21C4.5 15.6 1 11.8 1 7.4A5.9 5.9 0 0 1 12 4.3 5.9 5.9 0 0 1 23 7.4C23 11.8 19.5 15.6 12 21Z'/%3E%3C/svg%3E") 93% 62% / 3.2rem no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Cpath fill='%23f3d98f' d='M0-4C.4-1 1-.4 4 0 1 .4.4 1 0 4-.4 1-1 .4-4 0-1-.4-.4-1 0-4Z'/%3E%3C/svg%3E") 88% 14% / 1.6rem no-repeat,
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Cpath fill='%23e9afaf' d='M0-4C.4-1 1-.4 4 0 1 .4.4 1 0 4-.4 1-1 .4-4 0-1-.4-.4-1 0-4Z'/%3E%3C/svg%3E") 12% 72% / 1.2rem no-repeat;
  }
}
.home-hero .h-hero {
  max-width: 56rem;
  margin-inline: auto;
}
/* The logo's sleepy mug, bobbing gently over the title, with two sparkles. */
.mascot {
  margin: 0 auto 1.25rem;
  width: 6.5rem;
  animation: bob 4s ease-in-out infinite;
}
@keyframes bob {
  50% {
    transform: translateY(-6px) rotate(-3deg);
  }
}
.sparkles {
  position: relative;
  display: inline-block;
}
.sparkles::before,
.sparkles::after {
  content: none;
  position: absolute;
  width: 1.25rem;
  height: 1.25rem;
  background: var(--butter);
  -webkit-mask: var(--sparkle) center / contain no-repeat;
  mask: var(--sparkle) center / contain no-repeat;
}
.sparkles::before {
  top: 0.4rem;
  left: -1.75rem;
}
.sparkles::after {
  top: 2.5rem;
  right: -1.5rem;
  width: 0.85rem;
  height: 0.85rem;
  background: var(--rose-d);
}
@media (min-width: 40rem) {
  .sparkles::before,
  .sparkles::after {
    content: "";
  }
}
@media (min-width: 64rem) {
  .home-hero {
    padding-top: 2.5rem;
  }
}
.promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  background-color: var(--sage-l);
  background-image: radial-gradient(rgb(255 255 255 / 0.75) 1.6px, transparent 1.8px);
  background-size: 20px 20px;
  padding: 1.5rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.promo:hover {
  transform: translate(-1px, -2px);
  box-shadow: 5px 6px 0 var(--ink);
}
.promo-text {
  flex: 1;
}
.promo-title {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 600;
}
.promo-sub {
  display: block;
  margin-top: 0.5rem;
  line-height: 1.75rem;
  color: var(--z700);
}
@media (min-width: 40rem) {
  .promo {
    flex-direction: row;
    align-items: center;
    padding: 2rem 2.25rem;
  }
  .promo-title {
    font-size: 1.875rem;
    line-height: 2.25rem;
  }
}

/* ---- book -------------------------------------------------------------------------------------------------------- */

.book-hero {
  display: grid;
  align-items: center;
  gap: 2.5rem;
  padding-block: 2.5rem;
}
@media (min-width: 48rem) {
  .book-hero {
    grid-template-columns: 5fr 6fr;
  }
}
@media (min-width: 64rem) {
  .book-hero {
    padding-block: 4rem;
  }
}
/* A strip of pink washi tape holding the cover to the page. */
.taped {
  position: relative;
}
.taped::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: -0.9rem;
  left: 50%;
  width: 7.5rem;
  height: 1.9rem;
  transform: translateX(-50%) rotate(-4deg);
  background:
    repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.35) 0 6px, transparent 6px 12px),
    rgb(233 175 175 / 0.85);
  box-shadow: 0 1px 2px rgb(78 54 48 / 0.15);
  -webkit-mask: linear-gradient(90deg, transparent 0, #000 3px calc(100% - 3px), transparent 100%);
  mask: linear-gradient(90deg, transparent 0, #000 3px calc(100% - 3px), transparent 100%);
}
/* The cover sits on the page like a real book: slightly turned, with a warm shadow. */
.book-cover {
  margin-inline: auto;
  width: 100%;
  max-width: 24rem;
  border-radius: var(--r-xl);
  transform: rotate(-2deg);
  box-shadow:
    0 0 0 1px rgb(78 54 48 / 0.08),
    0 30px 60px -24px rgb(78 54 48 / 0.55);
}
@media (min-width: 48rem) {
  .book-cover {
    max-width: none;
  }
}
.edition-row {
  display: block;
  margin-top: 0.75rem;
}
.edition-tag {
  display: inline-block;
  border-radius: 9999px;
  border: 2px solid var(--ink);
  background: var(--rose-l);
  padding: 0.2rem 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 600;
  box-shadow: var(--pop);
}
.samples {
  display: grid;
  gap: 1.5rem;
}
@media (min-width: 40rem) {
  .samples {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.samples figcaption {
  margin-top: 0.75rem;
  font-family: var(--display);
  font-size: 0.9375rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--z700);
}
/* Sample pages: rounded corners and a soft shadow. */
.bare-frame {
  width: 100%;
  background: #fff;
  border-radius: var(--r-3xl);
  box-shadow:
    0 0 0 1px rgb(78 54 48 / 0.08),
    0 14px 30px -14px rgb(78 54 48 / 0.3);
}
/* The book's key facts as little stickers, each a different pastel, slightly tilted. */
.stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.stickers li {
  border-radius: 9999px;
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 0.2rem 0.85rem;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 500;
  box-shadow: 2px 2px 0 var(--ink);
}
.stickers li:nth-child(4n + 1) {
  background: var(--rose-l);
  transform: rotate(-1.5deg);
}
.stickers li:nth-child(4n + 2) {
  background: var(--sage-l);
  transform: rotate(1deg);
}
.stickers li:nth-child(4n + 3) {
  background: var(--butter-l);
  transform: rotate(-0.5deg);
}
/* "Perfecto para…": moments and people the book suits. */
.ideal {
  border-radius: var(--r-3xl);
  border: 2px dashed var(--rose);
  background: var(--rose-xl);
  padding: 1rem 1.25rem;
}
.ideal-title {
  font-family: var(--display);
  font-weight: 600;
}
.ideal-list {
  margin-top: 0.5rem;
}
.ideal-list li {
  display: flex;
  gap: 0.5rem;
  line-height: 1.75rem;
  color: var(--z800);
}
.ideal-list li::before {
  content: "";
  margin-top: 0.5rem;
  width: 0.8rem;
  height: 0.8rem;
  flex-shrink: 0;
  background: var(--butter);
  -webkit-mask: var(--sparkle) center / contain no-repeat;
  mask: var(--sparkle) center / contain no-repeat;
  filter: brightness(0.85);
}
/* While a book isn't on sale: sign up to hear the day it is. */
.notify {
  max-width: 28rem;
}
.notify-text {
  font-family: var(--display);
  font-weight: 500;
  color: var(--z700);
}
.notify-done {
  font-family: var(--display);
  font-weight: 600;
  color: var(--sage-ink);
}
/* A section on a pink band whose bottom edge is scalloped, like a blanket's trim. */
.scallop {
  position: relative;
  margin-bottom: 14px;
}
.scallop::after {
  content: "";
  position: absolute;
  inset: auto 0 -13px;
  height: 14px;
  background: radial-gradient(circle at 13px 0, var(--rose-xl) 12.5px, transparent 13px) repeat-x;
  background-size: 26px 14px;
}
.two-cols {
  display: grid;
  gap: 2.5rem;
}
@media (min-width: 48rem) {
  .two-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.materials {
  border-radius: var(--r-3xl);
  border: 2px dashed var(--sage);
  background: var(--sage-l);
  padding: 1rem 1.25rem;
  line-height: 1.75rem;
  color: var(--z800);
}

/* ---- guides ------------------------------------------------------------------------------------------------------ */

.steps > li {
  display: flex;
  gap: 1.25rem;
}
.steps > li + li {
  margin-top: 2rem;
}
.step-num {
  display: flex;
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  border: 2px solid var(--ink);
  background: var(--rose-l);
  font-family: var(--display);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.steps > li:nth-child(3n + 2) .step-num {
  background: var(--sage-l);
}
.steps > li:nth-child(3n + 3) .step-num {
  background: var(--butter-l);
}
.tip {
  padding: 1.75rem;
}
/* Home: why they'll love the books, three icons on pastel circles. */
.features {
  display: grid;
  gap: 2rem;
}
@media (min-width: 48rem) {
  .features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    text-align: center;
  }
  .feature-icon {
    margin-inline: auto;
  }
}
.feature-icon {
  display: grid;
  width: 4rem;
  height: 4rem;
  place-items: center;
  border-radius: 9999px;
  border: 2px solid var(--ink);
  box-shadow: var(--pop);
}
.feature-icon svg {
  width: 1.9rem;
  height: 1.9rem;
}

.anchor {
  scroll-margin-top: 4.5rem;
}
.crumbs a {
  color: var(--rose-ink);
  font-weight: 600;
}
/* Named palettes: a row of round swatches on a patch card. */
.palettes {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 40rem) {
  .palettes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (min-width: 64rem) {
  .palettes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.palette {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.5rem 1.75rem;
  text-align: left;
  transition: transform 0.2s ease, background-color 0.2s, outline-color 0.2s;
}
.palette:hover {
  transform: translateY(-2px);
}
.palette[aria-pressed="true"] {
  background: var(--rose-xl);
  outline-color: var(--rose-d);
}
.palette-name {
  margin-top: 1rem;
}
.palette-note {
  margin-top: 0.25rem;
}
/* The tester: a little mug that takes the chosen palette, sticky beside the palettes on wide screens. */
.tester {
  display: grid;
  gap: 1.5rem;
  align-items: start;
}
@media (min-width: 64rem) {
  .tester {
    grid-template-columns: 20rem minmax(0, 1fr);
  }
  .tester-demo {
    position: sticky;
    top: 6rem;
  }
  .tester .palettes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.tester-demo {
  padding: 1.25rem 1.25rem 1.5rem;
  text-align: center;
}
.tester-demo svg {
  width: 100%;
  max-width: 18rem;
  margin-inline: auto;
}
.tester-demo .pt {
  transition: fill 0.5s ease;
}
.pt-0 {
  fill: var(--pt-0);
}
.pt-1 {
  fill: var(--pt-1);
}
.pt-2 {
  fill: var(--pt-2);
}
.pt-3 {
  fill: var(--pt-3);
}
.pt-stroke {
  stroke: var(--pt-1);
  transition: stroke 0.5s ease;
}
.pt-cocoa {
  stroke: var(--pt-0);
  transition: stroke 0.5s ease;
}
.tester-demo.is-painting svg {
  animation: wiggle 0.5s ease;
}
@keyframes wiggle {
  30% {
    transform: rotate(-3deg) scale(1.03);
  }
  60% {
    transform: rotate(2deg);
  }
}
.tester-name {
  margin-top: 0.75rem;
  font-family: var(--display);
  font-size: 1.125rem;
  font-weight: 600;
}
.swatches {
  display: flex;
}
.swatches span {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  border: 2px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
}
.swatches span + span {
  margin-left: -0.5rem;
}

/* ---- decorations ------------------------------------------------------------------------------------------------- */

/* A string of round patio bulbs with sleepy faces, warm and cozy any time of year. */
.lights {
  position: relative;
  isolation: isolate;
  height: 3rem;
  background: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20160%2048'%3E%3Cpath%20d='M0%2010q40%2014%2080%200t80%200'%20fill='none'%20stroke='%237d635b'%20stroke-width='1.8'/%3E%3Cpath%20d='M17.4%2020.75C17.4%2022.75%2012.5%2024.75%2012.5%2029.75A7.5%207.5%200%200%200%2027.5%2029.75C27.5%2024.75%2022.6%2022.75%2022.6%2020.75Z'%20fill='%23fff0cc'%20stroke='%234e3630'%20stroke-width='1.6'%20stroke-linejoin='round'/%3E%3Crect%20x='16.7'%20y='13.75'%20width='6.6'%20height='7.4'%20rx='1.4'%20fill='%23957c73'%20stroke='%234e3630'%20stroke-width='1.3'/%3E%3Cpath%20d='M16.7%2017.15h6.6'%20stroke='%234e3630'%20stroke-width='.9'/%3E%3Cellipse%20cx='16.4'%20cy='26.75'%20rx='1.3'%20ry='2.3'%20transform='rotate%2820%2016.4%2026.75%29'%20fill='%23fff'%20opacity='.85'/%3E%3Cpath%20d='M16%2030.95q1.1%201.1%202.2%200M21.8%2030.95q1.1%201.1%202.2%200'%20fill='none'%20stroke='%234e3630'%20stroke-width='1'%20stroke-linecap='round'/%3E%3Cpath%20d='M18.9%2032.95q1.1%20.9%202.2%200'%20fill='none'%20stroke='%234e3630'%20stroke-width='.9'%20stroke-linecap='round'/%3E%3Cellipse%20cx='15.4'%20cy='33.05'%20rx='1.4'%20ry='.9'%20fill='%23e07e86'%20opacity='.6'/%3E%3Cellipse%20cx='24.6'%20cy='33.05'%20rx='1.4'%20ry='.9'%20fill='%23e07e86'%20opacity='.6'/%3E%3Cpath%20d='M57.4%2020.75C57.4%2022.75%2052.5%2024.75%2052.5%2029.75A7.5%207.5%200%200%200%2067.5%2029.75C67.5%2024.75%2062.6%2022.75%2062.6%2020.75Z'%20fill='%23f8d98e'%20stroke='%234e3630'%20stroke-width='1.6'%20stroke-linejoin='round'/%3E%3Crect%20x='56.7'%20y='13.75'%20width='6.6'%20height='7.4'%20rx='1.4'%20fill='%23957c73'%20stroke='%234e3630'%20stroke-width='1.3'/%3E%3Cpath%20d='M56.7%2017.15h6.6'%20stroke='%234e3630'%20stroke-width='.9'/%3E%3Cellipse%20cx='56.4'%20cy='26.75'%20rx='1.3'%20ry='2.3'%20transform='rotate%2820%2056.4%2026.75%29'%20fill='%23fff'%20opacity='.85'/%3E%3Cpath%20d='M56%2030.95q1.1%201.1%202.2%200M61.8%2030.95q1.1%201.1%202.2%200'%20fill='none'%20stroke='%234e3630'%20stroke-width='1'%20stroke-linecap='round'/%3E%3Cpath%20d='M58.9%2032.95q1.1%20.9%202.2%200'%20fill='none'%20stroke='%234e3630'%20stroke-width='.9'%20stroke-linecap='round'/%3E%3Cellipse%20cx='55.4'%20cy='33.05'%20rx='1.4'%20ry='.9'%20fill='%23e07e86'%20opacity='.6'/%3E%3Cellipse%20cx='64.6'%20cy='33.05'%20rx='1.4'%20ry='.9'%20fill='%23e07e86'%20opacity='.6'/%3E%3Cpath%20d='M97.4%2010.25C97.4%2012.25%2092.5%2014.25%2092.5%2019.25A7.5%207.5%200%200%200%20107.5%2019.25C107.5%2014.25%20102.6%2012.25%20102.6%2010.25Z'%20fill='%23f6cdc6'%20stroke='%234e3630'%20stroke-width='1.6'%20stroke-linejoin='round'/%3E%3Crect%20x='96.7'%20y='3.25'%20width='6.6'%20height='7.4'%20rx='1.4'%20fill='%23957c73'%20stroke='%234e3630'%20stroke-width='1.3'/%3E%3Cpath%20d='M96.7%206.65h6.6'%20stroke='%234e3630'%20stroke-width='.9'/%3E%3Cellipse%20cx='96.4'%20cy='16.25'%20rx='1.3'%20ry='2.3'%20transform='rotate%2820%2096.4%2016.25%29'%20fill='%23fff'%20opacity='.85'/%3E%3Cpath%20d='M96%2020.45q1.1%201.1%202.2%200M101.8%2020.45q1.1%201.1%202.2%200'%20fill='none'%20stroke='%234e3630'%20stroke-width='1'%20stroke-linecap='round'/%3E%3Cpath%20d='M98.9%2022.45q1.1%20.9%202.2%200'%20fill='none'%20stroke='%234e3630'%20stroke-width='.9'%20stroke-linecap='round'/%3E%3Cellipse%20cx='95.4'%20cy='22.55'%20rx='1.4'%20ry='.9'%20fill='%23e07e86'%20opacity='.6'/%3E%3Cellipse%20cx='104.6'%20cy='22.55'%20rx='1.4'%20ry='.9'%20fill='%23e07e86'%20opacity='.6'/%3E%3Cpath%20d='M137.4%2010.25C137.4%2012.25%20132.5%2014.25%20132.5%2019.25A7.5%207.5%200%200%200%20147.5%2019.25C147.5%2014.25%20142.6%2012.25%20142.6%2010.25Z'%20fill='%23fff0cc'%20stroke='%234e3630'%20stroke-width='1.6'%20stroke-linejoin='round'/%3E%3Crect%20x='136.7'%20y='3.25'%20width='6.6'%20height='7.4'%20rx='1.4'%20fill='%23957c73'%20stroke='%234e3630'%20stroke-width='1.3'/%3E%3Cpath%20d='M136.7%206.65h6.6'%20stroke='%234e3630'%20stroke-width='.9'/%3E%3Cellipse%20cx='136.4'%20cy='16.25'%20rx='1.3'%20ry='2.3'%20transform='rotate%2820%20136.4%2016.25%29'%20fill='%23fff'%20opacity='.85'/%3E%3Cpath%20d='M136%2020.45q1.1%201.1%202.2%200M141.8%2020.45q1.1%201.1%202.2%200'%20fill='none'%20stroke='%234e3630'%20stroke-width='1'%20stroke-linecap='round'/%3E%3Cpath%20d='M138.9%2022.45q1.1%20.9%202.2%200'%20fill='none'%20stroke='%234e3630'%20stroke-width='.9'%20stroke-linecap='round'/%3E%3Cellipse%20cx='135.4'%20cy='22.55'%20rx='1.4'%20ry='.9'%20fill='%23e07e86'%20opacity='.6'/%3E%3Cellipse%20cx='144.6'%20cy='22.55'%20rx='1.4'%20ry='.9'%20fill='%23e07e86'%20opacity='.6'/%3E%3C/svg%3E") repeat-x center / auto 100%;
}
/* A warm glow behind every other bulb, fading in and out. */
.lights::after {
  content: "";
  position: absolute;
  inset: -0.5rem 0;
  z-index: -1;
  background: radial-gradient(circle at center 60%, rgb(255 226 150 / 0.75) 0, transparent 50%) repeat-x -1.25rem 0 / 5rem 100%;
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
  50% {
    opacity: 0.15;
  }
}
/* A running stitch with a heart in the middle, between sections. */
.divider {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  border-top: 2px dashed var(--rose-d);
  opacity: 0.6;
}
.divider .heart {
  margin: 0;
  width: 1.1rem;
  height: 1rem;
}
/* Hearts that float up when someone signs up. */
.heart-pop {
  position: fixed;
  z-index: 100;
  width: 1rem;
  height: 0.92rem;
  margin: -0.46rem 0 0 -0.5rem;
  pointer-events: none;
  background: var(--rose-d);
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
  animation: heart-pop 1.2s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
.heart-pop:nth-child(3n) {
  background: var(--rose);
}
.heart-pop:nth-child(3n + 1) {
  background: var(--sage);
}
@keyframes heart-pop {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.4);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.3);
  }
}
/* Fade in on scroll (app.js adds these to what's below the fold). */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* #ColorearCozy wall: polaroids pinned with washi tape, waiting for readers' pages. */
.polaroids {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 1rem;
}
@media (min-width: 48rem) {
  .polaroids {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 2rem;
  }
}
.polaroid {
  position: relative;
  background: #fff;
  padding: 0.6rem 0.6rem 0;
  box-shadow: 0 1px 2px rgb(78 54 48 / 0.08), 0 14px 26px -14px rgb(78 54 48 / 0.4);
  transform: rotate(-3deg);
  transition: transform 0.3s ease;
}
.polaroid:nth-child(2n) {
  transform: rotate(2.5deg);
}
.polaroid:nth-child(3n) {
  transform: rotate(-1deg);
}
.polaroid:hover {
  transform: rotate(0) scale(1.04);
}
.polaroid::before {
  content: "";
  position: absolute;
  top: -0.7rem;
  left: 50%;
  width: 4.5rem;
  height: 1.4rem;
  transform: translateX(-50%) rotate(-3deg);
  background:
    repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.35) 0 5px, transparent 5px 10px),
    rgb(157 181 154 / 0.8);
}
.polaroid:nth-child(2n)::before {
  background:
    repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.35) 0 5px, transparent 5px 10px),
    rgb(233 175 175 / 0.85);
}
.polaroid-photo {
  display: grid;
  aspect-ratio: 1;
  place-items: center;
  border: 2px dashed rgb(78 54 48 / 0.25);
  color: var(--z500);
}
.polaroid.tint-sky,
.polaroid.tint-blush,
.polaroid.tint-peach {
  background-image: none;
}
.polaroid.tint-sky .polaroid-photo {
  background: var(--sage-l);
}
.polaroid.tint-blush .polaroid-photo {
  background: var(--rose-l);
}
.polaroid.tint-peach .polaroid-photo {
  background: var(--butter-l);
}
.polaroid.tint-sky,
.polaroid.tint-blush,
.polaroid.tint-peach {
  background-color: #fff;
}
.polaroid .soon-icon {
  width: 2.5rem;
  height: 2.5rem;
}
.polaroid figcaption {
  padding: 0.6rem 0 0.8rem;
  font-family: var(--display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--z700);
}

/* "Míralo colorearse": the colored page sweeps over the line art, with a little marker leading the way. */
.color-in {
  position: relative;
  margin-inline: auto;
  max-width: 30rem;
  cursor: pointer;
  border-radius: var(--r-3xl);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 0 0 2px var(--ink), 6px 6px 0 var(--ink);
}
.color-in img {
  width: 100%;
}
.color-in-color {
  position: absolute;
  inset: 0;
  height: 100%;
  object-fit: cover;
  clip-path: inset(0 100% 0 0);
}
.color-in-pen {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 3px;
  background: var(--rose-d);
  opacity: 0;
}
.color-in.is-colored .color-in-color {
  animation: color-sweep 2.4s cubic-bezier(0.6, 0, 0.3, 1) forwards;
}
.color-in.is-colored .color-in-pen {
  animation: pen-sweep 2.4s cubic-bezier(0.6, 0, 0.3, 1) forwards;
}
@keyframes color-sweep {
  to {
    clip-path: inset(0 0 0 0);
  }
}
@keyframes pen-sweep {
  0% {
    left: 0;
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    left: 100%;
    opacity: 0;
  }
}

/* ---- articles ---------------------------------------------------------------------------------------------------- */

.article-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
}
.tint-bar {
  display: inline-block;
  width: 2.75rem;
  height: 0.75rem;
  border-radius: 9999px;
}
.tint-strong-0 {
  background: var(--rose);
}
.tint-strong-1 {
  background: var(--sage);
}
.tint-strong-2 {
  background: var(--butter);
}
.card-more {
  font-family: var(--display);
  font-weight: 600;
  color: var(--rose-ink);
}
.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 1rem;
}
/* "En este artículo": the article's sections, so readers jump to what they came for. */
.byline {
  font-size: 0.875rem;
  color: var(--z600);
}
.toc {
  margin-bottom: 2.5rem;
  padding: 1.5rem 1.75rem;
}
.toc-title {
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--rose-ink);
}
.toc ol {
  margin-top: 0.75rem;
  counter-reset: toc;
}
.toc li {
  counter-increment: toc;
  display: flex;
  gap: 0.6rem;
  line-height: 1.5rem;
}
.toc li + li {
  margin-top: 0.4rem;
}
.toc li::before {
  content: counter(toc);
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: 9999px;
  background: var(--rose-l);
  font-family: var(--display);
  font-size: 0.8125rem;
  font-weight: 600;
}
.toc a {
  font-weight: 600;
  color: var(--z800);
}
.toc a:hover {
  color: var(--rose-ink);
  text-decoration: underline;
  text-decoration-color: var(--rose);
}
.article-section + .article-section {
  margin-top: 3rem;
}
.article-section .checklist > li {
  font-size: 1.125rem;
  line-height: 1.85rem;
  color: var(--z700);
}
.article-section .heart {
  margin-top: 0.55rem;
}
.cards-2 {
  display: grid;
  gap: 0.75rem;
}
@media (min-width: 40rem) {
  .cards-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.idea-link {
  border-radius: var(--r-3xl);
  border: 2px solid var(--ink);
  background: var(--paper);
  padding: 1.1rem 1.25rem;
  font-family: var(--display);
  font-weight: 600;
  box-shadow: var(--pop);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s;
}
.idea-link:hover {
  transform: translate(-1px, -2px);
  box-shadow: 4px 5px 0 var(--ink);
  background: var(--rose-xl);
}

/* ---- gift pages -------------------------------------------------------------------------------------------------- */

.gift-hero {
  display: grid;
  align-items: center;
  gap: 2.5rem;
  padding-block: 2rem;
}
@media (min-width: 48rem) {
  .gift-hero {
    grid-template-columns: 3fr 2fr;
  }
}
@media (min-width: 64rem) {
  .gift-hero {
    padding-block: 4rem;
  }
}
.gift-form {
  max-width: 36rem;
}
.gift-form-row {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
@media (min-width: 40rem) {
  .gift-form-row {
    flex-direction: row;
  }
  .gift-form input {
    flex: 1;
  }
}
/* flex: 1 only in the row (40rem up): in the phone's column it would override the height and squash the field to its
   text height. */
.gift-form input {
  height: 3.25rem;
  min-width: 0;
  border-radius: 9999px;
  border: 2px solid var(--z300);
  background: #fff;
  padding: 0 1.25rem;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.gift-form input::placeholder,
.newsbar-form input::placeholder {
  color: var(--z400);
}
.gift-form input:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px var(--rose-l);
}
.gift-form .btn {
  height: 3.25rem;
  flex-shrink: 0;
}
.form-error {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: #c0392b;
}
.form-note {
  margin-top: 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--z500);
}
.gift-stack {
  position: relative;
  margin-inline: auto;
  width: 100%;
  max-width: 20rem;
  padding-block: 1rem;
}
@media (min-width: 48rem) {
  .gift-stack {
    max-width: 24rem;
  }
}
.gift-page,
.gift-cover {
  width: 80%;
  border-radius: var(--r-xl);
  background: #fff;
}
.gift-page {
  position: absolute;
  top: 0;
  right: 0;
  transform: rotate(6deg);
  box-shadow: 0 12px 24px -10px rgb(78 54 48 / 0.35);
}
.gift-cover {
  position: relative;
  transform: rotate(-3deg);
  box-shadow: 0 24px 40px -16px rgb(78 54 48 / 0.5);
}
.thanks-cover {
  margin: 2.5rem auto 0;
  width: 12rem;
  transform: rotate(-2deg);
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: 0 24px 40px -16px rgb(78 54 48 / 0.5);
}
.thanks-fallback {
  margin-top: 2.5rem;
  color: var(--z600);
}
.print-tips {
  margin: 2.5rem auto 0;
  max-width: 28rem;
  text-align: left;
  color: var(--z700);
}
.print-tips li + li {
  margin-top: 0.5rem;
}
.other-books {
  background: var(--cream);
}
.pad-other {
  padding-block: 3rem;
}
.h2-other {
  font-family: var(--display);
  font-size: 1.625rem;
  line-height: 2.1rem;
  font-weight: 600;
}
.other-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 40rem) {
  .other-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.other-book {
  position: relative;
  display: block;
}
.other-book img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--r-xl);
  border: 2px solid var(--ink);
  box-shadow: var(--pop);
  transition: transform 0.15s;
}
.other-book:hover img {
  transform: translateY(-0.25rem) rotate(-1deg);
}
.yours {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  border-radius: 9999px;
  border: 2px solid var(--ink);
  background: var(--butter);
  padding: 0.125rem 0.6rem;
  font-family: var(--display);
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 600;
  transform: rotate(6deg);
}
.other-locked {
  display: flex;
  aspect-ratio: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--r-xl);
  border: 2px dashed var(--z300);
  color: var(--z600);
}
.other-locked svg {
  width: 2.5rem;
  height: 2.5rem;
}
.other-locked span {
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- new-book alerts bar ----------------------------------------------------------------------------------------- */

.newsbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  border-top: 2px solid var(--ink);
  background: var(--paper);
  padding-bottom: env(safe-area-inset-bottom);
  color: var(--ink);
  box-shadow: 0 -12px 40px -16px rgb(78 54 48 / 0.35);
  transform: translateY(80px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.3s cubic-bezier(0.33, 1, 0.68, 1);
}
.newsbar.is-open {
  transform: none;
  opacity: 1;
}
.newsbar-inner {
  margin-inline: auto;
  display: flex;
  max-width: 72rem;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
}
.newsbar-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.75rem;
}
.newsbar-text {
  line-height: 1.375;
}
.newsbar-head {
  display: block;
  font-family: var(--display);
  font-size: 1.0625rem;
  font-weight: 600;
}
.newsbar-sub {
  display: block;
  font-size: 0.875rem;
  color: var(--z600);
}
.newsbar-form {
  display: flex;
  gap: 0.5rem;
}
.newsbar-form input[type="email"] {
  height: 2.75rem;
  min-width: 0;
  flex: 1;
  border-radius: 9999px;
  border: 2px solid var(--z300);
  background: #fff;
  padding: 0 1rem;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.newsbar-form input[type="email"]:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 4px var(--rose-l);
}
.newsbar-form button {
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 9999px;
  border: 2px solid var(--ink);
  background: var(--rose);
  padding: 0 1.25rem;
  font-family: var(--display);
  font-weight: 600;
  color: var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  transition: transform 0.15s, box-shadow 0.15s, opacity 0.15s;
}
.newsbar-form button:hover {
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--ink);
}
.newsbar-form button:disabled {
  opacity: 0.6;
}
.newsbar-error {
  font-size: 0.875rem;
  font-weight: 700;
  color: #c0392b;
}
.newsbar-done {
  flex: 1;
  font-family: var(--display);
  font-weight: 600;
}
.newsbar-close {
  margin-right: -0.5rem;
  display: flex;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  color: var(--z500);
  transition: background-color 0.15s, color 0.15s;
}
.newsbar-close:hover {
  background: var(--rose-xl);
  color: var(--ink);
}
.newsbar-close svg {
  width: 1.25rem;
  height: 1.25rem;
}
@media (min-width: 40rem) {
  .newsbar-inner {
    gap: 1.5rem;
    padding: 1rem 1.5rem;
  }
}
@media (min-width: 48rem) {
  .newsbar-body {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }
  .newsbar-text {
    flex: 1;
  }
  .newsbar-form {
    width: 26rem;
  }
  .newsbar-close {
    align-self: center;
  }
}
@media (min-width: 64rem) {
  .newsbar-inner {
    padding-inline: 2.5rem;
  }
}
/* Closed: a small email button in the corner brings the bar back. */
.newsbar-reopen {
  position: fixed;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: max(1rem, env(safe-area-inset-left));
  z-index: 50;
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 9999px;
  border: 2px solid var(--ink);
  background: var(--rose);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.2s;
}
.newsbar-reopen:hover {
  transform: translateY(-0.125rem);
}
.newsbar-reopen svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ---- tab bar (phones) ------------------------------------------------------------------------------------------- */

.tabbar {
  display: none;
}
@media (max-width: 39.99rem) {
  .tabbar {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 55;
    display: flex;
    justify-content: space-around;
    border-top: 2px solid var(--ink);
    background: var(--paper);
    padding: 0.35rem 0.5rem calc(0.35rem + env(safe-area-inset-bottom));
    box-shadow: 0 -10px 30px -18px rgb(78 54 48 / 0.35);
  }
  .site {
    padding-bottom: calc(4.25rem + env(safe-area-inset-bottom));
  }
  /* The alerts bar sits on top of the tab bar, and the tab bar's "Avisos" replaces the corner button. */
  .newsbar {
    bottom: calc(3.9rem + env(safe-area-inset-bottom));
    padding-bottom: 0;
    border-bottom: 2px dashed var(--z200);
  }
  .newsbar-reopen {
    display: none !important;
  }
  /* The tab bar has the same links. */
  .header-links-row {
    display: none;
  }
}
.tab {
  display: flex;
  min-width: 4rem;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  border-radius: var(--r-2xl);
  padding: 0.35rem 0.6rem;
  font-family: var(--display);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--z600);
  transition: background-color 0.2s, color 0.2s;
}
.tab svg {
  width: 1.5rem;
  height: 1.5rem;
  transition: transform 0.25s ease;
}
.tab:active svg {
  transform: scale(0.85);
}
.tab.current {
  background: var(--rose-l);
  color: var(--ink);
}
.tab.current svg {
  animation: tab-hop 0.5s ease;
}
@keyframes tab-hop {
  40% {
    transform: translateY(-3px) rotate(-6deg);
  }
}

/* ---- admin ------------------------------------------------------------------------------------------------------- */

.admin {
  font-size: 0.875rem;
  background: var(--z50);
}
.admin-center {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.admin-card {
  display: flex;
  width: 100%;
  max-width: 24rem;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: var(--r-3xl);
  border: 1px solid var(--z200);
  background: var(--paper);
  padding: 2rem;
}
.admin-card h1 {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.admin-card input {
  border-radius: var(--r-xl);
  border: 1px solid var(--z300);
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
}
.admin-card .btn {
  margin-top: 0.75rem;
}
.admin-main {
  padding-block: 2.5rem;
}
.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-head h1 {
  font-size: 1.5rem;
  font-weight: 600;
}
.admin-logout {
  color: var(--z500);
}
.admin-logout:hover {
  text-decoration: underline;
}
.admin-table {
  margin-top: 2rem;
  overflow-x: auto;
}
.admin-table table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.admin-table th {
  border-bottom: 1px solid var(--z200);
  padding: 0.5rem 1rem 0.5rem 0;
  font-weight: 500;
  color: var(--z500);
}
.admin-table td {
  border-bottom: 1px solid var(--z100);
  padding: 0.5rem 1rem 0.5rem 0;
}
.admin-table .nowrap {
  white-space: nowrap;
}
.admin-table .empty {
  padding-block: 1.5rem;
  color: var(--z500);
}

.admin-nav {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}
.admin-nav a:hover {
  text-decoration: underline;
}
.admin-intro {
  margin-top: 0.75rem;
  max-width: 48rem;
  color: var(--z600);
}
.admin-alert {
  margin-top: 1rem;
  border-radius: var(--r-xl);
  padding: 0.75rem 1rem;
}
.admin-alert.ok {
  background: #e7f6ec;
  color: #166534;
}
.admin-alert.err {
  background: #fdecee;
  color: #b4232f;
}
.email-editor {
  display: grid;
  gap: 2rem;
  margin-top: 1.5rem;
}
@media (min-width: 64rem) {
  .email-editor {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.admin-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.admin-form label,
.admin-label {
  font-weight: 600;
}
.admin-form input,
.admin-form textarea,
.admin-inline input {
  border-radius: var(--r-xl);
  border: 1px solid var(--z300);
  background: #fff;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}
.admin-form textarea {
  min-height: 24rem;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
}
.admin-actions {
  margin-top: 0.5rem;
}
.admin-vars {
  margin-top: 0.5rem;
}
.admin-vars li + li {
  margin-top: 0.375rem;
}
.admin-vars code {
  border-radius: 6px;
  background: var(--z100);
  padding: 0.125rem 0.375rem;
  font-size: 0.8125rem;
}
.admin-preview-subject {
  margin-top: 0.5rem;
  font-weight: 700;
}
.admin-preview {
  margin-top: 0.5rem;
  width: 100%;
  height: 26rem;
  border-radius: var(--r-xl);
  border: 1px solid var(--z200);
  background: #fff;
}
.admin-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2rem;
  border-top: 1px solid var(--z200);
  padding-top: 1.5rem;
}
.admin-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

/* A direct gift's optional new-volume alert, under the download. */
.gift-alerts {
  max-width: 36rem;
  padding: 1.25rem;
}
@media (min-width: 40rem) {
  .gift-alerts {
    padding: 1.5rem;
  }
}

/* ---- author ------------------------------------------------------------------------------------------------------ */

.author-hero {
  display: grid;
  align-items: center;
  justify-items: start;
  gap: 2rem;
  padding-block: 2.5rem;
}
/* Her illustrated avatar on a round, stitched tag, like the logo. */
.author-avatar {
  width: 11rem;
  height: 11rem;
  border-radius: 50%;
  border: 1.5px solid var(--z200);
  background: var(--paper);
  box-shadow: var(--soft);
  outline: 2px dashed var(--sage);
  outline-offset: -8px;
}
@media (min-width: 48rem) {
  .author-hero {
    grid-template-columns: auto 1fr;
    gap: 3rem;
    padding-block: 4rem;
  }
  .author-avatar {
    width: 16rem;
    height: 16rem;
  }
}
.author-lines {
  display: grid;
  gap: 1rem;
}
@media (min-width: 48rem) {
  .author-lines {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
  }
}
.author-line {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
}
.author-line-name {
  font-family: var(--display);
  font-size: 1.375rem;
  font-weight: 600;
}
.author-line-text {
  color: var(--z800);
}
.author-line-cta {
  margin-top: auto;
  padding-top: 0.5rem;
  font-family: var(--display);
  font-weight: 600;
  color: var(--rose-ink);
}
.author-line-x .author-line-cta {
  color: var(--sage-ink);
}
.author-books {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (min-width: 48rem) {
  .author-books {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
  }
}
.author-book {
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.author-book .book-card-title {
  margin-top: 1rem;
}
.author-book-buy {
  margin-top: auto;
  padding-top: 1rem;
}
.author-book-buy .btn {
  width: 100%;
}
/* The author's name on a book card: a real link above the card's own. */
.book-card-author {
  position: relative;
  z-index: 1;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--z600);
}
.book-card-author a,
.byline-author {
  text-decoration: underline;
  text-decoration-color: var(--z300);
  text-underline-offset: 3px;
}