/* ============================================================
   Skin: "twitter" — old Twitter, c.2009–2011. The sky-blue background,
   the white centre column, the chunky blue wordmark, a timeline of tweets.
   No, not X. Never X.
   ============================================================ */
.skin-twitter { background: #c0deed; color: #333; }
.skin-twitter .viewport { background: #c0deed; }
.skin-twitter .site { max-width: 720px; margin: 0 auto; padding: 0 12px 30px; }

/* Blue masthead bar with the bird */
.skin-twitter .masthead {
  position: relative; text-align: left; padding: 18px 22px 16px;
  background: linear-gradient(#3ca1d4, #1c7cb5);
  border-radius: 0 0 8px 8px; border-bottom: 3px solid #15689b;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.skin-twitter .brand {
  margin: 0; color: #fff; font: bold 38px/1 "Helvetica Neue", Helvetica, Arial, sans-serif;
  letter-spacing: -1px; text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
.skin-twitter .brand::before { content: "🐦"; margin-right: 10px; font-size: 32px; vertical-align: -2px; }
.skin-twitter .tag { margin: 6px 0 0; color: #e3f2fb; font-size: 15px; font-style: italic; text-shadow: 0 1px 1px rgba(0,0,0,.25); }

/* White content panel — the profile bio box */
.skin-twitter .content {
  background: #fff; padding: 22px 26px; border: 1px solid #c4d8e6;
  border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
.skin-twitter .content p { font-size: 15px; line-height: 1.6; color: #333; margin: 0 0 1em; }
.skin-twitter .content a { color: #0084b4; text-decoration: none; }
.skin-twitter .content a:hover { text-decoration: underline; }

/* "Follow" pill */
.skin-twitter .period-links { margin: 0 0 4px; }
.skin-twitter .period-links a {
  display: inline-block; color: #fff; text-decoration: none; font-weight: bold; font-size: 14px;
  background: linear-gradient(#3ca1d4, #1c7cb5); border: 1px solid #15689b; border-radius: 4px;
  padding: 6px 16px; margin: 0 6px 6px 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.4);
}
.skin-twitter .period-links a:hover { background: linear-gradient(#48abdd, #2184bd); }

/* Twitter, wrapped — Spotify-Wrapped-style stat cards */
.skin-twitter .tw-wrapped { display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)); gap: 11px; margin: 20px 0 26px; }
.skin-twitter .tw-stat { background: #eaf4fb; border: 1px solid #c4d8e6; border-radius: 8px; padding: 16px 12px; text-align: center; }
.skin-twitter .tw-num { display: block; font: bold 30px/1 "Helvetica Neue", Helvetica, Arial, sans-serif; color: #1c7cb5; letter-spacing: -.5px; }
.skin-twitter .tw-label { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.4; color: #587488; }

/* The timeline: each gallery tile is a tweet card */
.skin-twitter .period-gallery { display: block; max-width: 540px; margin: 18px auto 0; }
.skin-twitter .tile {
  margin: 0 0 10px; background: #fff; border: 1px solid #c4d8e6; border-radius: 6px;
  overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.skin-twitter .tile::before {
  content: "Craig Burgess  @craigburgess"; display: block;
  padding: 10px 14px 6px; font: bold 14px "Helvetica Neue", Helvetica, Arial, sans-serif; color: #333;
}
.skin-twitter .tile img { width: 100%; height: auto; display: block; border-top: 1px solid #eef3f7; border-bottom: 1px solid #eef3f7; }
.skin-twitter .tile figcaption {
  padding: 9px 14px 12px; font-size: 14px; line-height: 1.45; color: #444;
}
.skin-twitter .tile a:hover img { opacity: .96; }

/* Light footer */
.skin-twitter .period-foot {
  text-align: center; padding: 16px; font-size: 12px; color: #5b7588;
}
.skin-twitter .period-foot a { color: #0084b4; }