/* mokcove.com shared components (design pack COMPONENTS.md, _src/components.css): the nav and the footer every page
   carries (scripts/site-chrome.py writes the markup), the button, pills, the price and the product cards.
   --mc- tokens only (mc-tokens.css). Include order: tokens.css, mc-tokens.css, site.css, components.css, page CSS. */
.mc-wrap { inline-size: min(100% - 2 * var(--mc-gutter), var(--mc-measure)); margin-inline: auto; }

/* ---------- nav: a sticky bar; on phones MENU opens a sheet that pushes the page down (no overlay) ---------- */
.mc-nav { position: sticky; inset-block-start: 0; z-index: 10; background: color-mix(in srgb, var(--mc-night) 96%, transparent); color: var(--mc-on-night); }
.mc-nav__in { display: flex; align-items: center; gap: var(--mc-s3); min-block-size: var(--mc-nav-h); }
.mc-nav__brand { display: inline-flex; align-items: center; min-block-size: var(--mc-tap); border-radius: var(--mc-r-pill); }
.mc-nav__brand img { block-size: 2rem; inline-size: auto; }
.mc-nav__links { display: none; margin-inline-start: auto; gap: var(--mc-s1); }
.mc-nav__links a, .mc-nav__toggle {
  display: inline-flex; align-items: center; min-block-size: var(--mc-tap); padding: 0 var(--mc-s2); border: 0; border-radius: var(--mc-r-pill);
  font: var(--mc-type-eyebrow); letter-spacing: var(--mc-track-eyebrow); text-transform: uppercase; color: inherit; text-decoration: none;
  transition: background-color var(--mc-t-quick) var(--mc-ease);
}
@media (hover: hover) and (pointer: fine) { .mc-nav__links a:hover { background: color-mix(in srgb, var(--mc-action-bottom) 14%, transparent); } }
.mc-nav__links a[aria-current="page"] { background: color-mix(in srgb, var(--mc-action-bottom) 22%, transparent); box-shadow: inset 0 -2px 0 var(--mc-lantern); }
.mc-nav__toggle { margin-inline-start: auto; background: color-mix(in srgb, var(--mc-action-bottom) 14%, transparent); cursor: pointer; }
.mc-nav__sheet { display: grid; gap: var(--mc-s1); padding-block: var(--mc-s1) var(--mc-s3); }
.mc-nav__sheet[hidden] { display: none; }
.mc-nav__sheet a { display: flex; align-items: center; min-block-size: var(--mc-tap-kid); padding: 0 var(--mc-s3); border-radius: var(--mc-r-card); background: var(--mc-tile); color: inherit; font: var(--mc-type-card-title); text-decoration: none; }
.mc-nav__sheet a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--mc-lantern); }
.mc-nav__sheet { transition: opacity var(--mc-t-250) var(--mc-ease); }
@starting-style { .mc-nav__sheet { opacity: 0; } }
@media (min-width: 48rem) { .mc-nav__links { display: flex; } .mc-nav__toggle, .mc-nav__sheet, .mc-nav__sheet[hidden] { display: none; } }

/* ---------- buttons: the app's dock glass lit by one lantern glow; ALL CAPS ---------- */
.mc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mc-s1); min-block-size: var(--mc-tap-kid); padding: 0 var(--mc-s3);
  border: 0; border-radius: var(--mc-r-pill); font: var(--mc-type-button); letter-spacing: var(--mc-track-button); text-transform: uppercase; text-decoration: none; cursor: pointer;
  color: var(--mc-ink); background: var(--mc-grad-action-face); box-shadow: var(--mc-glow-lantern-low);
  transition: box-shadow var(--mc-t-quick) var(--mc-ease), translate var(--mc-t-quick) var(--mc-ease), opacity var(--mc-t-quick) var(--mc-ease);
}
@media (hover: hover) and (pointer: fine) { .mc-btn:hover { box-shadow: var(--mc-glow-lantern); } }
.mc-btn:active { translate: 0 1px; box-shadow: var(--mc-glow-lantern-low); }
.mc-btn:focus-visible { outline: 3px solid var(--mc-focus); outline-offset: 3px; }
.mc-btn[aria-disabled="true"], .mc-btn:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; translate: none; }
.mc-btn[aria-busy="true"] { cursor: progress; }
.mc-btn[aria-busy="true"]::after { content: ""; inline-size: 1em; block-size: 1em; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 50%); }
@media (prefers-reduced-motion: no-preference) { .mc-btn[aria-busy="true"]::after { animation: mc-spin 900ms linear infinite; } }
@keyframes mc-spin { to { rotate: 1turn; } }
.mc-btn--quiet { background: transparent; color: var(--mc-fg); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mc-fg) 30%, transparent); }
@media (hover: hover) and (pointer: fine) { .mc-btn--quiet:hover { box-shadow: inset 0 0 0 2px var(--mc-fg); } }
.mc-btn--block { inline-size: 100%; }

