/* colorearpornumeros.com. Plain CSS, no build step. One font family everywhere (the system sans stack), hierarchy by
   weight and size. Light only. */

/* Brand palette, taken from the logo (static/logo.svg): peach, sky and blush zones with black lines. */
:root {
  --peach: #ffcb9a;
  --sky: #bde0fe;
  --blush: #ffafcc;
  --cream: #fff5ec;
  --ink: #09090b; /* zinc-950 */
  --z900: #18181b;
  --z800: #27272a;
  --z700: #3f3f46;
  --z600: #52525b;
  --z500: #71717a;
  --z400: #a1a1aa;
  --z300: #d4d4d8;
  --z200: #e4e4e7;
  --z100: #f4f4f5;
  --z50: #fafafa;
  /* Corner radius scale, so nested corners stay concentric across the site. */
  --r-4xl: 26px; /* cards, panels */
  --r-3xl: 19px; /* cards nested in those, sample pages */
  --r-2xl: 14px; /* images and blocks inside cards */
  --r-xl: 10px; /* small elements: icon tiles, chips */
  --pop: 4px 4px 0 var(--ink);
  --soft: 0 1px 2px rgb(0 0 0 / 0.04), 0 12px 32px -16px rgb(0 0 0 / 0.14);
  --sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  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-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, #libros) clear of the sticky header: two rows on phones, one from 40rem up. */
  scroll-padding-top: 7rem;
}
body {
  background: #fff;
  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;
}
.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: #fff;
}
.bg-cream {
  background: var(--cream);
}
.bg-zinc-50 {
  background: var(--z50);
}
.border-t {
  border-top: 1px solid var(--z200);
}
.border-y {
  border-block: 1px solid var(--z200);
}
.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 {
  font-size: 2.25rem;
  line-height: 2.5rem;
  font-weight: 900;
  letter-spacing: -0.025em;
}
.h-hero {
  text-wrap: balance;
}
.h2 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  font-weight: 900;
  letter-spacing: -0.025em;
}
.h2-sm {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 900;
  letter-spacing: -0.025em;
}
.h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.h3-sm {
  font-size: 1.125rem;
}
@media (min-width: 40rem) {
  .h-hero {
    font-size: 3.75rem;
    line-height: 1;
  }
  .h-book {
    font-size: 3rem;
    line-height: 1;
  }
  .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-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--z500);
}
.link {
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

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

/* Site buttons: a bold pill that lifts and grows a little on hover, like the cards. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 3rem;
  padding: 0 1.5rem;
  border-radius: 9999px;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background-color 0.2s,
    border-color 0.2s,
    opacity 0.2s;
}
.btn:hover:not(:disabled) {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.18);
}
.btn:active:not(:disabled) {
  transform: scale(0.98);
}
.btn:disabled {
  opacity: 0.6;
}
.btn-dark {
  background: var(--ink);
  color: #fff;
}
.btn-light {
  background: #fff;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
}
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.soon-pill {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  gap: 0.5rem;
  border-radius: 9999px;
  background: var(--z100);
  padding: 0 1.5rem;
  font-weight: 700;
  color: var(--z600);
}
.dot {
  width: 0.5rem;
  height: 0.5rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--peach);
}
/* "Regalo gratis", "¡Hecho!" */
.chip {
  display: inline-block;
  border-radius: 9999px;
  border: 2px solid var(--ink);
  background: var(--blush);
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

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

.soft-card {
  border-radius: var(--r-4xl);
  border: 0.5px solid rgb(0 0 0 / 0.1);
  background: #fff;
  box-shadow: var(--soft);
}
.pop-card {
  border-radius: var(--r-4xl);
  border: 2px solid var(--ink);
  background: #fff;
  box-shadow: var(--pop);
}
.lift {
  transition: transform 0.3s ease;
}
.lift:hover {
  transform: translateY(-0.25rem);
}
.r-2xl {
  border-radius: var(--r-2xl);
}
.tint-sky {
  background: rgb(189 224 254 / 0.4);
}
.tint-blush {
  background: rgb(255 175 204 / 0.4);
}
.tint-peach {
  background: rgb(255 203 154 / 0.4);
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
.book-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
}
.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-size: 1rem;
  line-height: 1.375;
  font-weight: 700;
  letter-spacing: -0.025em;
}
.book-card > img + .book-card-title {
  margin-top: 1rem;
}
.book-card-cta {
  margin-top: auto;
  padding-top: 1rem;
  font-size: 0.875rem;
  font-weight: 600;
}
.locked-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--r-4xl);
  border: 1.5px dashed var(--z300);
  background: #fff;
  padding: 0.75rem;
}
.locked-cover {
  display: flex;
  aspect-ratio: 800 / 1044;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-2xl);
}
.lock {
  width: 3rem;
  height: 3rem;
  color: var(--z500);
}
.locked-label {
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--z400);
}
@media (min-width: 40rem) {
  .book-grid {
    gap: 2rem;
  }
  .book-card,
  .locked-card {
    padding: 1.25rem;
  }
  .book-card .series-label {
    font-size: 0.75rem;
  }
  .book-card-title {
    font-size: 1.25rem;
  }
  .book-card-title-sm {
    font-size: 1.125rem;
  }
  .lock {
    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));
  }
}
.tip {
  padding: 1.5rem;
}
.article-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
}
.tint-bar {
  display: inline-block;
  width: 2.5rem;
  height: 0.75rem;
  border-radius: 9999px;
}
.tint-strong-0 {
  background: rgb(255 203 154 / 0.5);
}
.tint-strong-1 {
  background: rgb(189 224 254 / 0.5);
}
.tint-strong-2 {
  background: rgb(255 175 204 / 0.5);
}
.idea-link {
  border-radius: var(--r-3xl);
  border: 2px solid var(--ink);
  background: #fff;
  padding: 1.25rem;
  font-weight: 700;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.2s ease;
}
.idea-link:hover {
  transform: translateY(-0.125rem);
}

