/* =========================================================
   5th Grade Move-Up (/move-up/) — built from the Nuvo YTH page's
   own pieces (yth.css); this file only adds what's specific here.
   ========================================================= */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.page-mu a:focus-visible, .page-mu summary:focus-visible { outline: 3px solid var(--y-blue); outline-offset: 3px; border-radius: 4px; }

/* Hero: two lines are longer than "God is in Columbus", so the type steps down */
.muhero__title { font-size: clamp(3rem, 9.4vw, 9.4rem); line-height: .84; }
.muhero__line2 { color: #BFD3F2; }

/* Key dates sit under the intro as a ruled two-up */
.mudates { grid-template-columns: repeat(2, 1fr); margin-top: clamp(56px, 7vw, 96px); }
.mudates .ystep__num { margin-bottom: 14px; }
.mudates .link-plain { display: inline-flex; gap: 6px; margin-left: 4px; font-family: var(--font-display); font-weight: 800; color: var(--y-blue); }

/* Letter */
.muletter__grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.muletter__faces { position: sticky; top: 120px; display: grid; align-items: start; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); }
.muletter__faces figure { margin: 0; background: #FBFAF6; padding: 10px 10px 0; border-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.14), 0 14px 30px rgba(37, 39, 35, .18); }
.muletter__faces figure:nth-child(1) { transform: rotate(-3deg); }
.muletter__faces figure:nth-child(2) { transform: rotate(2.5deg); margin-top: 34px; }
.muletter__faces img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; }
.muletter__faces figcaption { height: 36px; display: flex; align-items: center; padding: 0 2px; font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.muletter__copy .ybig { margin: 6px 0 26px; }
.muletter__lede { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.3rem, 2vw, 1.7rem); line-height: 1.2; letter-spacing: -.015em; margin: 0 0 20px; }
.muletter__copy > p:not(.eyebrow):not(.ybig):not(.muletter__lede):not(.yimpact__kicker) { color: var(--ink-soft); max-width: 60ch; }
.muletter__sigs { display: flex; flex-wrap: wrap; gap: 14px 48px; margin-top: 26px; padding-top: 22px; border-top: 2px solid var(--charcoal); }
.muletter__sigs p { margin: 0; display: flex; flex-direction: column; }
.musig { font-family: var(--font-serif); font-style: italic; font-size: clamp(1.7rem, 2.6vw, 2.2rem); line-height: 1.05; }
.musig__role { font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--y-blue); margin-top: 6px; }

/* Why */
.muwhy__head { align-items: end; }
.ysteps--4 { grid-template-columns: repeat(4, 1fr); }
.ysteps--5 { grid-template-columns: repeat(5, 1fr); }
.ysteps--4 .ystep h3, .ysteps--5 .ystep h3, .mulike__steps .ystep h3 { font-size: clamp(1.3rem, 1.8vw, 1.7rem); line-height: 1.02; }

/* Statement band */
.muverse { max-width: 20ch; }
.muverse__sub { margin: 26px 0 0; font-family: var(--font-serif); font-style: italic; font-size: clamp(1.3rem, 2vw, 1.8rem); opacity: .9; }

/* What is YTH like */
.mulike__lede { max-width: 60ch; margin: -10px 0 clamp(36px, 4vw, 52px); color: var(--ink-soft); font-size: clamp(1.05rem, 1.3vw, 1.2rem); }
.mulike__steps { margin-top: clamp(50px, 6vw, 80px); }

/* four polaroids in a row (two on phones) */
.mulike__polaroids { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .mulike__polaroids { grid-template-columns: repeat(2, 1fr); } }

