/* Keep the existing paper card, palette and type; scope the new layout to this story. */
#personal-productivity{display:block;padding:32px;grid-column:auto}
#personal-productivity>p{max-width:75ch}
#personal-productivity .productivity-infographics{display:grid;grid-template-columns:1fr;gap:28px;margin:30px 0;padding:0;align-items:start}
.productivity-infographics figure{margin:0;min-width:0}
.productivity-infographics .photo-button{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.productivity-infographics img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;filter:none;transform:none}
.productivity-infographics figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;padding-top:14px;font:italic 20px/1.4 Georgia,serif}
.productivity-infographics .text-link{font:14px/1.6 Arial,sans-serif}
.productivity-infographics .photo-button:focus-visible{outline:3px solid currentColor;outline-offset:5px}
@media(max-width:1199px){#personal-productivity{padding:25px}#personal-productivity .productivity-infographics{grid-template-columns:1fr;gap:30px}}

@media(max-width:560px){#personal-productivity{padding:16px}#personal-productivity .productivity-infographics{margin-inline:-8px}}
/* Enlarge these text-heavy graphics without changing other photo viewers. */
#productivity-viewer{width:1320px;padding:16px}
#productivity-viewer .infographic-content{overflow:auto;max-height:75vh;overscroll-behavior:contain}
#productivity-viewer .infographic-content img{width:100%;height:auto;max-height:none}
#productivity-viewer.reading-size .infographic-content img{width:auto;max-width:none}
#productivity-zoom{float:left;border:1px solid #ffffff80;background:transparent;color:white;padding:8px 16px;cursor:pointer}
#productivity-zoom[hidden]{display:none}

#productivity-viewer .infographic-close{float:right;border:1px solid #ffffff80;background:transparent;color:white;padding:8px 16px;cursor:pointer;margin-bottom:16px}
#productivity-viewer .infographic-content{clear:both}

/* Learner summary retains the existing project card and surrounding grid. */
#learner-diagnostic .learner-infographic{margin:24px 0}
#learner-diagnostic .learner-infographic img{display:block;width:100%;height:auto;filter:none}
#learner-diagnostic .learner-infographic figcaption{padding-top:12px}

.project-details{margin-top:24px}
.project-details summary{cursor:pointer;text-decoration:underline;text-underline-offset:5px;padding:10px 0;font-size:16px}
.project-details summary:focus-visible{outline:3px solid #745080;outline-offset:4px}
.project-picture{width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;display:block;margin:0 0 26px}
#personal-productivity .project-picture{margin-bottom:26px}

body[data-page="projects"] .idea-grid{align-items:start}
.idea-card .project-picture{height:auto;object-fit:contain}

#career-development-framework .framework-infographic{margin:24px 0}
#career-development-framework .framework-infographic img{display:block;width:100%;height:auto;filter:none}
#career-development-framework .framework-infographic figcaption{padding-top:12px}