/* MycelialPrints brand layer on top of Dawn: warm cream paper, crayon accents,
   rounded friendly type from the system stack (no web-font download). */
:root {
  --mp-ink: #2b2a3a;
  --mp-cream: #fffbf3;
  --mp-paper: #fff4df;
  --mp-peach: #ffe3b3;
  --mp-red: #e8505b;
  --mp-yellow: #f7b731;
  --mp-blue: #3e8ede;
  --mp-pink: #f39ba1;
  --mp-radius: 18px;
  --mp-round: ui-rounded, "SF Pro Rounded", "Nunito", "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

h1, h2, h3, .h0, .h1, .h2, .h3, .mp-hero__title { font-family: var(--mp-round); letter-spacing: 0; }

.mp-section { padding: 3.2rem 0; }
.mp-section--paper { background: var(--mp-paper); }
.mp-wrap { max-width: 110rem; margin: 0 auto; padding: 0 1.6rem; }
.mp-eyebrow { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 1.2rem; color: var(--mp-red); margin: 0 0 .6rem; }
.mp-lede { font-size: 1.8rem; line-height: 1.55; max-width: 62rem; }

/* hero */
.mp-hero { background: radial-gradient(circle at 85% 30%, var(--mp-peach) 0 26%, transparent 26.2%), var(--mp-paper); padding: 4.8rem 0 4rem; }
.mp-hero__grid { display: grid; gap: 3.2rem; align-items: center; grid-template-columns: 1fr; }
.mp-hero__title { font-size: clamp(3.2rem, 6vw, 5.4rem); line-height: 1.08; margin: 0 0 1.6rem; }
.mp-hero__art img { width: min(100%, 36rem); height: auto; display: block; margin: 0 auto; }
@media (min-width: 750px) { .mp-hero__grid { grid-template-columns: 1.4fr 1fr; } }

.mp-buttons { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 2.4rem; }
.mp-btn { display: inline-flex; align-items: center; gap: .8rem; padding: 1.3rem 2.4rem; border-radius: 999px; font-weight: 700; font-size: 1.6rem; text-decoration: none; border: 2px solid var(--mp-ink); color: var(--mp-ink); background: #fff; }
.mp-btn--primary { background: var(--mp-red); border-color: var(--mp-red); color: #fff; }
.mp-btn:hover { transform: translateY(-1px); box-shadow: 0 3px 0 var(--mp-ink); }

.mp-chips { display: flex; flex-wrap: wrap; gap: .8rem; list-style: none; padding: 0; margin: 1.6rem 0 0; }
.mp-chip { background: #fff; border: 2px solid var(--mp-ink); border-radius: 999px; padding: .4rem 1.2rem; font-size: 1.4rem; font-weight: 700; }
.mp-chip--yellow { background: var(--mp-yellow); }
.mp-chip--blue { background: #8dbdf0; }
.mp-chip--pink { background: var(--mp-pink); }

/* steps */
.mp-steps { display: grid; gap: 1.6rem; grid-template-columns: 1fr; list-style: none; padding: 0; counter-reset: step; }
.mp-steps li { background: #fff; border: 2px solid var(--mp-ink); border-radius: var(--mp-radius); padding: 2rem; counter-increment: step; }
.mp-steps li::before { content: counter(step); display: inline-grid; place-items: center; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: var(--mp-yellow); font-weight: 800; margin-bottom: .8rem; }
.mp-steps h3 { margin: .4rem 0; }
@media (min-width: 750px) { .mp-steps { grid-template-columns: repeat(3, 1fr); } }

/* cards */
.mp-cards { display: grid; gap: 2rem; grid-template-columns: 1fr; list-style: none; padding: 0; }
@media (min-width: 600px) { .mp-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 990px) { .mp-cards { grid-template-columns: repeat(4, 1fr); } }
.mp-card { background: #fff; border: 2px solid var(--mp-ink); border-radius: var(--mp-radius); overflow: hidden; display: flex; flex-direction: column; height: 100%; }
.mp-card img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--mp-paper); }
.mp-card__body { padding: 1.4rem 1.6rem 1.8rem; display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.mp-card__title { font-size: 1.7rem; line-height: 1.3; margin: 0; }
.mp-card__title a { color: inherit; text-decoration: none; }
.mp-card__price { font-weight: 800; font-size: 1.8rem; }
.mp-card__links { margin-top: auto; display: flex; flex-wrap: wrap; gap: 1rem; font-size: 1.4rem; }

/* product details */
.mp-badges { display: flex; flex-wrap: wrap; gap: .8rem; margin: 0 0 2rem; padding: 0; list-style: none; }
.mp-two { display: grid; gap: 3.2rem; grid-template-columns: 1fr; }
@media (min-width: 990px) { .mp-two { grid-template-columns: 1fr 1fr; } }
.mp-included li { margin: .4rem 0; }
.mp-gallery { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, 1fr); list-style: none; padding: 0; }
@media (min-width: 750px) { .mp-gallery { grid-template-columns: repeat(4, 1fr); } }
.mp-gallery img { width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(43, 42, 58, .2); background: #fff; display: block; }
.mp-note { background: var(--mp-paper); border-left: 6px solid var(--mp-yellow); border-radius: 10px; padding: 1.2rem 1.6rem; font-size: 1.5rem; }
.mp-draft { background: #fff1f1; border: 2px dashed var(--mp-red); border-radius: 10px; padding: 1rem 1.4rem; font-weight: 700; }

/* FAQ */
.mp-faq details { border: 2px solid var(--mp-ink); border-radius: 14px; background: #fff; margin: 0 0 1rem; padding: 0 1.6rem; }
.mp-faq summary { cursor: pointer; font-weight: 700; padding: 1.4rem 0; list-style-position: outside; }
.mp-faq p { margin: 0 0 1.4rem; }

/* free printable */
.mp-free__samples { display: grid; gap: 1.6rem; grid-template-columns: 1fr 1fr; margin: 2rem 0; }
.mp-free__samples figure { margin: 0; }
.mp-free__samples img { width: 100%; height: auto; border: 2px solid var(--mp-ink); border-radius: 14px; background: #fff; display: block; }
.mp-free__samples figcaption { font-size: 1.3rem; margin-top: .6rem; text-align: center; }
.mp-download { background: var(--mp-peach); border: 2px solid var(--mp-ink); border-radius: var(--mp-radius); padding: 2rem; margin: 2rem 0; }
.mp-download h2 { margin-top: 0; }
.mp-optin { border: 2px dashed var(--mp-ink); border-radius: var(--mp-radius); padding: 1.6rem 2rem; margin: 2.4rem 0; background: #fff; }

/* breadcrumbs */
.mp-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; padding: 1.2rem 0 0; margin: 0; font-size: 1.3rem; }
.mp-breadcrumbs li + li::before { content: "›"; margin-right: .6rem; opacity: .6; }
.mp-breadcrumbs a { color: inherit; }