/* Long sections share the full page instead of extending one narrow column. */
body.playful-preview .playful-project .project {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  row-gap: 30px;
}
body.playful-preview .project > .gridready-process,
body.playful-preview .project > .project-secondary { grid-column: 1 / -1; }
body.playful-preview .project > .gridready-process { margin: 0; }
body.playful-preview .project-secondary {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}
body.playful-preview .project-secondary .project-contribution { margin: 0; }
body.playful-preview .project-followup { min-width: 0; }
body.playful-preview .project-followup .project-links { margin: 0 0 22px; }

body.playful-preview #about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 38px 50px;
  align-items: start;
}
body.playful-preview #about > .section-heading,
body.playful-preview #about > .about-copy { min-width: 0; margin: 0; }
body.playful-preview #about > :not(.section-heading):not(.about-copy) { grid-column: 1 / -1; }
body.playful-preview #about .about-education-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 50px;
  align-items: start;
}
body.playful-preview #about .about-education-row .about-portrait {
  width: min(100%, 342px);
  margin: 8px auto 0;
}
body.playful-preview #about .timeline { padding-left: 20px; border-top: 0; }
body.playful-preview #about .timeline > div {
  padding: 14px 0;
}
body.playful-preview #about .timeline > div:first-child { padding-top: 0; }
body.playful-preview #about .timeline > div:first-child::before { top: 10px; }
body.playful-preview #about .timeline h3 { margin: 5px 0; }
body.playful-preview #about .timeline p { font-size: 15px; line-height: 1.65; }
body.playful-preview #about .timeline .education-quote { margin-top: 10px; }
body.playful-preview #about .timeline .education-quote p { font: 11px/1.5 var(--mono); }
body.playful-preview #about .about-education-row > .education-quote {
  grid-column: 1 / -1;
  margin-top: -12px;
  border-block: 1px solid var(--line);
}
body.playful-preview #about .education-quote summary { color: var(--accent); font-size: 14px; padding: 15px 0; }
body.playful-preview #about .recommendations-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding: 8px 0 25px; }
body.playful-preview #about .teacher-quote { margin: 0; padding: 0 18px; border-left: 2px solid #8dacf2; }
body.playful-preview #about .teacher-quote blockquote { margin: 0 0 14px; font: italic 18px/1.5 var(--serif); color: var(--ink); }
body.playful-preview #about .teacher-quote p { margin: 0; font: 11px/1.6 var(--mono); color: var(--muted); }
body.playful-preview #about .memberships { margin: 0; }
body.playful-preview #about .membership-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
body.playful-preview #about .membership-grid article { padding: 22px; }
body.playful-preview #about .community-note { margin: 0; }
body.playful-preview #about .toolbox {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 16px 32px;
  padding-top: 0;
}
body.playful-preview #about .toolbox > .eyebrow { grid-column: 1 / -1; }
body.playful-preview #about .toolbox > .tags {
  grid-column: 1;
  margin: 0;
  align-self: start;
  align-items: center;
  gap: 8px;
}
body.playful-preview #about .toolbox > .tags span {
  display: inline-flex;
  align-items: center;
  min-height: 0;
  padding: 6px 12px;
  font-size: 12px;
  line-height: 1.4;
  border-radius: 8px;
}
body.playful-preview #about .tool-skill-grid { grid-column: 1; margin: 0; align-items: start; }
body.playful-preview #about .language-card {
  grid-column: 2;
  grid-row: 2 / 4;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 18px;
}
body.playful-preview #about > .footnote-button { justify-self: start; }
body.playful-preview #about > .joke-result:empty { display: none; }

/* Hold the sentence at reading height while scrolling it, including both ends. */
body.playful-preview .band-track { position: relative; margin: 35px -18px 0; }
body.playful-preview .band-track .playful-band { margin: 0; }
body.playful-preview .band-track.is-scrollable .playful-band { position: sticky; }
body.playful-preview .playful-band .band-window p { transition: none; }

@media (max-width: 1000px) {
  body.playful-preview #about .membership-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.playful-preview #about .toolbox { grid-template-columns: 1fr; }
  body.playful-preview #about .language-card { grid-column: 1; grid-row: auto; }
}
@media (max-width: 800px) {
  body.playful-preview #about { gap: 30px; }
  body.playful-preview #about > .section-heading,
  body.playful-preview #about > .about-copy { grid-column: 1 / -1; }
  body.playful-preview #about .about-education-row,
  body.playful-preview .project-secondary { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 650px) {
  body.playful-preview .playful-project .project { grid-template-columns: minmax(0, 1fr); }
  body.playful-preview #about .membership-grid,
  body.playful-preview #about .tool-skill-grid,
  body.playful-preview #about .recommendations-grid { grid-template-columns: minmax(0, 1fr); }
  body.playful-preview #about .membership-grid article { padding: 20px; }
  body.playful-preview .band-track { margin-inline: -8px; }
  body.playful-preview .band-track .playful-band { padding-right: 12px; }
}
body.playful-preview.motion-paused .band-track { height: auto !important; }
body.playful-preview.motion-paused .band-track .playful-band { position: relative; top: auto !important; }
@media (prefers-reduced-motion: reduce) {
  body.playful-preview .band-track { height: auto !important; }
  body.playful-preview .band-track .playful-band { position: relative; top: auto !important; }
}