/* The "window" frame: the dialog-like container, titlebar, hero band,
   marquee, section headers, footer. The retro skeleton both pages share. */

.win{
  max-width:920px;margin:0 auto;
  background:var(--panel);
  border:3px solid var(--ink);
  box-shadow:8px 8px 0 rgba(0,0,0,.4);
}

.titlebar{
  background:var(--titlebar-grad);
  color:#fff;padding:8px 12px;
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:3px solid var(--ink);
}
.titlebar .pix{font-size:11px;display:inline-flex;align-items:center}
.titlebar .btns span{
  display:inline-block;width:16px;height:16px;
  background:var(--panel);border:2px solid var(--ink);margin-left:4px;
}
/* Back-link in Ping's titlebar */
.titlebar a{
  color:#fff;text-decoration:none;font-family:"Press Start 2P";font-size:8px;
  border:2px solid #fff;padding:5px 7px;
}
.titlebar a:hover{background:#fff;color:var(--ink)}

/* `.crumb-title` overrides the boxed `.titlebar a` style so the linked
   "microslop" reads as a normal title-bar word — same Press Start 2P
   at 11px, same white, just clickable. Inheriting color + font keeps
   the breadcrumb visually flush with the page name beside it; the only
   affordance is the yellow hover. */
.titlebar .crumb-title{display:inline-flex;align-items:center;gap:6px}
.titlebar .crumb-title a{
  /* Cancel the boxed-button defaults from `.titlebar a` above. */
  display:inline-flex;align-items:center;border:none;padding:0;background:transparent;
  /* Pick up font-family ("Press Start 2P"), size (11px), and color
     (#fff) from the parent `.pix` so the link is indistinguishable
     from surrounding title text. */
  color:inherit;font:inherit;text-decoration:none;
  transition:color .12s;
}
.titlebar .crumb-title a:hover{
  background:transparent;color:var(--yellow);
}
/* Separator reads as light punctuation, not a letter, so the eye groups
   the two halves of the breadcrumb correctly. */
.titlebar .crumb-title .sep{opacity:.5}
/* Title-bar logo — sits at the far-left of the bar, before the
   wordmark, the way an OS window shows its app icon. */
.titlebar .logoico{height:22px;width:22px;display:inline-block;vertical-align:middle;margin-right:8px}


.hero{
  text-align:center;padding:30px 18px 26px;
  background:repeating-linear-gradient(45deg,#fdf6e3 0 12px,#f3ead0 12px 24px);
}
.hero .pix.h{font-size:clamp(15px,4vw,26px);line-height:1.6;color:var(--ink)}
body.ping .hero .pix.h{font-size:clamp(14px,3.7vw,24px)}
.hero .pix.h .a{color:var(--hot)}
.hero .pix.h .b{color:var(--cyan)}

/* Microslop-only hero stamp */
.badge{
  display:inline-block;
  background:var(--purple);color:#fff;
  font-family:"Press Start 2P";font-size:9px;
  padding:7px 10px;
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  transform:rotate(-2deg);margin-bottom:20px;
}
/* Ping-only breadcrumb above headline */
.crumb{font-family:"Press Start 2P";font-size:8px;color:#6b6390;margin-bottom:16px}
.crumb a{color:var(--hot);text-decoration:none}

.sub{margin:16px auto 0;max-width:54ch}
body.ping .sub{max-width:56ch}

marquee{
  background:var(--ink);color:var(--yellow);
  padding:6px 0;
  border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);
  font-size:18px;
}

.secthead{font-family:"Press Start 2P";font-size:11px;padding:20px 22px 4px;color:var(--purple)}
body.ping .secthead{padding:22px 22px 4px}

.foot{background:var(--ink);color:#cbb6ff;text-align:center;padding:14px;font-size:16px}
.foot a{color:var(--yellow)}