/* Editorial introduction to Puzzleteca. Blupoli remains the page shell. */
.puzzleteca-page .puz-main {
  width: min(1160px, calc(100% - 40px));
  margin: 0 auto;
  padding: clamp(36px, 5vw, 76px) 0 clamp(68px, 9vw, 118px);
}
.puz-main h1, .puz-main h2, .puz-main h3 {
  color: var(--text);
  letter-spacing: -.045em;
  text-wrap: balance;
}
.puz-main p { line-height: 1.75; }
.puz-kicker {
  color: var(--app-accent-ink, var(--brand-aqua));
  font-size: .78rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.puz-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  align-items: center;
  gap: clamp(24px, 5vw, 66px);
}
.puz-wordmark {
  display: block;
  width: min(270px, 64%);
  height: auto;
  margin: 20px 0 25px;
  filter: drop-shadow(0 7px 11px rgba(0, 21, 78, .13));
}
.puz-hero h1 {
  max-width: 690px;
  margin: 0 0 22px;
  font-size: clamp(2.6rem, 5.25vw, 5rem);
  line-height: 1.07;
}
.puz-lead { max-width: 60ch; margin: 0 0 18px; font-size: clamp(1.06rem, 1.7vw, 1.2rem); color: var(--muted); }
.puz-note { font-size: .91rem; color: var(--text-secondary); font-weight: 720; }
.puz-hero-art {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(340px, 36vw, 460px);
  overflow: hidden;
  isolation: isolate;
  border-radius: 34px;
  border: 1px solid rgba(118, 201, 255, .35);
  background: #052b75;
}
.puz-art-glow {
  position: absolute;
  inset: -30%;
  opacity: .55;
  border: 70px solid rgba(0, 190, 255, .13);
  border-radius: 50%;
  transform: rotate(-14deg);
}
.puz-avatar { position: absolute; top: 3%; left: 6%; width: 24%; height: auto; transform: rotate(-12deg); }
.puz-hero-mascot {
  position: relative;
  z-index: 1;
  width: min(71%, 335px);
  max-height: 93%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 23px 15px rgba(0, 17, 65, .34));
}
.puz-spark { position: absolute; z-index: 1; color: #ffe143; font-weight: 900; }
.puz-spark-one { right: 11%; top: 15%; font-size: 3.4rem; }
.puz-spark-two { left: 12%; bottom: 9%; font-size: 5rem; transform: rotate(-14deg); }
.puz-story {
  display: grid;
  grid-template-columns: 80px 1fr;
  align-items: start;
  gap: clamp(20px, 4vw, 46px);
  margin: clamp(68px, 8vw, 108px) 0;
  padding: clamp(28px, 5vw, 50px);
  border: 1px solid var(--line);
  border-radius: 28px;
  background: var(--surface);
}
.puz-story-symbol { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 22px; background: #ffdf43; color: #12296b; font-size: 2.8rem; }
.puz-story h2,.puz-section-heading h2,.puz-closing h2 {
  max-width: 800px; margin: 0 0 18px; font-size: clamp(1.9rem, 3.3vw, 3.1rem); line-height: 1.13;
}
.puz-story p:last-child { max-width: 78ch; color: var(--muted); margin-bottom: 0; }
.puz-section-heading { max-width: 780px; margin-bottom: 28px; }
.puz-section-heading p:last-child { color: var(--muted); }
.puz-moments-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.puz-moment {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  min-height: 280px;
  padding: clamp(22px, 2.3vw, 30px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
}
.puz-moment:nth-child(2) { background: var(--surface-soft); }
.puz-moment-icon { display: grid; place-items: center; width: 65px; height: 65px; margin-bottom: 24px; border-radius: 18px; background: #fff0aa; color: #042d74; font-size: 2rem; }
.puz-moment-celebrate img { width: 118px; height: 112px; margin: -15px 0 0; object-fit: contain; object-position: left center; }
.puz-moment h3 { margin: auto 0 12px; font-size: 1.45rem; }
.puz-moment p { color: var(--muted); margin-bottom: 0; }
.puz-topics { margin: clamp(76px, 9vw, 116px) 0; }
.puz-topic-list { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 28px 0 0; list-style: none; }
.puz-topic-list li { padding: 12px 17px; border: 1px solid var(--line); border-radius: 999px; color: var(--text-secondary); background: var(--surface); font-weight: 720; }
.puz-closing { max-width: 820px; margin: 0 auto; text-align: center; }
.puz-closing > span { display: block; margin-bottom: 20px; color: #e5ad00; font-size: 2.4rem; }
.puz-closing h2 { margin-inline: auto; }
.puz-closing p { margin: 0 auto; max-width: 64ch; color: var(--muted); font-size: 1.06rem; }
@media (max-width: 830px) {
  .puz-hero { grid-template-columns: 1fr; }
  .puz-hero-art { min-height: 360px; }
  .puz-moments-grid { grid-template-columns: 1fr; }
  .puz-moment { min-height: 0; }
  .puz-moment h3 { margin-top: 24px; }
}
@media (max-width: 520px) {
  .puzzleteca-page .puz-main { width: calc(100% - 28px); padding-top: 28px; }
  .puz-hero h1 { font-size: clamp(2.2rem, 10vw, 3.5rem); }
  .puz-wordmark { width: min(240px, 70%); }
  .puz-hero-art { min-height: 285px; border-radius: 24px; }
  .puz-hero-mascot { max-height: 265px; }
  .puz-story { grid-template-columns: 1fr; padding: 24px; }
  .puz-story-symbol { width: 54px; height: 54px; font-size: 2rem; }
  .puz-moment { padding: 24px; }
  .puz-topic-list { gap: 8px; }
  .puz-topic-list li { padding: 10px 13px; font-size: .9rem; }
}