/* =========================================================================
   BEDTIME HOLLOW — Developer Bible v1.0, section 17

   The design rules for this page are their own list: lower visual intensity,
   fewer choices, no flashing animation, no surprise audio, warm twilight
   colors, and three plain actions.

   So the palette here leans plum and amber rather than the site's Sky blue.
   A blue night reads as cold and as screen time. Dusk reads as the end of a
   warm day, which is what this page is for. The wave hands the page back to
   the cream everything else is built on, so the header and footer still
   belong to it.

   Nothing on this page moves. Meet Our Friends sways on the home page; here
   the same five sit perfectly still.
   ========================================================================= */

.hollow { background: var(--cream); }

/* ---------- 1. Twilight ---------- */
.hollow-hero {
  position: relative;
  background: linear-gradient(175deg, #3B2A5C 0%, #6B3F6E 46%, #A55C63 78%, #D08A5C 100%);
  padding: var(--space-48) 0 68px;
  overflow: hidden;
}
.hollow-hero__sky { position: absolute; inset: 0; pointer-events: none; }
.hollow-moon { position: absolute; top: 26px; right: 8%; display: flex; opacity: 0.95; }

/* Six stars, hand placed. A repeating pattern reads as wallpaper. They do not
   twinkle: section 17 rules out flashing animation. */
.hollow-star {
  position: absolute; width: 5px; height: 5px; border-radius: 50%;
  background: #FFF0D2; opacity: 0.7;
}
.hollow-star--a { top: 18%; left: 12%; }
.hollow-star--b { top: 34%; left: 26%; width: 3px; height: 3px; }
.hollow-star--c { top: 12%; left: 44%; width: 4px; height: 4px; }
.hollow-star--d { top: 46%; left: 62%; width: 3px; height: 3px; }
.hollow-star--e { top: 22%; left: 78%; }
.hollow-star--f { top: 58%; left: 88%; width: 3px; height: 3px; }

/* Rick's painting, when it arrives. The dusk wash stays over it so the words
   hold their contrast whatever he paints. */
.hollow-hero__art { position: absolute; inset: 0; }
.hollow-hero__art .art { height: 100%; width: 100%; }

/* Room for the painting. Without this the hero is only as tall as the words
   and a 24 by 7 picture gets cropped to a letterbox slot, which threw away
   the moon in the window. */
.hollow-hero--art { min-height: 360px; display: flex; flex-direction: column; justify-content: center; }

/*
 * The scrim ran light at the top and dark at the bottom, which was right for
 * the drawn twilight sky and wrong for Rick's painting: his has a lit window
 * and a lamp exactly where the title sits. It is now strongest across the
 * band the words occupy and lifts below it, so the children and Goldie stay
 * visible while the copy stays readable.
 */
.hollow-hero--art::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(43, 28, 66, 0.66) 0%,
    rgba(43, 28, 66, 0.60) 46%,
    rgba(43, 28, 66, 0.40) 74%,
    rgba(43, 28, 66, 0.62) 100%
  );
}

/* Belt and braces, so the words survive whatever painting is dropped in next
   without anyone having to retune the scrim for it. */
.hollow-hero--art .hollow-hero__title,
.hollow-hero--art .hollow-hero__lead,
.hollow-hero--art .hollow-hero__eyebrow { text-shadow: 0 2px 10px rgba(28, 18, 44, 0.65); }

.hollow-hero__copy { position: relative; z-index: 1; text-align: center; }
.hollow-hero__eyebrow {
  font-family: var(--font-head); font-weight: var(--w-bold);
  font-size: var(--t-eyebrow-size); letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase; color: #F6D9A8; margin: 0 0 8px;
}
.hollow-hero__title {
  font-family: var(--font-head); font-weight: var(--w-extrabold);
  font-size: var(--t-h1-size); line-height: var(--t-h1-lh);
  color: #FFF8EA; margin: 0 0 var(--space-12);
}
.hollow-hero__lead {
  font-size: var(--t-child-size); line-height: var(--t-child-lh);
  color: #F3E4DC; max-width: 640px; margin: 0 auto;
}
/* The wave belongs to the bottom edge of the sky, not to the flow above it. */
.hollow-hero .wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 1; }