/* ---- lists and FAQ ----------------------------------------------------------------------------------------------- */

.checklist > li,
.article-list > li {
  display: flex;
  gap: 0.75rem;
  line-height: 1.75rem;
}
.checklist > li + li,
.article-list > li + li {
  margin-top: 0.75rem;
}
.tight-list .checklist > li + li {
  margin-top: 0.5rem;
}
.square {
  margin-top: 0.5rem;
  width: 0.75rem;
  height: 0.75rem;
  flex-shrink: 0;
  border-radius: 3px;
  background: var(--ink);
}
.article-list > li {
  font-size: 1.125rem;
  line-height: 2rem;
  color: var(--z700);
}
.article-list .square {
  margin-top: 0.75rem;
  background: var(--peach);
  box-shadow: 0 0 0 2px var(--ink);
}
.article-section + .article-section {
  margin-top: 2.5rem;
}

.faqs {
  border-block: 1px solid var(--z200);
}
.faq {
  padding-block: 1.25rem;
}
.faq + .faq {
  border-top: 1px solid var(--z200);
}
.faq summary {
  display: flex;
  cursor: pointer;
  list-style: none;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq-plus {
  font-size: 1.5rem;
  line-height: 2rem;
  transition: transform 0.15s;
}
.faq[open] .faq-plus {
  transform: rotate(45deg);
}
.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(255 255 255) 1rem, rgb(255 255 255 / 0.9) calc(100% - 2.5rem), rgb(255 255 255 / 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(255 255 255) calc(100% - 2.5rem), rgb(255 255 255 / 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.5rem;
  font-weight: 600;
  letter-spacing: -0.05em;
}
.brand img {
  width: 2.5rem;
}
.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.brand-name {
  font-size: 1rem;
}
.brand-sub {
  font-size: 10px;
  color: #64748b;
}
@media (min-width: 40rem) {
  .brand-name {
    font-size: 1.25rem;
  }
  .brand-sub {
    font-size: 0.75rem;
  }
}
.header-links {
  display: none;
  margin-left: auto;
  margin-right: 1rem;
  gap: 1.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  white-space: nowrap;
}
.hl {
  position: relative;
  margin-inline: -0.3em;
  border-radius: 0.35em;
  padding: 0.1em 0.3em;
  transition: background-color 0.15s, color 0.15s;
}
.hl:hover {
  background: var(--peach);
  color: var(--ink);
}
.header-links-row {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding: 1rem 1rem 0.625rem;
  font-size: 0.875rem;
  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 frosted glass button, a dimmed backdrop and a floating 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;
  overflow: hidden;
  border-radius: 9999px;
  background: rgb(255 255 255 / 0.45);
  color: var(--z900);
  box-shadow:
    0 10px 30px -6px rgba(0, 0, 0, 0.18),
    0 2px 6px rgba(0, 0, 0, 0.06),
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.06),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.95),
    inset 0 -1px 1px rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(40px) saturate(2);
  backdrop-filter: blur(40px) saturate(2);
  transition: transform 0.3s ease-out, background-color 0.3s ease-out;
}
.menu-btn:hover {
  transform: scale(1.05);
  background: rgb(255 255 255 / 0.6);
}
.menu-btn:active {
  transform: scale(0.95);
}
/* Specular highlight: light catching the top of the glass. */
.menu-btn-shine {
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  background: radial-gradient(120% 70% at 50% 0%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 60%);
  opacity: 0.9;
}
.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(9 9 11 / 0.2);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity 0.15s;
}
.menu-panel {
  position: fixed;
  top: calc(7rem + env(safe-area-inset-top));
  right: 1rem;
  left: 1rem;
  z-index: 70;
  max-height: calc(100dvh - 8.5rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  overflow-y: auto;
  transform-origin: top right;
  border-radius: var(--r-4xl);
  background: rgb(255 255 255 / 0.8);
  padding: 1.25rem;
  color: var(--ink);
  box-shadow:
    0 24px 60px -12px rgba(0, 0, 0, 0.25),
    inset 0 0 0 0.5px rgba(0, 0, 0, 0.06),
    inset 0 1px 0.5px rgba(255, 255, 255, 0.95);
  -webkit-backdrop-filter: blur(40px) saturate(2);
  backdrop-filter: blur(40px) saturate(2);
  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: 1px solid rgb(0 0 0 / 0.05);
  padding-top: 1rem;
}
.menu-title {
  padding-inline: 0.75rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--z900);
}
/* Section titles highlighted with the brand peach behind the whole word. */
.marker {
  background: var(--peach);
  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.5rem 0.75rem;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.025em;
  transition: background-color 0.15s;
}
.menu-link:hover,
.menu-link.current {
  background: rgb(0 0 0 / 0.05);
}
.menu-link .arrow {
  color: var(--z400);
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover:not(:disabled),
  .btn:active:not(:disabled),
  .lift:hover,
  .menu-panel {
    transform: none;
  }
}

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

