/* Skin: "wireframe" — lo-fi greyscale wireframe, dashed boxes, sketch UI. */
.skin-wireframe { background: #e8e8e8; }
.skin-wireframe .viewport { background: #fff; }
.skin-wireframe .site { max-width: 800px; margin: 0 auto; font-family: "Comic Sans MS", "Segoe Print", "Bradley Hand", cursive; color: #444; }
.skin-wireframe .masthead { padding: 22px 26px; border-bottom: 2px dashed #999; }
.skin-wireframe .brand { margin: 0; font: 700 34px "Comic Sans MS", cursive; color: #555; border: 2px dashed #aaa; display: inline-block; padding: 6px 14px; }
.skin-wireframe .tag { margin: 12px 0 0; color: #888; font-size: 16px; }
.skin-wireframe .content { padding: 22px 28px 30px; }
.skin-wireframe .content p { font-size: 16px; line-height: 1.7; color: #555; margin: 0 0 1em; }
.skin-wireframe .content h2 { font: 700 20px "Comic Sans MS", cursive; color: #444; border-bottom: 2px dashed #bbb; margin: 1.4em 0 .4em; padding-bottom: 3px; }
.skin-wireframe .content a, .skin-wireframe .period-links a { color: #555; text-decoration: underline; text-decoration-style: dashed; }
.skin-wireframe .period-links { font-size: 16px; margin: 0 0 14px; }
.skin-wireframe .inline img, .skin-wireframe .tile img { max-width: 100%; height: auto; display: block; border: 2px dashed #aaa; filter: grayscale(1) opacity(.7); }
.skin-wireframe .inline figcaption, .skin-wireframe .tile figcaption { font-size: 14px; color: #999; margin-top: 4px; }
.skin-wireframe .period-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.skin-wireframe .tile { margin: 0; border: 2px dashed #ccc; }
.skin-wireframe .period-foot { border-top: 2px dashed #999; color: #999; font-size: 14px; padding: 14px 28px; text-align: center; }