/* ---------- 2. Play, Read, Pray ---------- */
.hollow-acts { margin-top: -22px; position: relative; z-index: 2; }
/* Auto columns rather than a fixed three, because a night with no song filed
   yet has fewer actions and they should still fill the row. */
.hollow-acts__row {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: var(--space-16);
}
.hollow-act {
  display: block; text-align: center; text-decoration: none;
  background: #fff; border: 2px solid #EEDFE8;
  border-radius: var(--radius-xl); box-shadow: 0 6px 0 #EEDFE8;
  padding: var(--space-24) var(--space-16);
  transition: transform 0.15s ease;
}
.hollow-act:hover { transform: translateY(-3px); }
.hollow-act:active { transform: translateY(2px); box-shadow: 0 3px 0 #EEDFE8; }
.hollow-act:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; }
/* The number says which comes first. Bedtime is an order, not a menu. */
.hollow-act__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: #F3E4EE; color: #7A4B86;
  font-family: var(--font-head); font-weight: var(--w-extrabold); font-size: 15px;
  margin-bottom: 6px;
}
.hollow-act__icon { display: flex; justify-content: center; margin-bottom: 6px; }
.hollow-act__name {
  display: block; font-family: var(--font-head); font-weight: var(--w-extrabold);
  font-size: var(--t-h3-size); line-height: 1.2; color: var(--navy); margin-bottom: 4px;
}
.hollow-act__note {
  display: block; font-size: 15px; line-height: 1.5; color: var(--body);
}

/* ---------- The blocks ---------- */
.hollow-block { padding: var(--space-32) 0 0; }
.hollow-block--last { padding-bottom: var(--space-48); }
.hollow-panel {
  background: #fff; border: 2px solid #EBE2D2;
  border-radius: var(--radius-xl); box-shadow: 0 6px 0 #EBE2D2;
  padding: var(--space-32) var(--space-32) var(--space-24);
}
.hollow-panel__head { text-align: center; margin-bottom: var(--space-24); }
.hollow-panel__mark { display: flex; justify-content: center; margin-bottom: 6px; }
.hollow-panel__title {
  font-family: var(--font-head); font-weight: var(--w-extrabold);
  font-size: 28px; line-height: 1.2; color: var(--navy); margin: 0 0 6px;
}
.hollow-panel__lead {
  font-size: var(--t-adult-size); line-height: 1.5; color: var(--body);
  max-width: 560px; margin: 0 auto;
}

/* ---------- 3 and 4. Tonight's song, tonight's story ---------- */
/* One thing, given room, rather than a grid to choose from. */
.hollow-one {
  display: grid; grid-template-columns: 260px 1fr;
  gap: var(--space-32); align-items: center;
}
.hollow-one--flip { grid-template-columns: 1fr 320px; }
.hollow-one--flip .hollow-one__art { order: 2; }
.hollow-one--flip .hollow-one__copy { order: 1; }
.hollow-one__art .art {
  border-radius: var(--radius-lg); overflow: hidden; border: 2px solid #EBE2D2;
}
.hollow-one__kicker {
  font-family: var(--font-head); font-weight: var(--w-bold);
  font-size: var(--t-eyebrow-size); letter-spacing: var(--t-eyebrow-ls);
  text-transform: uppercase; color: #7A4B86; margin: 0 0 6px;
}
.hollow-one__title {
  font-family: var(--font-head); font-weight: var(--w-extrabold);
  font-size: 30px; line-height: 1.2; color: var(--navy); margin: 0 0 10px;
}
.hollow-one__note {
  font-size: var(--t-adult-size); line-height: 1.6; color: var(--body);
  margin: 0 0 var(--space-24); max-width: 52ch;
}
.hollow-one__go { display: flex; align-items: center; gap: var(--space-24); margin: 0; }
.hollow-one__go .btn { display: inline-flex; align-items: center; gap: 8px; }
/* A plain word, not a second button. Two buttons of equal weight is a choice,
   and section 17 asks for fewer of those. */
.hollow-one__more {
  font-family: var(--font-head); font-weight: var(--w-bold);
  font-size: var(--t-adult-size); color: #7A4B86;
}

.hollow-quiet {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16);
}

