/* retro.css — authentic 1997 Netscape Navigator era. Web-safe palette,
   beveled panels, Times/Courier, marquee, hit counter, secure badge. */

.theme-retro body {
  background: #008080; /* the teal of a thousand Win95 desktops */
  background-image:
    linear-gradient(45deg, #007070 25%, transparent 25%, transparent 75%, #007070 75%),
    linear-gradient(45deg, #007070 25%, transparent 25%, transparent 75%, #007070 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  color: #000;
  font-family: "Times New Roman", Times, Georgia, serif;
  font-size: 17px;
}
.theme-retro #masthead, .theme-retro .panel, .theme-retro #colophon, .theme-retro .marquee-bar {
  max-width: 860px; margin: 12px auto; padding: 14px 18px;
  background: #c0c0c0;
  border: 3px ridge #dfdfdf;
}
.theme-retro .band { background: #d8d8c0; }

/* toggle button — beveled gray */
.theme-retro #toggle-era {
  font-family: "MS Sans Serif", Tahoma, Geneva, sans-serif; font-size: 13px;
  background: #c0c0c0; color: #000;
  border: 2px outset #fff; padding: 5px 10px;
}
.theme-retro #toggle-era:active { border-style: inset; }

/* marquee */
.theme-retro .marquee-bar {
  background: #000080; color: #ff0; border: 2px inset #444;
  font-family: "Courier New", monospace; font-weight: bold; padding: 5px 0;
}

/* header */
.theme-retro #masthead { text-align: center; }
.theme-retro .brand { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.theme-retro .logo-img { border: 2px outset #fff; background:#fff; }
.theme-retro h1 { font-size: 46px; color: #000080; text-shadow: 2px 2px 0 #808080; letter-spacing: 1px; }
.theme-retro .tm { font-size: 16px; vertical-align: super; }
.theme-retro .tagline { font-style: italic; color: #800000; font-size: 18px; margin: 0; }
.theme-retro .secure-badge {
  display: inline-flex; align-items: center; gap: 6px; margin-left: 10px;
  background: #e8e8e8; border: 2px groove #aaa; padding: 4px 8px; font-family: monospace; font-size: 11px; text-align:left;
}
.theme-retro .secure-badge .lock { font-size: 22px; }
.theme-retro .secure-badge b { color: #006000; }

/* nav — beveled button row */
.theme-retro #mainnav { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.theme-retro #mainnav a {
  background: #c0c0c0; border: 2px outset #fff; padding: 4px 10px;
  color: #000080; font-family: "MS Sans Serif", Tahoma, sans-serif; font-size: 13px;
}
.theme-retro #mainnav a:hover { background: #d4d4d4; }
.theme-retro #mainnav a:active { border-style: inset; }
.theme-retro #mainnav a.cta { background: #000080; color: #fff; border-color: #4040a0; }

/* links + headings */
.theme-retro a { color: #0000ee; text-decoration: underline; }
.theme-retro a:visited { color: #551a8b; }
.theme-retro .sect-h { font-size: 28px; color: #000080; border-bottom: 2px groove #888; padding-bottom: 4px; }
.theme-retro .sect-h em, .theme-retro .hero-h em, .theme-retro .lede b { color: #800000; }
.theme-retro .lede { font-size: 18px; }

/* hero */
.theme-retro #hero { padding-top: 6px; }
.theme-retro .hero-video { position: relative; border: 3px inset #808080; }
.theme-retro .hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,32,.72)); }
.theme-retro .hero-copy { position: absolute; left: 16px; right: 16px; bottom: 12px; color: #fff; text-shadow: 1px 1px 3px #000; }
.theme-retro .hero-h { font-size: 30px; color: #fff; }
.theme-retro .hero-sub { font-size: 16px; }
.theme-retro .hero-caption { font-family: monospace; font-size: 11px; color: #004000; text-align: center; margin-top: 6px; }

/* buttons */
.theme-retro .btn { display: inline-block; font-family: "MS Sans Serif", Tahoma, sans-serif; font-size: 14px; padding: 7px 14px; margin: 4px; border: 2px outset #fff; background: #c0c0c0; color: #000; text-decoration: none; }
.theme-retro .btn:active { border-style: inset; }
.theme-retro .btn-primary { background: #000080; color: #fff; border-color: #6060c0; font-weight: bold; }
.theme-retro .btn.big { font-size: 16px; padding: 10px 18px; }

/* cards / lists */
.theme-retro .card { background: #fff; border: 2px inset #808080; padding: 12px; }
.theme-retro .card-ico { font-size: 34px; }
.theme-retro .card h4 { color: #000080; }
.theme-retro ul.tick { list-style: "\2611  "; }

/* forge flow */
.theme-retro .forge-step { background:#fff; border:2px outset #fff; padding:10px 12px; text-align:center; max-width:180px; }
.theme-retro .forge-step .num { display:inline-block; width:26px; height:26px; line-height:26px; background:#000080; color:#fff; border-radius:50%; font-weight:bold; }
.theme-retro .forge-arrow { font-size: 26px; color:#000080; }

/* terminal */
.theme-retro .terminal { max-width: 760px; margin: 0 auto; border: 2px inset #808080; background: #000; }
.theme-retro .term-bar { background: #000080; color:#fff; font-family: monospace; font-size: 12px; padding: 3px 8px; }
.theme-retro .term-body { color: #33ff33; font-family: "Courier New", monospace; padding: 12px; margin: 0; white-space: pre-wrap; font-size: 13px; }
.theme-retro .term-body .p { color:#00ffff; } .theme-retro .term-body .a { color:#ffff00; }

/* film + jukebox */
.theme-retro .film video { border: 3px inset #808080; margin: 0 auto; max-width: 760px; }
.theme-retro .jukebox { max-width: 620px; margin: 18px auto 0; background:#000; color:#0f0; border:3px ridge #c0c0c0; padding: 12px; font-family: monospace; }
.theme-retro .jb-head { color:#ff0; text-align:center; margin-bottom:8px; }
.theme-retro .jb-btn { background:#c0c0c0; color:#000; border:2px outset #fff; font-family:inherit; padding:5px 9px; margin:3px; cursor:pointer; }
.theme-retro .jb-btn:active { border-style: inset; }
.theme-retro .jb-now { margin-top:8px; color:#0ff; }

/* download / faq */
.theme-retro .dl-row { margin: 14px 0; }
.theme-retro .faq { max-width: 760px; margin: 0 auto; }
.theme-retro .faq dt { font-weight: bold; color:#000080; margin-top: 12px; }
.theme-retro .small { font-size: 13px; } .theme-retro .dim { color:#404040; }

/* footer */
.theme-retro #colophon { text-align: center; font-size: 14px; }
.theme-retro .webring { font-family: monospace; font-size: 12px; margin-bottom: 8px; }
.theme-retro .counter { font-family: monospace; margin: 8px 0; }
.theme-retro .counter .digits i { background:#000; color:#0f0; font-style:normal; padding:2px 5px; margin:0 1px; border:1px solid #060; font-family: "Courier New", monospace; }
.theme-retro .credit { font-size: 12px; color:#202020; }
.theme-retro .fine { font-size: 11px; color:#404040; font-family: monospace; }

@media (max-width: 640px){ .theme-retro h1 { font-size: 34px; } .theme-retro .two-col { gap:16px; } }