/* =============================================================
   DSD ’98 — 1996–1999 web aesthetic, table-based.
   Apple.com 1997 × CHIP magazine × Romanian rap fanzine.
   ============================================================= */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: #0A0A0A; }
body {
  font-family: var(--font-ui);
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: #0A0A0A;
  -webkit-font-smoothing: none;
  text-rendering: geometricPrecision;
  min-height: 100vh;
}

/* The "page" — the actual document, max 980px (period-correct: 800×600 → 1024×768) */
.page {
  width: 980px;
  margin: 0 auto;
  background: var(--bg-paper);
  min-height: 100vh;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  position: relative;
}

/* Subtle dot scanline effect over the whole site. Period-correct CRT. */
.page::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg,
      rgba(0,0,0,0.02) 0px,
      rgba(0,0,0,0.02) 1px,
      transparent 1px,
      transparent 2px);
  z-index: 1000;
  mix-blend-mode: multiply;
}

/* =============================================================
   Browser frame (optional decorative)
   ============================================================= */
.browser-shell {
  background: var(--os-silver);
  box-shadow: var(--bevel-out);
  width: 980px;
  margin: 12px auto;
  padding: 2px;
  font-family: var(--font-system);
}
.browser-titlebar {
  background: linear-gradient(90deg, var(--os-titlebar) 0%, var(--os-titlebar-2) 100%);
  color: var(--os-titlebar-fg);
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: 3px 4px 3px 6px;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 20px;
}
.browser-titlebar img { height: 14px; image-rendering: pixelated; }
.browser-titlebar .grow { flex: 1; }
.tb-btn {
  width: 16px; height: 14px;
  background: var(--os-silver);
  box-shadow: var(--bevel-out);
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  font-family: 'Marlett', var(--font-system);
  color: #000;
  cursor: pointer;
}
.browser-menubar {
  background: var(--os-silver);
  font-size: var(--fs-xs);
  padding: 2px 4px;
  border-bottom: 1px solid var(--os-shadow);
  display: flex; gap: 8px;
}
.browser-menubar span { padding: 1px 6px; cursor: default; }
.browser-menubar span:hover { background: var(--os-titlebar); color: #fff; }
.browser-menubar .u { text-decoration: underline; text-underline-offset: 1px; }
.browser-toolbar {
  background: var(--os-silver);
  padding: 4px 6px;
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--os-shadow);
  align-items: center;
  font-size: var(--fs-xs);
}
.tool-btn {
  background: var(--os-silver);
  box-shadow: var(--bevel-out);
  padding: 3px 6px;
  font-family: var(--font-system);
  font-size: var(--fs-xs);
  display: inline-flex; align-items: center; gap: 3px;
  cursor: pointer;
  min-width: 44px;
  justify-content: center;
}
.tool-btn:active { box-shadow: var(--bevel-pressed); }
.tool-btn.disabled { color: #808080; text-shadow: 1px 1px 0 #fff; }
.address-bar {
  display: flex; align-items: center; gap: 4px; flex: 1;
  padding-left: 8px;
}
.address-bar .url {
  flex: 1;
  background: #fff;
  box-shadow: var(--bevel-in);
  padding: 2px 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: #000;
  display: flex; align-items: center; gap: 4px;
}
.address-bar .url::before {
  content: '';
  width: 12px; height: 12px;
  background: linear-gradient(135deg, #1084D0, #000080);
  flex-shrink: 0;
}

/* =============================================================
   Masthead — the italic serif "DirtySouthDistrict" wordmark,
   with rainbow-ish underline strip (cf. Apple 1997).
   ============================================================= */
.masthead {
  background: var(--dsd-paper);
  padding: 16px 20px 0;
  border-bottom: 2px solid #000;
  position: relative;
}
.masthead-row {
  display: flex; align-items: flex-end; gap: 16px;
  justify-content: space-between;
}
.wordmark {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 800;
  font-size: 56px;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--dsd-ink);
  margin: 0;
}
.wordmark .dot { color: var(--dsd-blood); }
.tagline {
  font-family: var(--font-zine);
  font-size: var(--fs-md);
  color: var(--dsd-mud);
  margin-top: 4px;
  letter-spacing: 0.04em;
}
.masthead-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-2);
  text-align: right;
  line-height: 1.6;
}
.masthead-meta b { color: var(--dsd-blood); }

