/* mokcove.com/coloring/: the three holiday books (design pack PAGES/coloring.md). --mc- tokens only; the shared
   pieces (nav, footer, button, pills, price, cards) are components.css. Sections part by space, never a line. */
.c-page { background: var(--mc-bg); color: var(--mc-fg); }
.c-h1 { font: var(--mc-type-display); letter-spacing: var(--mc-track-display); text-wrap: balance; }
.c-h2 { font: var(--mc-type-h3); letter-spacing: var(--mc-track-h3); text-wrap: balance; }
.c-lede { font: var(--mc-type-lede); color: var(--mc-fg-soft); text-wrap: pretty; max-inline-size: 40rem; }
.c-story { font: var(--mc-type-card-title); font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.2rem); letter-spacing: var(--mc-track-h2); }
.c-fine { font: var(--mc-type-small); color: var(--mc-fg-soft); }
.c-fine a, .c-human a { color: var(--mc-link); text-underline-offset: .2em; }

/* the hero: the night ground, the copy and the three Little covers fanned beside it (below it on phones) */
.c-hero { background: linear-gradient(to bottom, var(--mc-night-deep), var(--mc-night)); color: var(--mc-fg); }
.c-hero__in { display: grid; gap: var(--mc-s4); padding-block: var(--mc-s4) var(--mc-s5); }
.c-hero__copy { display: grid; justify-items: start; gap: var(--mc-s2); }
.c-hero__copy .mc-btn { margin-block-start: var(--mc-s1); }
@media (min-width: 48rem) {
  .c-hero__in { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); align-items: center; gap: var(--mc-s5); padding-block: var(--mc-s5); }
  }

/* a holiday: the name and its two pills, the three cards, then the peek behind one quiet button */
.c-season { display: grid; gap: var(--mc-s4); padding-block: var(--mc-s6) 0; scroll-margin-block-start: calc(var(--mc-nav-h) + var(--mc-s2)); }
.c-season__head { display: grid; justify-items: start; gap: var(--mc-s2); }
.c-peek { display: grid; gap: var(--mc-s2); justify-items: start; }
.c-peek__h { font: var(--mc-type-card-title); }
.c-peek details { display: grid; gap: var(--mc-s3); inline-size: 100%; }
.c-peek summary { list-style: none; inline-size: fit-content; }
.c-peek summary::-webkit-details-marker { display: none; }
.c-peek details[open] summary { margin-block-end: var(--mc-s3); }
.c-peek__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mc-s3) var(--mc-s2); }
@media (min-width: 48rem) { .c-peek__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mc-s4) var(--mc-s3); } }
.c-peek__grid li { display: grid; gap: var(--mc-s1); align-content: start; }
/* the peeks fade out at the bottom (alpha), so the shadow follows the art, not the box */
.c-peek__grid img { inline-size: 100%; block-size: auto; border-radius: var(--mc-r-key); filter: drop-shadow(0 var(--mc-s1) var(--mc-s2) var(--mc-shade)); }
.c-peek__grid p { font-weight: 900; }
.c-peek__grid .c-peek__age { color: var(--mc-link); font: var(--mc-type-eyebrow); letter-spacing: var(--mc-track-eyebrow); }

/* what you get, how it works, the close */
.c-get { display: grid; gap: var(--mc-s4); align-items: center; padding-block: var(--mc-s6) 0; }
.c-get__copy { display: grid; gap: var(--mc-s3); }
.c-get__list { display: grid; gap: var(--mc-s2); max-inline-size: 36rem; }
.c-get__list li { font: var(--mc-type-lede); }
.c-get__art { inline-size: 100%; block-size: auto; border-radius: var(--mc-r-card); box-shadow: var(--mc-shadow-card); }
@media (min-width: 48rem) { .c-get { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mc-s5); } }
.c-how { display: grid; gap: var(--mc-s4); padding-block: var(--mc-s6) 0; }
.c-how__steps { display: grid; gap: var(--mc-s3); counter-reset: step; }
@media (min-width: 48rem) { .c-how__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.c-how__steps li { display: grid; align-content: start; gap: var(--mc-s1); padding: var(--mc-s3); border-radius: var(--mc-r-card); background: var(--mc-tile); counter-increment: step; }
.c-how__steps li::before { content: counter(step); font: var(--mc-type-price); color: var(--mc-link); }
.c-how__steps h3 { font: var(--mc-type-card-title); }
.c-how__steps p { color: var(--mc-fg-soft); }
.c-close { display: grid; justify-items: center; gap: var(--mc-s2); text-align: center; padding-block: var(--mc-s6); }
.c-close .mc-btn { margin-block: var(--mc-s1); }
.c-human { font-weight: 800; }

/* the free sampler: a teaser under the hero pills, the signup block above What you get, and /coloring/free/ */
.free-teaser { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s2); color: var(--ground-soft); font-weight: 800; }
.free { inline-size: min(100% - 2 * var(--gutter), var(--measure)); margin-inline: auto; padding-block: var(--s5) var(--s3); scroll-margin-block-start: var(--s2); }
.free__card { display: grid; gap: var(--s3); padding: var(--s3); border-radius: var(--r-card); background: var(--tile); }
.free__art { inline-size: 100%; block-size: auto; border-radius: var(--r-key); box-shadow: 0 var(--s2) var(--s3) calc(-1 * var(--s1)) var(--shade), var(--lantern-low); }
.free__art--cover { justify-self: center; inline-size: min(100%, 24rem); }
.free__copy { display: grid; justify-items: start; gap: var(--s2); }
.free__body { font-weight: 800; font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); line-height: 1.35; color: var(--ground-soft); }
.free__small, .free__fine { color: var(--ground-soft); font-size: 1rem; }
.free__fine a, .free__err a { color: var(--link); text-underline-offset: .2em; }
.free__form, .free__done { display: grid; gap: var(--s1); inline-size: 100%; }
.free__label { font-weight: 900; }
.free__input { min-inline-size: 0; block-size: var(--tap-kid); padding: 0 var(--s3); border: 0; border-radius: var(--pill); font: inherit; line-height: normal; color: var(--ink); background: var(--paper); }
.free__check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s2); align-items: start; padding-block: var(--s1); font-weight: 700; cursor: pointer; }
.free__check input { inline-size: var(--s3); block-size: var(--s3); margin: 0; accent-color: var(--lantern); }
.free__err { color: var(--link); font-weight: 800; }
.free__err[hidden], .free__form[hidden], .free__done[hidden] { display: none; }
.free__hp { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.free__go { inline-size: 100%; margin-block-start: var(--s1); letter-spacing: .04em; }
.free__done { justify-items: start; }
.free__done-h { font-weight: 900; font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.free__done:focus { outline: none; }
.free__copy .buy__h { font-size: clamp(2rem, 1.4rem + 3vw, 3.4rem); }
@media (min-width: 37.5rem) { .free__go { inline-size: auto; justify-self: start; } }
@media (min-width: 48rem) {
  .free__card { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s5); align-items: center; padding: var(--s4); }
}