/* ============================================================
   Skin: "web2" — late-2000s Web 2.0 (c.2008). Glossy gradients with a
   highlight sweep, reflective letterpress logo, big rounded pill buttons,
   a beta badge. The era Craig was actually designing in.
   ============================================================ */
.skin-web2 { background: #d7e6f5; background-image: linear-gradient(#c2d9ef, #eef5fc); }
.skin-web2 .viewport { background: #f3f8fd; }
.skin-web2 .site { max-width: 900px; margin: 0 auto; }

/* Glossy masthead with a highlight sweep */
.skin-web2 .masthead {
  position: relative; text-align: center; padding: 40px 20px 30px; overflow: hidden;
  background: linear-gradient(#69aef0, #2f6fb0 55%, #235d97);
  border-bottom: 4px solid #1d4f84; border-radius: 10px 10px 0 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.skin-web2 .masthead::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(rgba(255,255,255,.45), rgba(255,255,255,0)); pointer-events: none; }
.skin-web2 .brand {
  position: relative; margin: 0; font: bold 50px/1 "Lucida Grande", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -1px; color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.3), 0 -1px 0 rgba(0,0,0,.2);
}
.skin-web2 .tag { position: relative; margin: 10px 0 0; color: #eaf4ff; font-size: 18px; font-style: italic; text-shadow: 0 1px 2px rgba(0,0,0,.35); }
.skin-web2 .beta {
  position: absolute; top: 16px; right: -4px; transform: rotate(8deg);
  background: linear-gradient(#ffb14d, #f07e0f); color: #fff; font: bold 13px/1 Arial;
  padding: 5px 14px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.5);
  text-transform: uppercase; letter-spacing: 1px;
}

/* Content */
.skin-web2 .content { background: #fff; padding: 32px 42px 38px; }
.skin-web2 .content p { font-size: 16.5px; line-height: 1.7; color: #333; margin: 0 0 1.05em; }
.skin-web2 .content h2 { font: bold 25px "Helvetica Neue", Arial; color: #2f6fb0; margin: 1.4em 0 .5em; text-shadow: 0 1px 0 #fff; }
.skin-web2 .content h3 { font: bold 19px "Helvetica Neue", Arial; color: #3a3f44; margin: 1.3em 0 .4em; }
.skin-web2 .content a { color: #1f6fb2; }
.skin-web2 .content blockquote { border-left: 4px solid #bcd2e6; margin: 1.2em 0; padding: 2px 0 2px 16px; color: #555; font-style: italic; }
.skin-web2 .period-links { font-size: 15px; margin: 0 0 22px; }
.skin-web2 .period-links a {
  display: inline-block; color: #fff; text-decoration: none; font-weight: bold; margin: 0 8px 8px 0;
  background: linear-gradient(#7dc04a, #4e9a2f); border: 1px solid #3d7a24; border-radius: 18px;
  padding: 8px 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(0,0,0,.25);
}
.skin-web2 .period-links a:hover { background: linear-gradient(#8acc55, #59ab37); }

/* Inline images */
.skin-web2 .inline { margin: 18px 0; max-width: 100%; }
.skin-web2 .inline img { max-width: 100%; height: auto; display: block; padding: 6px; background: #fff; border: 1px solid #cfd9e3; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.skin-web2 .inline figcaption { font-size: 14px; color: #7a7a7a; margin-top: 6px; }
.skin-web2 .inline.video video { width: 100%; height: auto; display: block; border-radius: 6px; border: 1px solid #cfd9e3; background: #000; }

/* Glossy reflective thumbnail grid */
.skin-web2 .period-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 24px; }
.skin-web2 .tile { margin: 0; }
.skin-web2 .tile img { width: 100%; height: auto; display: block; padding: 5px; background: #fff; border: 1px solid #cfd9e3; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.18); transition: transform .12s ease, box-shadow .12s ease; }
.skin-web2 .tile a:hover img { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.3); }
.skin-web2 .tile figcaption { font-size: 13px; color: #888; margin-top: 5px; }

/* Footer with badges */
.skin-web2 .period-foot { background: linear-gradient(#eef5fc, #d3e3f1); border-top: 1px solid #b9cee2; padding: 18px 42px; font-size: 13px; color: #5a7186; text-align: center; }
.skin-web2 .badges { display: inline-flex; gap: 6px; margin-right: 10px; vertical-align: middle; }
.skin-web2 .badges b { background: #36537a; color: #fff; font: bold 10px/1.4 Arial; padding: 3px 6px; border-radius: 3px; letter-spacing: .5px; }
.skin-web2 .badges .rss { background: #f60; }