/* ============================================================
   1995 — GeoCities. Tables, bevels, Times New Roman, a tiled
   starfield, and absolutely no restraint.
   ============================================================ */

[data-era="1995"] {
  --ink: #000000;
  --link: #0000ee;
  --visited: #551a8b;
  --paper: #c0c0c0;
  --tm-accent: #00ff00;
}

[data-era="1995"] body {
  font-family: "Times New Roman", Times, serif;
  font-size: 16px;
  line-height: 1.35;
  color: var(--ink);
  background-color: #000033;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Crect width='64' height='64' fill='%23000033'/%3E%3Ccircle cx='9' cy='12' r='1' fill='%23ffffff'/%3E%3Ccircle cx='44' cy='7' r='1.3' fill='%23ffff99'/%3E%3Ccircle cx='27' cy='34' r='1' fill='%23ffffff'/%3E%3Ccircle cx='56' cy='45' r='1' fill='%23aaccff'/%3E%3Ccircle cx='16' cy='53' r='1.4' fill='%23ffffff'/%3E%3Ccircle cx='38' cy='58' r='1' fill='%23ffff99'/%3E%3C/svg%3E");
}

[data-era="1995"] .site {
  width: 640px;
  max-width: calc(100% - 16px);
  margin: 12px auto;
  background: #ffffff;
  border: 3px ridge #c0c0c0;
  padding: 0;
}

[data-era="1995"] .wrap { padding: 10px 14px; }

