/* Additional content layouts only. The live site's original styles remain untouched. */
.picture-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.picture-card{padding:8px;background:#fff3ce;border:3px ridge #8f78bd;min-width:0}
.picture-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;image-rendering:pixelated;background:#21166c}
.picture-card h3{font:bold 14px 'Courier New',monospace;color:#6d007e;margin:10px 0 5px}
.picture-card p{font-size:12px;margin:4px 0}
.gallery-meta{font:11px 'Courier New',monospace;color:#65326c}
.shelf-heading{font:bold 17px 'Courier New',monospace;color:#780075;margin:19px 0 10px}
.feature-strip{display:flex;gap:12px;align-items:center;border:3px ridge #8c84d8;background:#fff3bb;padding:11px;margin:14px 0}
.feature-strip img{width:58px;height:58px;image-rendering:pixelated;object-fit:contain}
.feature-strip p{font-size:13px;margin:0}
.link-tiles{display:flex;flex-wrap:wrap;gap:8px;margin:13px 0}
.link-tiles a,.gallery-filters button{border:3px outset #a8b7eb;background:#e4e4ef;color:#16116c;padding:8px 11px;font:bold 12px 'Courier New',monospace;text-decoration:none;cursor:pointer}
.link-tiles a:hover,.gallery-filters button:hover{background:#ffe864}
.gallery-status{font:11px 'Courier New',monospace;color:#583f74;margin:11px 0}
.gallery-filters{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0}
.gallery-filters button[aria-pressed=true]{background:#111a89;color:#fff}
.gallery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.gallery-item{background:#fff5d6;border:3px ridge #9787c6;padding:8px;min-width:0}
.gallery-item button{display:block;border:0;background:transparent;padding:0;text-align:left;width:100%;cursor:zoom-in}
.gallery-item img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
.gallery-item img.pixel-photo{image-rendering:pixelated}
.gallery-item h3{font:bold 15px Georgia,serif;color:#770073;margin:8px 0 4px}
.gallery-item p{font-size:12px;margin:0 0 8px}
.gallery-viewer{border:5px ridge #a7a1df;background:#fff9dc;color:#1e1647;max-width:min(92vw,780px);max-height:95vh;overflow:auto;padding:13px}
.gallery-viewer::backdrop{background:rgba(3,5,30,.86)}
.gallery-viewer img{display:block;max-width:100%;max-height:70vh;object-fit:contain;margin:auto}
.viewer-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.story-card{background:#fff5ce;border:3px ridge #9784ca;padding:13px;margin:15px 0}
.story-card time{font:11px 'Courier New',monospace;color:#71527d}
.story-card h3{font:bold 20px/1.2 Georgia,serif;color:#77006d;margin:8px 0}
.story-card p{line-height:1.56}
.story-sources{background:#ece9fe;padding:9px;border-left:4px solid #8a3ab1;font-size:12px;overflow-wrap:anywhere}
.story-sources a{font-size:12px}
.source-note{font-size:11px;color:#514778}
.art-workshop{min-width:0}
.art-workshop pre,.code-sheet{overflow-x:auto;max-width:100%;white-space:pre;tab-size:2;background:#090d53;color:#e5fcff;padding:13px;border:3px inset #5556b0;font:12px/1.6 'Courier New',monospace}
.lesson-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lesson-tile{border:3px outset #ababd9;background:#fff4cc;padding:12px}
.lesson-tile h3{font:bold 14px 'Courier New',monospace;color:#650074;margin:0 0 9px}
.lesson-tile p{font-size:13px}
.photo-note{padding:12px;border:2px dashed #ad5fa3;background:#fff0be;font-size:13px;margin-top:12px;overflow-wrap:anywhere}
.archive-row{display:flex;gap:9px;flex-wrap:wrap;padding:12px;background:#f8eacf;border:2px dotted #b97aa0}
.archive-row a{font:bold 12px 'Courier New',monospace}
.local-font-sample{font-family:'Tharul Pixel','Courier New',monospace}
@media(max-width:600px){.lesson-grid{grid-template-columns:1fr}.picture-grid,.gallery-grid{gap:8px}.story-card{padding:10px}}
@media(max-width:390px){.picture-grid,.gallery-grid{grid-template-columns:1fr}}
/* Prevent long code blocks from expanding the middle column on narrow devices. */
.main-column{grid-template-columns:minmax(0,1fr)}
.art-workshop pre{max-width:100%;min-width:0;overflow-x:auto}