/* Skin: "material" — Google Material Design. Bold flat colour, cards, Roboto. */
.skin-material { background: #eceff1; }
.skin-material .viewport { background: #eceff1; }
.skin-material .site { max-width: 860px; margin: 0 auto; font-family: Roboto, "Segoe UI", Arial, sans-serif; }
.skin-material .masthead { background: #6200ee; color: #fff; padding: 30px 28px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.skin-material .brand { margin: 0; font-weight: 500; font-size: 34px; }
.skin-material .tag { margin: 8px 0 0; font-weight: 400; font-size: 17px; color: rgba(255,255,255,.85); }
.skin-material .content { background: #fff; margin: 18px; padding: 26px 30px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.24); }
.skin-material .content p { font-size: 16.5px; line-height: 1.7; color: #37474f; margin: 0 0 1.05em; }
.skin-material .content h2 { font-weight: 500; font-size: 24px; color: #6200ee; margin: 1.4em 0 .4em; }
.skin-material .content a, .skin-material .period-links a { color: #03dac5; text-decoration: none; font-weight: 500; }
.skin-material .content a:hover { color: #6200ee; }
.skin-material .period-links a { display: inline-block; background: #6200ee; color: #fff; border-radius: 4px; padding: 8px 16px; text-transform: uppercase; font-size: 14px; letter-spacing: .5px; box-shadow: 0 1px 3px rgba(0,0,0,.3); margin-right: 8px; }
.skin-material .inline img { max-width: 100%; height: auto; display: block; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.skin-material .inline figcaption, .skin-material .tile figcaption { font-size: 14px; color: #90a4ae; margin-top: 6px; }
.skin-material .period-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; margin-top: 22px; }
.skin-material .tile { margin: 0; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.24); }
.skin-material .tile img { width: 100%; height: auto; display: block; }
.skin-material .period-foot { color: #607d8b; font-size: 14px; padding: 22px; text-align: center; }