.site-footer {
  border-top: 1px solid var(--z200);
  background: #fff;
  padding-bottom: 4rem;
}
.footer-grid {
  display: grid;
  gap: 2rem;
  padding-block: 2.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--z600);
}
.footer-grid .brand {
  color: var(--ink);
}
@media (min-width: 48rem) {
  .footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.footer-title {
  font-weight: 700;
  color: var(--ink);
}
.footer-list {
  margin-top: 0.75rem;
}
.footer-list li + li {
  margin-top: 0.5rem;
}
.footer-list a:hover {
  color: var(--ink);
}
.footer-copy {
  font-size: 0.75rem;
  line-height: 1rem;
  color: var(--z500);
}

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

.home {
  padding-bottom: 4rem;
}
.home-hero {
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}
.home-hero .h-hero {
  max-width: 56rem;
  margin-inline: auto;
}
@media (min-width: 64rem) {
  .home-hero {
    padding-top: 3.5rem;
  }
}
.promo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  background: rgb(255 203 154 / 0.5);
  padding: 1.5rem;
  transition: transform 0.2s ease;
}
.promo:hover {
  transform: translateY(-0.125rem);
}
.promo-text {
  flex: 1;
}
.promo-title {
  display: block;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 900;
  letter-spacing: -0.025em;
}
.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;
  }
  .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;
  }
}
.book-cover {
  margin-inline: auto;
  width: 100%;
  max-width: 24rem;
  border-radius: var(--r-xl);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.45);
}
@media (min-width: 48rem) {
  .book-cover {
    max-width: none;
  }
}
.edition-row {
  display: block;
  margin-top: 0.75rem;
}
.edition-tag {
  display: inline-block;
  border-radius: 0.5rem;
  border: 2px solid var(--ink);
  background: var(--blush);
  padding: 0.25rem 0.75rem;
  font-size: 1.125rem;
  line-height: 1.75rem;
  font-weight: 700;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 var(--ink);
}
.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-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: var(--z600);
}
/* Sample pages: rounded corners and a soft shadow. */
.bare-frame {
  width: 100%;
  background: #fff;
  border-radius: var(--r-3xl);
  box-shadow:
    0 0 0 0.5px rgb(0 0 0 / 0.06),
    0 10px 30px -12px rgb(0 0 0 / 0.18);
}
.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-2xl);
  background: var(--z100);
  padding: 1rem;
  line-height: 1.75rem;
}