/* The Apple-style rainbow strip — but DSD'd: blood/hazard/toxic/cd-magenta/cd-cyan/bruise */
.masthead-stripe {
  display: grid; grid-template-columns: repeat(6, 1fr);
  height: 6px;
  margin-top: 8px;
}
.masthead-stripe div:nth-child(1) { background: var(--dsd-blood); }
.masthead-stripe div:nth-child(2) { background: var(--dsd-clay); }
.masthead-stripe div:nth-child(3) { background: var(--dsd-hazard); }
.masthead-stripe div:nth-child(4) { background: var(--dsd-toxic); }
.masthead-stripe div:nth-child(5) { background: var(--dsd-cd-cyan); }
.masthead-stripe div:nth-child(6) { background: var(--dsd-cd-magenta); }

/* =============================================================
   Top nav — tab buttons with bevel.
   ============================================================= */
.topnav {
  background: var(--os-silver);
  padding: 6px 8px;
  display: flex; gap: 3px;
  border-bottom: 1px solid #000;
  align-items: center;
}
.tab {
  font-family: var(--font-system);
  font-size: var(--fs-sm);
  font-weight: 700;
  background: var(--os-silver);
  box-shadow: var(--bevel-out);
  padding: 5px 14px;
  cursor: pointer;
  text-transform: uppercase;
  color: #000;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  user-select: none;
}
.tab:hover { outline: 1px dotted #000; outline-offset: -4px; }
.tab.active {
  box-shadow: var(--bevel-pressed);
  background: var(--dsd-hazard);
}
.tab-spacer { flex: 1; }
.topnav .pill {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  background: #000;
  color: var(--dsd-hazard);
  padding: 2px 6px;
  letter-spacing: 0.05em;
}

/* =============================================================
   3-column body layout — table-based.
   ============================================================= */
.body-cols {
  display: grid;
  grid-template-columns: 180px 1fr 200px;
  gap: 0;
  background: var(--bg-paper);
  /* hard separators — like a 1998 frameset */
  border-collapse: collapse;
}
.body-cols > * { padding: 12px 12px 16px; }
.col-left  { border-right: 1px solid #000; background: var(--dsd-paper-2); }
.col-main  { background: var(--bg-paper); padding: 16px 16px 24px; min-width: 0; }
.col-right { border-left: 1px solid #000; background: var(--dsd-paper-2); }

/* =============================================================
   Sidebar widgets — "windows" inside the sidebar.
   ============================================================= */
.widget {
  background: var(--os-silver);
  box-shadow: var(--bevel-out);
  margin-bottom: 12px;
  font-family: var(--font-system);
}
.widget.flat {
  background: var(--dsd-paper);
  box-shadow: none;
  border: 1px solid #000;
}
.widget-title {
  background: linear-gradient(90deg, var(--os-titlebar) 0%, var(--os-titlebar-2) 100%);
  color: #fff;
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: 2px 6px;
  display: flex; align-items: center; justify-content: space-between;
  letter-spacing: 0.02em;
}
.widget-title.alt { background: linear-gradient(90deg, var(--dsd-blood) 0%, #6F1A12 100%); }
.widget-title.toxic { background: linear-gradient(90deg, #2A4A0A 0%, var(--dsd-toxic) 100%); }
.widget-title .x {
  width: 14px; height: 12px;
  background: var(--os-silver);
  box-shadow: var(--bevel-out);
  font-size: 8px;
  text-align: center;
  line-height: 10px;
  color: #000;
  font-family: var(--font-system);
  font-weight: 700;
}
.widget-body { padding: 8px; font-size: var(--fs-xs); line-height: 1.5; }
.widget-body.tight { padding: 6px 8px; }

/* List menu — used in left sidebar */
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li {
  padding: 3px 6px 3px 16px;
  font-family: var(--font-system);
  font-size: var(--fs-xs);
  position: relative;
  cursor: pointer;
  color: #000;
}
.menu-list li::before {
  content: '►';
  position: absolute; left: 4px; top: 3px;
  font-size: 8px; color: var(--dsd-blood);
}
.menu-list li:hover { background: var(--os-titlebar); color: #fff; }
.menu-list li:hover::before { color: var(--dsd-hazard); }
.menu-list li.active { background: var(--dsd-hazard); font-weight: 700; }
.menu-list li.active::before { color: var(--dsd-blood); }

/* Form fields */
.field {
  background: #fff;
  box-shadow: var(--bevel-in);
  padding: 2px 4px;
  font-family: var(--font-system);
  font-size: var(--fs-xs);
  border: 0;
  width: 100%;
  outline: 0;
}
select.field { padding: 1px; }

/* Buttons */
.btn {
  font-family: var(--font-system);
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--os-silver);
  box-shadow: var(--bevel-out);
  padding: 3px 10px;
  cursor: pointer;
  border: 0;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #000;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  min-height: 22px;
}
.btn:active { box-shadow: var(--bevel-pressed); padding: 4px 9px 2px 11px; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.btn.primary { background: var(--dsd-hazard); }
.btn.danger { background: var(--dsd-blood); color: #fff; }
.btn.full { width: 100%; }
.btn.disabled, .btn:disabled { color: #808080; text-shadow: 1px 1px 0 #fff; cursor: not-allowed; }

/* =============================================================
   Hero / featured banner — the "CyberDrive" pseudo-3D banner
   ============================================================= */
.hero-banner {
  background: var(--os-silver);
  box-shadow: var(--bevel-out);
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.hero-banner-tb {
  background: linear-gradient(90deg, var(--dsd-blood) 0%, #6F1A12 100%);
  color: #fff;
  font-family: var(--font-system);
  font-weight: 700;
  font-size: var(--fs-sm);
  padding: 2px 6px;
  display: flex; justify-content: space-between;
  letter-spacing: 0.04em;
}
.hero-banner-body {
  padding: 14px 16px;
  background:
    linear-gradient(180deg, #C8C8C8 0%, #909090 50%, #C8C8C8 100%);
  position: relative;
  min-height: 130px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
}
.hero-banner-body::before {
  /* glossy horizon line — pseudo-3D banner trick */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: rgba(255,255,255,0.7);
}
.hero-emboss-text {
  font-family: var(--font-poster);
  font-size: 40px;
  font-style: italic;
  line-height: 0.9;
  color: var(--dsd-ink);
  letter-spacing: -0.01em;
  text-shadow:
    1px 1px 0 rgba(255,255,255,0.6),
   -1px -1px 0 rgba(0,0,0,0.4);
}
.hero-emboss-text .red { color: var(--dsd-blood); }
.hero-emboss-text .small { font-size: 16px; font-style: normal; font-family: var(--font-system); display: block; margin-top: 6px; color: #000; text-shadow: 1px 1px 0 #fff; }
.hero-art {
  width: 150px; height: 150px;
  background: #000;
  border: 1px solid #000;
  box-shadow: 4px 4px 0 #000;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.hero-art img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hero-cd {
  width: 110px; height: 110px; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #fff 0 8px, transparent 8px 14px, #888 14px 18px,
      transparent 18px),
    conic-gradient(from 0deg,
      var(--dsd-cd-magenta) 0deg, var(--dsd-cd-cyan) 60deg,
      var(--dsd-hazard) 120deg, var(--dsd-toxic) 180deg,
      var(--dsd-cd-magenta) 240deg, var(--dsd-cd-cyan) 300deg, var(--dsd-cd-magenta) 360deg);
  box-shadow: 2px 2px 0 #000, inset 0 0 0 1px #000;
  flex-shrink: 0;
  position: relative;
}
.hero-cd::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: #C3C3C3;
  box-shadow: inset 0 0 0 1px #000, 0 0 0 1px #000;
}

/* =============================================================
   News / updates list (homepage center)
   ============================================================= */
.news-list { display: grid; gap: 10px; }
.news-item {
  background: var(--dsd-paper);
  border: 1px solid #000;
  padding: 8px 10px 10px;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 10px;
  position: relative;
}
.news-item .date {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--dsd-mud);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.news-item .kind {
  display: inline-block;
  font-family: var(--font-system);
  font-size: 9px;
  font-weight: 700;
  padding: 1px 4px;
  background: var(--dsd-ink);
  color: var(--dsd-hazard);
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.news-item h4 {
  margin: 0 0 4px;
  font-family: var(--font-system);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--dsd-ink);
  line-height: 1.2;
}
.news-item p {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--fg-2);
}

/* =============================================================
   Product grid
   ============================================================= */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.prod-card {
  background: var(--os-silver);
  box-shadow: var(--bevel-out);
  cursor: pointer;
  user-select: none;
}
.prod-card .pc-tb {
  background: linear-gradient(90deg, var(--os-titlebar) 0%, var(--os-titlebar-2) 100%);
  color: #fff;
  font-family: var(--font-system);
  font-weight: 700;
  font-size: 10px;
  padding: 2px 6px;
  display: flex; justify-content: space-between;
  letter-spacing: 0.02em;
}
.prod-card .pc-photo {
  height: 120px;
  background: var(--bg-paper);
  border-bottom: 1px solid #000;
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px #000;
  margin: 4px 4px 0;
}
.prod-card .pc-photo .swatch {
  position: absolute; inset: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-poster);
  font-size: 14px;
  letter-spacing: 0.05em;
}
.prod-card .pc-photo .swatch.dark { color: rgba(255,255,255,0.6); }
.prod-card .pc-photo .swatch.light { color: rgba(0,0,0,0.5); }
.prod-card .pc-photo .stamp {
  position: absolute; bottom: 6px; right: 6px;
  font-family: var(--font-mono);
  font-size: 9px;
  background: rgba(0,0,0,0.6); color: #fff;
  padding: 1px 4px;
  letter-spacing: 0.04em;
}
.prod-card .pc-photo .tag {
  position: absolute; top: 6px; left: 6px;
  font-family: var(--font-system);
  font-size: 9px;
  font-weight: 700;
  padding: 2px 4px;
  background: var(--dsd-blood); color: #fff;
  letter-spacing: 0.06em;
}
.prod-card .pc-photo .tag.epuizat { background: #000; color: #fff; }
.prod-card .pc-photo .tag.nou { background: var(--dsd-hazard); color: #000; }
.prod-card .pc-photo .tag.popular { background: var(--dsd-cd-magenta); color: #fff; }
.prod-card .pc-info {
  padding: 6px 8px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 8px;
  align-items: baseline;
  font-family: var(--font-system);
}
.prod-card .pc-info .nm {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: #000;
  letter-spacing: 0.02em;
}
.prod-card .pc-info .pr {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--dsd-blood);
  white-space: nowrap;
}
.prod-card .pc-info .meta {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--fg-2);
  letter-spacing: 0.04em;
}

/* =============================================================
   Section heading — italic serif h1 (Apple 97 masthead)
   ============================================================= */
.section-h1 {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  color: var(--dsd-ink);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.section-h1 .red { color: var(--dsd-blood); }
.section-sub {
  font-family: var(--font-zine);
  font-size: var(--fs-md);
  color: var(--fg-2);
  margin: 0 0 16px;
  border-bottom: 2px solid var(--dsd-ink);
  padding-bottom: 8px;
  letter-spacing: 0.03em;
}

.subhead {
  font-family: var(--font-system);
  font-size: var(--fs-md);
  font-weight: 700;
  text-transform: uppercase;
  margin: 16px 0 8px;
  padding: 3px 6px;
  background: var(--dsd-ink);
  color: var(--dsd-hazard);
  letter-spacing: 0.06em;
  display: flex; justify-content: space-between; align-items: center;
}
.subhead .more { font-family: var(--font-system); font-size: var(--fs-xs); color: var(--dsd-cd-cyan); cursor: pointer; }

/* =============================================================
   Status bar (footer)
   ============================================================= */
.statusbar {
  background: var(--os-silver);
  border-top: 1px solid #000;
  font-family: var(--font-system);
  font-size: var(--fs-xs);
  display: flex;
  align-items: stretch;
  height: 22px;
}
.sb-cell {
  box-shadow: var(--bevel-thin-in);
  padding: 2px 8px;
  display: flex; align-items: center; gap: 4px;
  border-right: 1px solid var(--os-shadow);
}
.sb-cell:last-child { border-right: 0; }
.sb-cell.grow { flex: 1; }
.sb-cell .dot { width: 8px; height: 8px; background: var(--sem-success); display: inline-block; }
.sb-cell .dot.warn { background: var(--dsd-hazard); }
.sb-cell .dot.err { background: var(--sem-error); }

/* =============================================================
   Footer (copyright zone)
   ============================================================= */
.foot {
  background: var(--dsd-ink);
  color: var(--dsd-paper);
  padding: 16px 20px;
  font-family: var(--font-system);
  font-size: var(--fs-xs);
  text-align: center;
}
.foot .row { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; }
.foot a { color: var(--dsd-hazard); }
.foot .made-with {
  margin-top: 12px;
  display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
}
.badge88 {
  display: inline-flex; align-items: center; justify-content: center;
  width: 88px; height: 31px;
  font-family: var(--font-system);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  text-align: center;
  line-height: 1.1;
  padding: 2px 4px;
  border: 1px solid #000;
  cursor: pointer;
  user-select: none;
  text-transform: uppercase;
}
.badge88.netscape { background: linear-gradient(180deg, #000 0%, #000080 100%); }
.badge88.ie       { background: linear-gradient(180deg, #1084D0 0%, #00007E 100%); }
.badge88.realaudio{ background: linear-gradient(180deg, #C8C8C8 0%, #707070 100%); color: #000; }
.badge88.html32   { background: var(--dsd-blood); }
.badge88.notepad  { background: #C3C3C3; color: #000; }
.badge88.geocities{ background: linear-gradient(180deg, #FFD75A 0%, #C7902B 100%); color: #000; }
.badge88.webring  { background: linear-gradient(135deg, var(--dsd-cd-magenta) 0%, var(--dsd-cd-cyan) 100%); }
.badge88.dsd      { background: var(--dsd-ink); border: 1px solid var(--dsd-hazard); color: var(--dsd-hazard); }
.badge88 b { display: block; font-size: 11px; }

/* =============================================================
   Dialog / modal
   ============================================================= */
.modal-scrim {
  position: fixed; inset: 0;
  background: repeating-conic-gradient(rgba(0,0,0,0.3) 0% 25%, transparent 0% 50%) 50% / 4px 4px;
  z-index: 500;
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--os-silver);
  box-shadow: var(--bevel-out);
  min-width: 380px;
  max-width: 520px;
  font-family: var(--font-system);
}
.modal .tb {
  background: linear-gradient(90deg, var(--os-titlebar) 0%, var(--os-titlebar-2) 100%);
  color: #fff; font-weight: 700; font-size: var(--fs-sm);
  padding: 3px 6px; display: flex; justify-content: space-between;
}
.modal .body { padding: 14px 16px; font-size: var(--fs-sm); }
.modal .actions { padding: 8px 12px 12px; display: flex; justify-content: flex-end; gap: 6px; }

/* =============================================================
   Marquee for "STOC LIMITAT" announcer bar
   ============================================================= */
.announcer {
  background: var(--dsd-hazard);
  color: var(--dsd-ink);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  border-bottom: 1px solid #000;
  border-top: 1px solid #000;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 18px;
  display: flex; align-items: center;
}
.announcer-track {
  display: inline-block;
  padding-left: 100%;
  animation: marq 28s linear infinite;
}
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.announcer span { padding: 0 24px; }
.announcer .sep { color: var(--dsd-blood); }

/* =============================================================
   Hit counter - 7-segment style
   ============================================================= */
.counter {
  display: inline-flex; gap: 1px;
  background: #000;
  padding: 2px;
  border: 1px solid #000;
}
.counter-digit {
  width: 14px; height: 22px;
  background: #1A0A0A;
  color: #FF3333;
  font-family: var(--font-crt);
  font-size: 22px;
  line-height: 22px;
  text-align: center;
  text-shadow: 0 0 4px rgba(255,0,0,0.6);
}

/* CD-ROM offer animation */
.cdrom-offer {
  background:
    repeating-linear-gradient(135deg, var(--dsd-hazard) 0 8px, var(--dsd-ink) 8px 16px);
  padding: 3px;
}
.cdrom-offer-inner {
  background: var(--dsd-paper);
  padding: 8px;
  text-align: center;
}
.cdrom-offer h5 {
  font-family: var(--font-poster);
  font-size: var(--fs-md);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
  color: var(--dsd-blood);
  line-height: 1;
}
.cdrom-offer p {
  font-family: var(--font-system);
  font-size: var(--fs-xs);
  color: var(--dsd-ink);
  margin: 4px 0 6px;
  line-height: 1.4;
}
.blink { animation: blink 1.1s steps(1, end) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* QuickTime / RealAudio panel */
.player {
  background: linear-gradient(180deg, #1A1A1A 0%, #0A0A0A 100%);
  color: #33FF33;
  font-family: var(--font-crt);
  font-size: var(--fs-md);
  padding: 6px 8px;
  border: 1px solid #000;
  box-shadow: var(--bevel-thin-in);
}
.player .row { display: flex; align-items: center; gap: 4px; }
.player .meter { flex: 1; height: 6px; background: #003300; position: relative; overflow: hidden; }
.player .meter::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 38%;
  background: repeating-linear-gradient(90deg, #33FF33 0 3px, #003300 3px 4px);
}
.player .lcd { font-family: var(--font-crt); color: #FF6633; }

/* utility */
.row { display: flex; gap: 6px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 4px; }
.divider { border-top: 1px solid var(--os-shadow); margin: 8px 0; }
.kbd {
  font-family: var(--font-system); font-size: 9px;
  background: var(--os-silver); box-shadow: var(--bevel-out);
  padding: 0 4px; min-width: 14px; display: inline-block; text-align: center;
}
.under-construction {
  background: repeating-linear-gradient(45deg, var(--dsd-hazard) 0 8px, #000 8px 16px);
  padding: 3px;
  text-align: center;
}
.under-construction div {
  background: var(--dsd-paper);
  padding: 4px;
  font-family: var(--font-system);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

/* mini logo / SJS inline mark */
.sjs-mark-inline {
  display: inline-block;
  font-family: var(--font-poster);
  background: var(--dsd-ink);
  color: var(--dsd-paper);
  padding: 2px 6px;
  letter-spacing: 0.05em;
}

/* Product detail page grid */
.prod-detail-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
}

/* =============================================================
   RESPONSIVE — tablet < 1000px, phone < 640px.
   The 1998 chrome is preserved; layout reflows to a single column.
   ============================================================= */

/* Tablet: drop the desktop "browser shell" framing, narrow the page. */
@media (max-width: 1000px) {
  .browser-shell { width: 100%; margin: 0; padding: 0; box-shadow: none; }
  .browser-titlebar, .menu-bar, .address-bar { display: none; }
  .page { width: 100%; border-left: 0; border-right: 0; }
  .body-cols { grid-template-columns: 200px 1fr; }
  .col-right { display: none; }
  .prod-grid { grid-template-columns: repeat(2, 1fr); }
  .wordmark { font-size: 44px; }
  .masthead { padding: 12px 14px 0; }
  .col-main { padding: 12px 12px 20px; }
  .topnav { flex-wrap: wrap; }
}

/* Phone: stack everything. Sidebar becomes a collapsed dropdown via summary/details. */
@media (max-width: 640px) {
  body { font-size: 12px; }
  .page::after { background-image: none; } /* drop scanlines on small screens — too noisy */

  /* Masthead */
  .masthead { padding: 10px 10px 0; }
  .masthead-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .wordmark { font-size: 34px; line-height: 0.9; }
  .tagline { font-size: 11px; }
  .masthead-meta { text-align: left; font-size: 10px; }
  .masthead-stripe { height: 5px; margin-top: 6px; }

  /* Top nav: horizontal scroll instead of wrap, so chrome stays a single row */
  .topnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 5px 6px;
    gap: 3px;
  }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav { scrollbar-width: none; }
  .tab { padding: 5px 9px; font-size: 11px; flex-shrink: 0; white-space: nowrap; }
  .tab-spacer { display: none; }
  .topnav .pill { display: none; }

  /* Body: stack columns. Hide left & right sidebars; main only. */
  .body-cols { grid-template-columns: 1fr; }
  .body-cols > * { padding: 10px; }
  .col-left { display: none; }
  .col-right { display: none; }
  .col-main { padding: 12px 10px 20px; }

  /* Hero — drop side artwork BELOW headline, smaller */
  .hero-banner-body {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 10px;
  }
  .hero-emboss-text { font-size: 38px !important; line-height: 0.95; }
  .hero-emboss-text .small { font-size: 13px !important; }
  .hero-art, .hero-cd { justify-self: center; }
  .hero-art { width: 180px; height: 180px; }

  /* Product grid — 2 across; cards keep their photo */
  .prod-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .pc-photo { height: 90px; }
  .pc-info { padding: 5px 6px 6px; }
  .pc-info .nm { font-size: 11px; }
  .pc-info .pr { font-size: 12px; }
  .pc-tb { font-size: 9px; }
  .stamp { font-size: 9px; }

  /* Product detail — stack photo above info */
  .prod-detail-grid { grid-template-columns: 1fr; gap: 12px; }

  /* Buttons — bigger hit targets on touch */
  .btn { min-height: 30px; padding: 6px 12px; font-size: 11px; }

  /* Status bar / footer — horizontal scroll, tighter */
  .statusbar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
  }
  .statusbar::-webkit-scrollbar { display: none; }
  .statusbar { scrollbar-width: none; }
  .sb-cell { white-space: nowrap; flex-shrink: 0; }

  /* Footer */
  .foot { font-size: 9px; padding: 8px 10px 16px; line-height: 1.6; }

  /* Banner / promo widgets — keep them bottom of main column on phone */
  .badge88 { width: 76px; height: 27px; font-size: 8px; }
  .counter-row { transform: scale(0.92); transform-origin: left center; }

  /* Tables (releases, tracks, cart) — allow horizontal scroll */
  .col-main table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }

  /* Tweaks panel — push to full-width drawer on phone */
  .tweaks-panel { right: 0 !important; left: 0 !important; bottom: 0 !important; width: 100% !important; max-width: 100% !important; }
}

/* Tiny phones: 1-up product grid */
@media (max-width: 380px) {
  .prod-grid { grid-template-columns: 1fr; }
  .pc-photo { height: 130px; }
  .wordmark { font-size: 28px; }
}