/* alexlew.live — deep 1996 apple.com / Mac OS Platinum homage
   Stronger bevels, richer chrome, period UI flourishes. */

html, body {
  margin: 0;
  padding: 0;
  background: #8e8e8e;
  /* denser desktop dither */
  background-image:
    linear-gradient(45deg, #868686 25%, transparent 25%),
    linear-gradient(-45deg, #868686 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #868686 75%),
    linear-gradient(-45deg, transparent 75%, #868686 75%);
  background-size: 3px 3px;
  background-position: 0 0, 0 1.5px, 1.5px -1.5px, -1.5px 0;
  color: #000;
  font-family: Geneva, "Charcoal", "Chicago", "Lucida Grande", Helvetica, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.35;
}

a { color: #0000CC; }
a:visited { color: #551A8B; }
a:active { color: #FF0000; }
a:hover { color: #0000FF; }

.desktop { margin: 20px auto 8px; }

/* ===== Mac window chrome (deep outer frame) ===== */
.mac-window {
  background: #dddddd;
  border-top: 3px solid #ffffff;
  border-left: 3px solid #ffffff;
  border-right: 3px solid #555555;
  border-bottom: 3px solid #555555;
  box-shadow:
    1px 1px 0 #333333,
    2px 2px 0 #222222,
    4px 4px 0 rgba(0,0,0,0.28),
    6px 6px 0 rgba(0,0,0,0.12);
}

/* Title bar — classic Platinum stripes */
.titlebar {
  background: repeating-linear-gradient(
    to bottom,
    #e8e8e8 0px, #e8e8e8 1px,
    #c8c8c8 1px, #c8c8c8 2px
  );
  border-bottom: 1px solid #666666;
  height: 22px;
  padding: 2px 4px;
}

.traffic .box-close,
.zoom .box-zoom {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #cccccc;
  border-top: 1px solid #ffffff;
  border-left: 1px solid #ffffff;
  border-right: 1px solid #555555;
  border-bottom: 1px solid #555555;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.5);
}
.zoom .box-zoom {
  margin-right: 2px;
  background:
    linear-gradient(#ccc, #ccc) center/6px 1px no-repeat,
    linear-gradient(#ccc, #ccc) center/1px 6px no-repeat,
    #bbbbbb;
  background-color: #cccccc;
  position: relative;
}
.zoom .box-zoom::after {
  content: "";
  display: block;
  position: absolute;
  top: 2px; left: 2px; right: 2px; bottom: 2px;
  border: 1px solid #555;
  border-top-color: #fff;
  border-left-color: #fff;
}

.title-text {
  font-family: Chicago, Charcoal, Geneva, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.2px;
  color: #000;
  text-shadow: 1px 1px 0 #ffffff;
}

/* Fake Apple menu bar */
.menubar {
  background: #dddddd;
  border-bottom: 1px solid #888888;
  border-top: 1px solid #ffffff;
  padding: 1px 6px 2px;
  font-family: Chicago, Charcoal, Geneva, sans-serif;
  font-size: 11px;
  line-height: 16px;
  white-space: nowrap;
}
.menu-apple {
  font-size: 13px;
  margin-right: 8px;
  color: #222;
}
.menu-item {
  margin-right: 10px;
  color: #000;
}

/* Six-color rainbow stripe under menu */
.rainbow {
  height: 8px;
  font-size: 0;
  line-height: 0;
  padding: 0;
  border-bottom: 1px solid #444;
}
.rainbow span {
  display: inline-block;
  width: 16.666%;
  height: 8px;
}
.r1 { background: #00A651; }
.r2 { background: #FCE300; }
.r3 { background: #F8971D; }
.r4 { background: #E31C23; }
.r5 { background: #862883; }
.r6 { background: #0095D5; }

/* ===== Columns ===== */
.sidebar {
  background: #c0c0c0;
  border-right: 2px solid #888888;
  border-top: 1px solid #ffffff;
}
.main {
  background: #d4d4d4;
  border-left: 1px solid #ffffff;
  border-right: 2px solid #888888;
}
.rail {
  background: #c0c0c0;
  border-left: 1px solid #ffffff;
}

/* Raised / inset panels — stronger 3D bevel */
.panel.raised {
  background: #dddddd;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
  border-right: 2px solid #555555;
  border-bottom: 2px solid #555555;
  box-shadow: 1px 1px 0 rgba(0,0,0,0.15);
}
.panel.inset {
  background: #b8b8b8;
  border-top: 2px solid #555555;
  border-left: 2px solid #555555;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
}

/* Logo well */
.logo-well {
  background: #eeeeee;
  border-top: 2px solid #555555;
  border-left: 2px solid #555555;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  padding: 8px 4px !important;
  box-shadow: inset 1px 1px 2px rgba(0,0,0,0.12);
}
.logo-caption {
  font-family: Chicago, Charcoal, Geneva, sans-serif;
  font-size: 11px;
  font-weight: bold;
  margin-top: 4px;
}
.logo-sub {
  font-size: 9px;
  color: #444;
  letter-spacing: 0.5px;
  margin-top: 1px;
}
.six-apple {
  display: block;
  margin: 0 auto;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.25));
}

/* Nav orbs (1996 blue spheres) */
.nav-label {
  font-size: 10px;
  font-weight: bold;
  color: #333;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid #888;
  padding-bottom: 2px !important;
}
.nav-item {
  font-size: 12px;
  padding: 3px 2px !important;
  white-space: nowrap;
}
.orb, .cap-orb {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-right: 5px;
  vertical-align: -1px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 28%, #c8e6ff 0%, #4da6ff 35%, #0066cc 65%, #002266 100%);
  border: 1px solid #003399;
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.7),
    0 1px 1px rgba(0,0,0,0.35);
}
.cap-orb {
  width: 9px;
  height: 9px;
  margin-right: 4px;
  vertical-align: 0;
}

/* Search well */
.search-well {
  background: #a8a8a8;
  border-top: 2px solid #555;
  border-left: 2px solid #555;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}
.search-label { font-size: 10px; font-weight: bold; margin-bottom: 2px; }
.search-field {
  width: 88px;
  font-size: 11px;
  font-family: Geneva, monospace;
  background: #ffffff;
  border-top: 2px solid #555;
  border-left: 2px solid #555;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  padding: 1px 2px;
}
.btn-go {
  font-size: 10px;
  font-family: Chicago, Geneva, sans-serif;
  background: #cccccc;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #555;
  border-bottom: 2px solid #555;
  padding: 0 6px;
  cursor: pointer;
}
.btn-go:active {
  border-top: 2px solid #555;
  border-left: 2px solid #555;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

/* Hot tip + starburst */
.hot-tip {
  background: #ffff66;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #996600;
  border-bottom: 2px solid #996600;
  font-size: 11px;
  position: relative;
  box-shadow: 1px 1px 0 #666;
}
.starburst {
  float: right;
  color: #cc0000;
  font-size: 20px;
  line-height: 1;
  text-shadow: 1px 1px 0 #ffcc00, -1px 0 0 #990000;
}

/* Now reading (Substack callout) */
.now-playing {
  background: #e8f0ff;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #336699;
  border-bottom: 2px solid #336699;
  font-size: 11px;
  padding: 4px !important;
}
.now-label {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 0.8px;
  color: #003366;
  margin-bottom: 2px;
}

/* Hero */
.hello {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif;
  font-size: 48px;
  font-weight: normal;
  font-style: italic;
  letter-spacing: -1px;
  color: #000;
  line-height: 1;
  margin: 0 0 6px 0;
  text-shadow: 1px 1px 0 #ffffff;
}
.lede {
  margin: 0;
  font-size: 12px;
}
.lede2 {
  margin-top: 8px;
  color: #222;
}

/* NEW burst */
.burst, .burst-sm {
  display: inline-block;
  background: #ffcc00;
  color: #cc0000;
  font-weight: bold;
  font-family: Chicago, Geneva, sans-serif;
  border: 2px solid #cc0000;
  text-align: center;
  transform: rotate(-8deg);
  box-shadow: 2px 2px 0 #555;
}
.burst {
  width: 48px;
  height: 48px;
  line-height: 48px;
  font-size: 14px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #ffe066, #ffcc00 60%, #e6a800);
}
.burst-sm {
  padding: 2px 8px;
  font-size: 11px;
  margin-bottom: 4px;
  border-radius: 4px;
}

.news-banner { background: #e0e0e0; }

/* Capability cards */
.cap { margin-bottom: 3px; }
.cap-h {
  font-family: Chicago, Charcoal, Geneva, sans-serif;
  font-size: 11px;
  font-weight: bold;
  background: linear-gradient(to bottom, #000099 0%, #000066 100%);
  color: #ffffff;
  padding: 4px 6px !important;
  border-bottom: 1px solid #000033;
  text-shadow: 1px 1px 0 #000033;
}
.cap-b {
  font-size: 11px;
  background: #eeeeee;
  padding: 6px !important;
  border-top: 1px solid #ffffff;
}

/* Writing panel */
.writing-h {
  font-family: Chicago, Charcoal, Geneva, sans-serif;
  font-size: 11px;
  font-weight: bold;
  background: linear-gradient(to bottom, #663399 0%, #442266 100%);
  color: #fff;
  padding: 4px 6px !important;
  text-shadow: 1px 1px 0 #220044;
}
.writing-b {
  font-size: 11px;
  background: #f4f0fa;
  padding: 6px !important;
}
.btn-link {
  display: inline-block;
  margin-top: 2px;
  padding: 2px 8px;
  background: #cccccc;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #555;
  border-bottom: 2px solid #555;
  color: #0000CC !important;
  text-decoration: none;
  font-weight: bold;
  font-size: 11px;
}
.btn-link:active {
  border-top: 2px solid #555;
  border-left: 2px solid #555;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
}

.section-label {
  font-size: 10px;
  font-weight: bold;
  color: #660000;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.tiny { margin: 0; font-size: 11px; }

/* Right rail */
.rail-h {
  font-size: 11px;
  font-weight: bold;
  background: linear-gradient(to bottom, #7777aa 0%, #555588 100%);
  color: #fff;
  padding: 2px 4px !important;
  text-shadow: 1px 1px 0 #333355;
}
.rail-b {
  background: #eeeeee;
  font-size: 11px;
}

/* Netscape + Mac badges */
.badge-box { padding-top: 4px !important; }
.netscape-badge {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3399ff, #0066cc 60%, #003399);
  color: #fff;
  font-weight: bold;
  font-size: 18px;
  font-family: Georgia, serif;
  border: 3px solid #ffcc00;
  margin-bottom: 2px;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,0.3), 1px 1px 0 #333;
}
.mac-badge {
  display: inline-block;
  width: 40px;
  height: 22px;
  line-height: 22px;
  background: linear-gradient(to bottom, #e8e8e8, #b0b0b0);
  color: #000;
  font-weight: bold;
  font-size: 11px;
  font-family: Chicago, Geneva, sans-serif;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #555;
  border-bottom: 2px solid #555;
  margin-bottom: 2px;
  box-shadow: 1px 1px 0 #333;
}

/* Status bar + resize grip */
.statusbar {
  background: #c8c8c8;
  border-top: 1px solid #888;
  border-bottom: 1px solid #fff;
  padding: 1px 4px;
}
.status-text { color: #333; }
.resize-grip {
  display: inline-block;
  width: 14px;
  height: 14px;
  background:
    linear-gradient(135deg,
      transparent 40%, #888 40%, #888 45%, transparent 45%,
      transparent 55%, #888 55%, #888 60%, transparent 60%,
      transparent 70%, #888 70%, #888 75%, transparent 75%);
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
}

.footer {
  background: #b0b0b0;
  border-top: 2px solid #ffffff;
  text-align: center;
  padding: 4px !important;
  font-size: 10px;
}

.under-desk { margin: 12px 0 28px; }

/* Keep the 640-ish feel even on modern screens */
@media (max-width: 680px) {
  .desktop, .mac-window { width: 100% !important; }
  .hello { font-size: 36px; }
}

/* ===== Multi-page nav + topic pages (1996) ===== */
.nav-item.nav-current {
  background: #a8a8a8;
  border-top: 1px solid #555;
  border-left: 1px solid #555;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  font-weight: bold;
}
.nav-item.nav-current b {
  color: #000;
}

.page-kicker {
  font-size: 9px;
  font-weight: bold;
  letter-spacing: 1.5px;
  color: #003366;
  margin-bottom: 2px;
}
.page-title {
  font-family: Chicago, Charcoal, Geneva, Helvetica, sans-serif;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 8px 0;
  text-shadow: 1px 1px 0 #ffffff;
}

.topic-list {
  margin: 4px 0 4px 16px;
  padding: 0;
  font-size: 11px;
}
.topic-list li {
  margin-bottom: 6px;
}

.see-also {
  background: #c8d0d8;
}

/* Deeper copy flourishes (still 1996) */
.quote-well {
  background: #c8d0d8;
}
.quote {
  margin: 4px 0 6px 0;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 13px;
  font-style: italic;
  line-height: 1.4;
  color: #220000;
  border-left: 3px solid #555588;
  padding-left: 8px;
}