/* Preview day facts (same treatment as the Kids hero facts) */
.mufacts { list-style: none; margin: 0 0 24px; padding: 18px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 34px; }
.mufacts li { font-size: 15.5px; color: var(--charcoal); font-weight: 600; }
.mufacts strong { display: block; font-family: var(--font-display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted, #7A7C74); font-weight: 800; }
.mufacts a { color: inherit; text-decoration: none; }
.mufacts a:hover { color: var(--y-blue); }
.mufacts--stack { flex-direction: column; gap: 10px; margin-bottom: 24px; }
.mupreview__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 28px; }
.mupreview .yimpact__photo { align-self: start; position: sticky; top: 120px; }

/* Sundays: Youth Serve Day callout */
.muserve { display: grid; grid-template-columns: auto 1fr; gap: 14px clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(36px, 4vw, 56px); padding-top: 28px; border-top: 2px solid var(--charcoal); }
.muserve .yimpact__tag { margin: 4px 0 0; }
.muserve h3 { margin: 0 0 8px; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1; letter-spacing: -.03em; }
.muserve p:not(.yimpact__tag) { margin: 0; color: var(--ink-soft); max-width: 62ch; }
@media (max-width: 760px) { .muserve { grid-template-columns: 1fr; } .muserve .yimpact__tag { justify-self: start; } }
.muparents__btn { margin-top: 30px; }

/* Sundays */
.musun__lede { margin: 20px 0 0; color: var(--ink-soft); font-size: clamp(1.05rem, 1.3vw, 1.2rem); }

/* FAQ (same pattern as Nuvo Kids) */
.mufaq { background: var(--white); }
.mufaq__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 7vw, 110px); align-items: start; }
.mufaq__grid h2 { margin-bottom: 20px; }
.mufaq__help { color: var(--ink-soft); margin: 0 0 10px; }
.mufaq .link-plain { font-family: var(--font-display); font-weight: 800; }
.mufaq__list details { border-bottom: 1px solid var(--line); }
.mufaq__list details:first-child { border-top: 1px solid var(--line); }
.mufaq__list summary { list-style: none; cursor: pointer; position: relative; padding: 24px 50px 24px 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.1rem, 1.6vw, 1.3rem); letter-spacing: -.01em; }
.mufaq__list summary::-webkit-details-marker { display: none; }
.mufaq__list summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); color: var(--y-blue); font-size: 22px; font-weight: 500; transition: background .3s; }
.mufaq__list details[open] summary::after { content: "–"; background: var(--y-blue); color: var(--white); }
.mufaq__list details p { margin: 0 0 24px; color: var(--ink-soft); max-width: 60ch; }
.mufaq__list a { color: var(--y-blue); }

/* Contact: same card as Caitlin's on the Christmas page, in YTH blue */
.muhost { padding: clamp(70px, 9vw, 110px) 0; }
.muhost__card { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; background: var(--white); border: 1px solid rgba(27, 95, 193, .12); border-radius: 28px; padding: clamp(24px, 4vw, 48px); position: relative; overflow: hidden; }
.muhost__card::after { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgba(27, 95, 193, .16), transparent 70%); pointer-events: none; }
.muhost__card img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 22%; border-radius: 50%; border: 6px solid #fff; box-shadow: 0 14px 34px rgba(19, 74, 153, .2); }
.muhost__card .eyebrow { color: var(--y-blue); }
.muhost__h { margin: 0 0 14px; font-family: var(--font-display); font-weight: 900; font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1; letter-spacing: -.035em; }
.muhost__h em { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.01em; color: var(--y-blue); }
.muhost__card p:not(.eyebrow) { color: var(--ink-soft); max-width: 54ch; margin: 0 0 26px; font-size: 1.08rem; line-height: 1.6; }
@media (max-width: 760px) { .muhost__card { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; } .muhost__card img { max-width: 200px; } }

/* Closing */
.muclosing .closing__title { max-width: 12ch; }
.muclosing__copy { max-width: 56ch; margin: 26px auto 0; text-align: center; color: var(--ink-soft); }
.muclosing__kicker { text-align: center; margin: 14px 0 34px !important; }

@media (max-width: 1100px) {
  .ysteps--5 { grid-template-columns: repeat(3, 1fr); }
  .ysteps--5 .ystep:nth-child(4) { padding-left: 0; border-left: 0; }
  .ysteps--4 { grid-template-columns: repeat(2, 1fr); }
  .ysteps--4 .ystep:nth-child(3) { padding-left: 0; border-left: 0; }
  .ysteps--4 .ystep:nth-child(n+3), .ysteps--5 .ystep:nth-child(n+4) { border-top: 1px solid var(--line); }
}
@media (max-width: 1000px) {
  .muletter__grid, .mufaq__grid { grid-template-columns: 1fr; }
  .muletter__faces { position: static; max-width: 460px; }
  .mupreview .yimpact__photo { position: static; }
}
@media (max-width: 760px) {
  .mudates, .ysteps--4, .ysteps--5 { grid-template-columns: 1fr; }
  .mudates .ystep + .ystep, .ysteps--4 .ystep, .ysteps--5 .ystep { padding-left: 0; border-left: 0; }
  .ysteps--4 .ystep + .ystep, .ysteps--5 .ystep + .ystep { border-top: 1px solid var(--line); }
  .muletter__faces { max-width: 340px; }
}