/* ---------- 5. The verse and the prayer ---------- */
/* Keeps a little of the sky, so the page ends where it began rather than
   brightening at the last moment. */
.hollow-panel--night {
  background: #F7F1F6; border-color: #E7D8E6; box-shadow: 0 6px 0 #E7D8E6;
}
.hollow-verse {
  margin: 0 auto var(--space-32); max-width: 560px; text-align: center;
  padding-bottom: var(--space-24); border-bottom: 2px solid #E7D8E6;
}
.hollow-verse__mark { display: flex; justify-content: center; margin-bottom: 8px; }
.hollow-verse__words {
  font-family: var(--font-head); font-weight: var(--w-bold);
  font-size: 20px; line-height: 1.55; color: #4A2F58;
  margin: 0 0 6px; padding: 0; border: 0;
}
.hollow-verse__ref {
  font-family: var(--font-head); font-weight: var(--w-bold);
  font-size: 15px; color: #7A4B86;
}
.hollow-prayer {
  margin: 0 auto; max-width: 460px; padding: 0; border: 0; text-align: center;
}
.hollow-prayer p {
  font-family: var(--font-head); font-weight: var(--w-bold);
  font-size: 22px; line-height: 1.5; color: #3E2E68; margin: 0 0 4px;
}
.hollow-prayer p:last-child { margin-bottom: 0; color: #7A4B86; }
.hollow-panel__note {
  font-size: 15px; line-height: 1.6; color: var(--body);
  text-align: center; max-width: 620px; margin: var(--space-24) auto 0;
}

/* ---------- 6. Goodnight Friends ---------- */
.hollow-friends {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-16);
}
.hollow-friend { text-align: center; }
.hollow-friend__art {
  display: block; border-radius: var(--radius-lg); overflow: hidden;
  border: 2px solid #EEDFE8; margin-bottom: 8px;
}
.hollow-friend__name {
  display: block; font-family: var(--font-head); font-weight: var(--w-bold);
  font-size: 15px; line-height: 1.3; color: var(--navy);
}

/* ---------- 7. For grown ups ---------- */
.hollow-grown {
  background: var(--panel); border: 2px solid #F3E6CB;
  border-radius: var(--radius-xl); padding: var(--space-24) var(--space-32);
}
.hollow-grown__title {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head); font-weight: var(--w-extrabold);
  font-size: 20px; color: var(--navy); margin: 0 0 var(--space-12);
}
.hollow-grown__lead {
  font-size: var(--t-adult-size); line-height: 1.6; color: var(--body);
  text-align: center; max-width: 700px; margin: 0 auto var(--space-16);
}
.hollow-grown__list {
  margin: 0; padding-left: 22px; columns: 2; column-gap: var(--space-32);
}
.hollow-grown__list li {
  font-size: 15px; line-height: 1.6; color: var(--body);
  margin-bottom: 8px; break-inside: avoid;
}
.hollow-grown__list li:last-child { margin-bottom: 0; }

/* ---------- Narrower screens ---------- */
@media (max-width: 900px) {
  .hollow-one,
  .hollow-one--flip { grid-template-columns: 1fr; gap: var(--space-24); }
  /* The picture leads on a phone whichever side it sat on. */
  .hollow-one--flip .hollow-one__art { order: 1; }
  .hollow-one--flip .hollow-one__copy { order: 2; }
  .hollow-one__art { max-width: 320px; }
  .hollow-quiet { grid-template-columns: repeat(2, 1fr); }
  .hollow-grown__list { columns: 1; }
  .hollow-panel { padding: var(--space-24) var(--space-16); }
}

@media (max-width: 700px) {
  /* Actions stack rather than shrink: three tiny cards side by side is worse
     than three readable ones in a column. */
  .hollow-acts__row { grid-auto-flow: row; }
  .hollow-friends { grid-template-columns: repeat(3, 1fr); }
  .hollow-one__go { flex-direction: column; align-items: stretch; gap: var(--space-16); }
  .hollow-one__go .btn { justify-content: center; }
  .hollow-one__more { text-align: center; }
  .hollow-moon { right: 6%; top: 14px; }
  .hollow-prayer p { font-size: 20px; }
}