/* Skin: "comic" — comic book. Halftone, primary colours, thick black panels. */
.skin-comic { background: #ffd83d; background-image: radial-gradient(#e8000033 18%, transparent 18%); background-size: 14px 14px; }
.skin-comic .winframe { border: 4px solid #000; }
.skin-comic .viewport { background: #fff8e1; }
.skin-comic .site { max-width: 840px; margin: 0 auto; font-family: "Comic Sans MS", "Trebuchet MS", sans-serif; }
.skin-comic .masthead { text-align: center; padding: 24px 18px; background: #ffe14d; border-bottom: 4px solid #000; }
.skin-comic .brand { margin: 0; font: 900 50px "Comic Sans MS", "Arial Black", sans-serif; color: #ffdd00; -webkit-text-stroke: 3px #000; text-stroke: 3px #000; text-shadow: 4px 4px 0 #e80000; }
.skin-comic .tag { margin: 12px 0 0; display: inline-block; background: #fff; border: 3px solid #000; border-radius: 18px; padding: 6px 16px; font-size: 16px; font-weight: bold; color: #000; }
.skin-comic .content { padding: 24px 28px 28px; }
.skin-comic .content p { font-size: 16.5px; line-height: 1.6; color: #111; margin: 0 0 1em; }
.skin-comic .content h2 { font: 900 26px "Comic Sans MS", sans-serif; color: #e80000; -webkit-text-stroke: 1px #000; margin: 1.2em 0 .4em; }
.skin-comic .content a, .skin-comic .period-links a { color: #0050e8; font-weight: bold; }
.skin-comic .period-links { font-size: 16px; margin: 0 0 16px; text-align: center; }
.skin-comic .inline img, .skin-comic .tile img { max-width: 100%; height: auto; display: block; border: 4px solid #000; background: #fff; }
.skin-comic .inline figcaption, .skin-comic .tile figcaption { font-size: 14px; color: #222; margin-top: 4px; font-weight: bold; }
.skin-comic .period-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; margin-top: 18px; }
.skin-comic .tile { margin: 0; }
.skin-comic .period-foot { background: #000; color: #ffe14d; font-size: 14px; padding: 14px 28px; text-align: center; font-weight: bold; }