/* Skin: "brutalist" — raw concrete Web 1.0. System serif, hard borders, no polish. */
.skin-brutalist { background: #cfcfcf; }
.skin-brutalist .winframe { border: 3px solid #000; border-radius: 0; }
.skin-brutalist .viewport { background: #fff; }
.skin-brutalist .site { max-width: 760px; margin: 0 auto; font-family: "Times New Roman", Times, serif; color: #000; }
.skin-brutalist .masthead { padding: 22px 24px; background: #fff; border-bottom: 6px solid #000; text-align: left; }
.skin-brutalist .brand { margin: 0; font: 700 46px "Times New Roman", Times, serif; color: #000; }
.skin-brutalist .tag { margin: 8px 0 0; font-size: 17px; color: #000; }
.skin-brutalist .content { padding: 22px 26px 26px; }
.skin-brutalist .content p { font-size: 17px; line-height: 1.55; color: #000; margin: 0 0 1em; }
.skin-brutalist .content h2 { font: 700 22px "Times New Roman", serif; color: #000; margin: 1.3em 0 .3em; text-decoration: underline; }
.skin-brutalist .content a, .skin-brutalist .period-links a { color: #0000ee; text-decoration: underline; }
.skin-brutalist .content a:visited { color: #551a8b; }
.skin-brutalist .period-links { font-size: 16px; margin: 0 0 14px; font-family: monospace; }
.skin-brutalist .inline img, .skin-brutalist .tile img { max-width: 100%; height: auto; display: block; border: 2px solid #000; }
.skin-brutalist .inline figcaption, .skin-brutalist .tile figcaption { font: 14px monospace; color: #000; margin-top: 4px; }
.skin-brutalist .period-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0; margin-top: 18px; border: 2px solid #000; }
.skin-brutalist .tile { margin: 0; border: 1px solid #000; }
.skin-brutalist .period-foot { background: #000; color: #fff; font: 14px monospace; padding: 12px 26px; }