/* ---- 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: var(--r-xl);
  background: var(--ink);
  font-size: 1.25rem;
  font-weight: 900;
  color: #fff;
}
.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
}
.legend-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.875rem;
}
.anchor {
  scroll-margin-top: 7rem;
}
.crumbs {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--z500);
}
.crumbs a:hover {
  text-decoration: underline;
}

/* ---- 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 {
  height: 3.25rem;
  min-width: 0;
  flex: 1;
  border-radius: 9999px;
  background: #fff;
  padding: 0 1.25rem;
  font-size: 1rem;
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15);
  outline: none;
}
.gift-form input:focus {
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15), 0 0 0 2px var(--peach);
}
.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: #d62839;
}
.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: 0.5rem;
  background: #fff;
}
.gift-page {
  position: absolute;
  top: 0;
  right: 0;
  transform: rotate(6deg);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.gift-cover {
  position: relative;
  transform: rotate(-3deg);
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.thanks-cover {
  margin: 2.5rem auto 0;
  width: 12rem;
  transform: rotate(-2deg);
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.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 {
  border-top: 1px solid rgb(0 0 0 / 0.1);
  background: #fff;
}
.pad-other {
  padding-block: 3rem;
}
.h2-other {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 900;
  letter-spacing: -0.025em;
}
.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 {
  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);
}
.yours {
  position: absolute;
  top: -0.5rem;
  right: -0.5rem;
  border-radius: 9999px;
  border: 2px solid var(--ink);
  background: var(--blush);
  padding: 0.125rem 0.5rem;
  font-size: 0.75rem;
  line-height: 1rem;
  font-weight: 700;
}
.other-locked {
  display: flex;
  aspect-ratio: 800 / 1044;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: var(--r-xl);
  border: 2px dashed var(--z300);
  color: var(--z500);
}
.other-locked svg {
  width: 2.5rem;
  height: 2.5rem;
}
.other-locked span {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

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

.newsbar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 50;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  background: var(--ink);
  padding-bottom: env(safe-area-inset-bottom);
  color: #fff;
  box-shadow: 0 -12px 40px -12px rgb(0 0 0 / 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-weight: 700;
}
.newsbar-sub {
  display: block;
  font-size: 0.875rem;
  color: var(--z400);
}
.newsbar-form {
  display: flex;
  gap: 0.5rem;
}
.newsbar-form input[type="email"] {
  height: 2.75rem;
  min-width: 0;
  flex: 1;
  border-radius: 9999px;
  background: #fff;
  padding: 0 1rem;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
}
.newsbar-form input[type="email"]:focus {
  box-shadow: 0 0 0 2px var(--peach);
}
.newsbar-form button {
  height: 2.75rem;
  flex-shrink: 0;
  border-radius: 9999px;
  background: var(--peach);
  padding: 0 1.25rem;
  font-weight: 700;
  color: var(--ink);
  transition: filter 0.15s, opacity 0.15s;
}
.newsbar-form button:hover {
  filter: brightness(1.05);
}
.newsbar-form button:disabled {
  opacity: 0.6;
}
.newsbar-error {
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffb3b3;
}
.newsbar-done {
  flex: 1;
  font-weight: 700;
}
.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(--z400);
  transition: background-color 0.15s, color 0.15s;
}
.newsbar-close:hover {
  background: rgb(255 255 255 / 0.1);
  color: #fff;
}
.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(--peach);
  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;
}

/* ---- 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: #fff;
  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);
}