/* ---------- pills: ALL CAPS labels; a tappable pill is 44px tall ---------- */
.mc-pills { display: flex; flex-wrap: wrap; gap: var(--mc-s1); }
.mc-pill {
  display: inline-flex; align-items: center; justify-self: start; min-block-size: 2rem; padding: 0 var(--mc-s2); border-radius: var(--mc-r-pill);
  background: var(--mc-tile); color: var(--mc-fg); font: var(--mc-type-eyebrow); letter-spacing: var(--mc-track-eyebrow); text-transform: uppercase; text-decoration: none;
}
.mc-pill--age { color: var(--mc-link); }
a.mc-pill { min-block-size: var(--mc-tap); padding-inline: var(--mc-s3); transition: box-shadow var(--mc-t-quick) var(--mc-ease); }
@media (hover: hover) and (pointer: fine) { a.mc-pill:hover { box-shadow: var(--mc-glow-lantern-low); } }
.mc-pill[aria-current="true"] { background: var(--mc-paper-hi); color: var(--mc-ink); box-shadow: var(--mc-glow-lantern-low); }
.mc-eyebrow { font: var(--mc-type-eyebrow); letter-spacing: var(--mc-track-eyebrow); text-transform: uppercase; color: var(--mc-link); }

/* ---------- price: beside the button, never in it; a small raised dollar sign, no decimals ---------- */
.mc-price { display: inline-flex; align-items: baseline; gap: .15em; font: var(--mc-type-price); letter-spacing: var(--mc-track-price); }
.mc-price__cur { font-size: .55em; translate: 0 -.55em; }

/* ---------- product cards: Little, Both (featured, in the middle; first on phones), Big Kid ---------- */
.mc-cards { display: grid; gap: var(--mc-s3); }
@media (min-width: 48rem) { .mc-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--mc-s2); align-items: stretch; } }
.mc-card { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--mc-s2); padding: var(--mc-s3); border-radius: var(--mc-r-card); background: var(--mc-tile); }
.mc-card__art { inline-size: 100%; block-size: auto; aspect-ratio: 600 / 776; object-fit: cover; border-radius: var(--mc-r-key); box-shadow: var(--mc-shadow-cover); }
.mc-card__art--pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--mc-s1); }
.mc-card__art--bundle { aspect-ratio: 1; }
.mc-card__title { font: var(--mc-type-card-title); }
.mc-card__line { color: var(--mc-fg-soft); }
.mc-card--featured { background: color-mix(in srgb, var(--mc-paper-hi) 10%, var(--mc-tile)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--mc-lantern) 55%, transparent), var(--mc-glow-lantern-low); }
@media (max-width: 47.99rem) { .mc-card--featured { order: -1; } }
.mc-card__buy { display: flex; align-items: center; justify-content: space-between; gap: var(--mc-s2); flex-wrap: wrap; }

/* ---------- footer: three columns on wide screens, stacked on phones; the night steel band ---------- */
.mc-foot { background: var(--mc-night-steel); color: var(--mc-on-night-soft); }
.mc-foot__in { display: grid; gap: var(--mc-s3); padding-block: var(--mc-s5) max(var(--mc-s4), env(safe-area-inset-bottom)); }
@media (min-width: 48rem) { .mc-foot__in { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr); } }
.mc-foot__brand { display: grid; align-content: start; gap: var(--mc-s2); justify-items: start; }
.mc-foot h2 { margin-block-end: var(--mc-s1); font: var(--mc-type-eyebrow); letter-spacing: var(--mc-track-eyebrow); text-transform: uppercase; color: var(--mc-on-night); }
.mc-foot a { display: inline-flex; align-items: center; min-block-size: var(--mc-tap); color: var(--mc-on-night); font-weight: 800; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .mc-foot a:hover { color: var(--mc-link-night); text-decoration: underline; text-underline-offset: .2em; } }
.mc-foot__fine { grid-column: 1 / -1; font: var(--mc-type-legal); }

/* ---------- the three Little covers fanned (the /coloring/ hero, the home page's book block) ---------- */
.mc-fan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; inline-size: min(100%, 26rem); justify-self: center; padding-block-start: var(--mc-s2); }
.mc-fan img { inline-size: 130%; max-inline-size: none; block-size: auto; border-radius: var(--mc-r-key); box-shadow: var(--mc-shadow-cover); }
.mc-fan img:nth-child(1) { rotate: -7deg; translate: 0 var(--mc-s2); }
.mc-fan img:nth-child(2) { position: relative; z-index: 1; translate: -15% 0; }
.mc-fan img:nth-child(3) { rotate: 7deg; translate: -30% var(--mc-s2); }

/* ---------- phones: the call to action runs full width under 600px (Critic NTH6); in a card it fills the row
   beside its price ---------- */
@media (max-width: 37.5rem) {
  .mc-hero .mc-btn, .mc-close .mc-btn, .book .mc-btn, .hero__copy .action { inline-size: 100%; justify-self: stretch; }
  .mc-card__buy { flex-wrap: nowrap; }
  .mc-card__buy .mc-btn { flex: 1; }
}