[data-era="1995"] a { color: var(--link); text-decoration: underline; }
[data-era="1995"] a:visited { color: var(--visited); }
[data-era="1995"] a:hover { color: #ff0000; }

/* ---- header + nav bar ---- */
[data-era="1995"] .head {
  background: var(--paper);
  border-bottom: 2px solid #808080;
}
[data-era="1995"] .head-in { text-align: center; }
[data-era="1995"] .brand { text-decoration: none; display: block; margin-bottom: 6px; }
[data-era="1995"] .brand-mark {
  display: inline-block;
  background: #000080;
  color: #ffff00;
  font-family: "Courier New", monospace;
  font-weight: bold;
  padding: 2px 8px;
  border: 2px outset #c0c0c0;
  margin-right: 6px;
}
[data-era="1995"] .brand-name {
  font-family: "Comic Sans MS", "Times New Roman", serif;
  font-size: 26px;
  font-weight: bold;
  color: #000080;
}
[data-era="1995"] .nav {
  font-family: "Courier New", monospace;
  font-size: 13px;
}
[data-era="1995"] .nav::before { content: "[ "; }
[data-era="1995"] .nav::after  { content: " ]"; }
[data-era="1995"] .nav a + a::before { content: " | "; color: #000; text-decoration: none; }

/* ---- hero ---- */
[data-era="1995"] .hero {
  text-align: center;
  background: #ffffcc;
  border-bottom: 2px groove #c0c0c0;
}
[data-era="1995"] .eyebrow {
  font-family: "Courier New", monospace;
  font-weight: bold;
  color: #ff0000;
  font-size: 13px;
}
[data-era="1995"] .hero-title {
  font-family: "Comic Sans MS", "Times New Roman", serif;
  font-size: 30px;
  line-height: 1.15;
  color: #ff00ff;
  margin: 8px 0;
  text-shadow: 2px 2px 0 #ffff00;
}
[data-era="1995"] .hero-sub { font-size: 15px; margin-bottom: 12px; }

[data-era="1995"] .cta { margin-top: 10px; }
[data-era="1995"] .btn {
  display: inline-block;
  font-family: "Courier New", monospace;
  font-size: 13px;
  font-weight: bold;
  color: #000080;
  text-decoration: none;
  background: var(--paper);
  border: 3px outset #dfdfdf;
  padding: 4px 10px;
  margin: 3px;
}
[data-era="1995"] .btn:active { border-style: inset; }
[data-era="1995"] .btn:visited { color: #000080; }

/* ---- sections ---- */
[data-era="1995"] .sec { border-top: 2px groove #c0c0c0; }
[data-era="1995"] .sec.alt { background: #f0f0ff; }
[data-era="1995"] .sec-title {
  font-family: "Comic Sans MS", "Times New Roman", serif;
  font-size: 22px;
  color: #008000;
  text-align: center;
  margin-bottom: 8px;
  text-decoration: underline;
}
[data-era="1995"] .sec p { margin-bottom: 10px; }

/* two "columns" the only way we knew how */
[data-era="1995"] .cols { display: table; width: 100%; }
[data-era="1995"] .col-main { display: table-cell; vertical-align: top; padding-right: 12px; }
[data-era="1995"] .col-side {
  display: table-cell;
  vertical-align: top;
  width: 190px;
  background: #ffffcc;
  border: 2px inset #c0c0c0;
  padding: 8px;
  font-size: 13px;
}
[data-era="1995"] .col-side h3 {
  font-family: "Comic Sans MS", serif;
  color: #cc0000;
  font-size: 15px;
  margin-bottom: 6px;
}
[data-era="1995"] .facts div { margin-bottom: 4px; }
[data-era="1995"] .facts dt { display: inline; font-weight: bold; }
[data-era="1995"] .facts dt::after { content: ": "; }
[data-era="1995"] .facts dd { display: inline; margin: 0; }

/* cards → a table of cells */
[data-era="1995"] .grid { display: table; width: 100%; border-collapse: separate; border-spacing: 6px; }
[data-era="1995"] .card {
  display: table-cell;
  width: 33.33%;
  vertical-align: top;
  background: #ffffff;
  border: 2px outset #c0c0c0;
  padding: 8px;
  font-size: 13px;
}
[data-era="1995"] .card .ico { color: #ff6600; font-size: 18px; }
[data-era="1995"] .card h3 {
  font-family: "Comic Sans MS", serif;
  font-size: 15px;
  color: #000080;
  margin: 2px 0 4px;
}
[data-era="1995"] .meta { font-style: italic; color: #666; font-size: 12px; margin: 2px 0 4px; }

/* ---- job history: a bordered listing, not a photo gallery ---- */

[data-era="1995"] .timeline { counter-reset: tl; }
[data-era="1995"] .tl-item {
  counter-increment: tl;
  display: table;
  width: 100%;
  background: #ffffcc;
  border: 2px inset #c0c0c0;
  padding: 8px 10px;
  margin-bottom: 8px;
}
[data-era="1995"] .tl-marker {
  display: table-cell;
  width: 1%;
  white-space: nowrap;
  vertical-align: top;
  padding-right: 10px;
  font-family: "Courier New", monospace;
  font-weight: bold;
  color: #000080;
}
[data-era="1995"] .tl-marker::before { content: "Job #" counter(tl) ":"; }
[data-era="1995"] .tl-body { display: table-cell; vertical-align: top; }
[data-era="1995"] .tl-head { display: block; }
[data-era="1995"] .tl-head h3 {
  display: inline;
  font-family: "Comic Sans MS", serif;
  font-size: 15px;
  color: #000080;
}
[data-era="1995"] .tl-body p:last-child { margin: 0; }

[data-era="1995"] .tags {
  margin-top: 12px;
  text-align: center;
  font-family: "Courier New", monospace;
  font-size: 12px;
}
[data-era="1995"] .tags li { display: inline; }
[data-era="1995"] .tags li::before { content: "* "; color: #ff0000; }
[data-era="1995"] .tags li::after { content: " "; }

/* ---- contact ---- */
[data-era="1995"] .contact-in { text-align: center; }
[data-era="1995"] .mail {
  font-family: "Courier New", monospace;
  font-size: 16px;
  font-weight: bold;
  margin: 10px 0;
}
[data-era="1995"] .social li { display: inline; font-family: "Courier New", monospace; font-size: 13px; }
[data-era="1995"] .social li::after { content: " | "; }
[data-era="1995"] .social li:last-child::after { content: ""; }

/* ---- footer ---- */
[data-era="1995"] .foot {
  background: var(--paper);
  border-top: 2px solid #808080;
  text-align: center;
  font-size: 12px;
}

/* ---- injected era furniture ---- */
[data-era="1995"] .x-marquee {
  background: #000000;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-size: 14px;
  padding: 4px 0;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 2px solid #00ff00;
}
[data-era="1995"] .x-marquee span {
  display: inline-block;
  padding-left: 100%;
  animation: marq 16s linear infinite;
}
@keyframes marq { to { transform: translateX(-100%); } }

[data-era="1995"] .x-construction {
  text-align: center;
  padding: 8px;
  font-family: "Courier New", monospace;
  font-size: 12px;
  font-weight: bold;
  color: #cc0000;
  background: #ffffcc;
  border-top: 2px groove #c0c0c0;
}
[data-era="1995"] .x-construction .cone { font-size: 20px; }

[data-era="1995"] .x-counter {
  text-align: center;
  padding: 10px;
  font-family: "Courier New", monospace;
  font-size: 12px;
  color: #333;
}
[data-era="1995"] .x-counter b {
  background: #000;
  color: #0f0;
  padding: 2px 6px;
  letter-spacing: 3px;
  border: 2px inset #808080;
}
[data-era="1995"] .x-blink { animation: blink 1s steps(1) infinite; color: #ff0000; font-weight: bold; }
@keyframes blink { 50% { opacity: 0; } }

@media (max-width: 560px) {
  [data-era="1995"] .cols, [data-era="1995"] .col-main,
  [data-era="1995"] .col-side, [data-era="1995"] .grid,
  [data-era="1995"] .card { display: block; width: auto; }
  [data-era="1995"] .card { margin-bottom: 8px; }
  [data-era="1995"] .col-side { margin-top: 10px; }
}