/* nicobal.me, a 1998 homepage with better manners */

:root {
  --ink: #120e1f;
  --panel: #cfcbd9;
  --panel-hi: #f4f2fa;
  --panel-lo: #6d6880;
  --panel-dk: #2a2538;
  --pink: #ff4fb0;
  --lime: #b6ff3b;
  --teal: #6ff2e8;
  --gold: #ffd23f;
  --link: #3b1fa8;
  --visited: #7a1f73;
}

* { box-sizing: border-box; }

html { background: #0a0716 url("../img/stars.svg") repeat; }

body {
  margin: 0;
  padding: 18px 12px 40px;
  color: #ece9f7;
  font: 15px/1.55 Verdana, Tahoma, "DejaVu Sans", sans-serif;
}

.page { max-width: 780px; margin: 0 auto; }

a { color: var(--teal); }
a:hover { color: var(--gold); }

/* masthead */

.mast { text-align: center; margin: 6px 0 14px; }

.logo {
  display: inline-block;
  margin: 0;
  font: italic 900 clamp(46px, 11vw, 84px)/1 Georgia, "Times New Roman", serif;
  letter-spacing: -1px;
  background: linear-gradient(180deg, #fff6c4 0%, var(--gold) 35%, var(--pink) 70%, #8a2be2 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(3px 3px 0 #3a0d4f) drop-shadow(1px 1px 0 #000);
  transform: skewX(-6deg);
}

.logo a { color: inherit; text-decoration: none; }

.tagline {
  margin: 8px 0 0;
  font: 13px "Courier New", Courier, monospace;
  color: var(--lime);
}

/* scrolling news strip */

.ticker {
  overflow: hidden;
  white-space: nowrap;
  border: 2px inset var(--panel-lo);
  background: #000;
  color: var(--lime);
  font: bold 13px "Courier New", Courier, monospace;
  padding: 4px 0;
  margin-bottom: 14px;
}

.ticker span {
  display: inline-block;
  padding-left: 100%;
  animation: tick 26s linear -9s infinite;
}

@keyframes tick { to { transform: translateX(-100%); } }

/* beveled buttons */

.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-bottom: 16px;
}

.btn {
  display: inline-block;
  padding: 6px 14px;
  background: var(--panel);
  color: var(--ink);
  font: bold 13px Verdana, Tahoma, sans-serif;
  text-decoration: none;
  border: 2px solid;
  border-color: var(--panel-hi) var(--panel-dk) var(--panel-dk) var(--panel-hi);
  box-shadow: inset -1px -1px 0 var(--panel-lo), inset 1px 1px 0 #fff;
}

.btn:hover { background: #e3dff0; color: var(--ink); }

.btn:active,
.btn[aria-current="page"] {
  border-color: var(--panel-dk) var(--panel-hi) var(--panel-hi) var(--panel-dk);
  box-shadow: inset 1px 1px 0 var(--panel-lo);
  background: #bdb8cc;
}

/* windows */

.win {
  background: var(--panel);
  color: var(--ink);
  border: 2px solid;
  border-color: var(--panel-hi) var(--panel-dk) var(--panel-dk) var(--panel-hi);
  margin-bottom: 18px;
}

.win-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 4px 3px 8px;
  background: linear-gradient(90deg, #4b0f6b, #c2187f 60%, #ff7a3d);
  color: #fff;
  font: bold 13px Verdana, Tahoma, sans-serif;
}

.win-title h1,
.win-title h2 { margin: 0; font: inherit; }

.win-dots { display: flex; gap: 3px; }

.win-dots i {
  display: block;
  width: 15px;
  height: 13px;
  background: var(--panel);
  border: 1px solid;
  border-color: var(--panel-hi) var(--panel-dk) var(--panel-dk) var(--panel-hi);
}

.win-body { padding: 14px 16px; overflow-wrap: anywhere; }
.win-body > :first-child { margin-top: 0; }
.win-body > :last-child { margin-bottom: 0; }

.win-body a { color: var(--link); font-weight: bold; }
.win-body a:visited { color: var(--visited); }
.win-body a:hover { color: #c2187f; }

.win-body h3 {
  margin: 18px 0 6px;
  font: bold 17px Georgia, "Times New Roman", serif;
  color: #4b0f6b;
}

hr.groove {
  border: 0;
  border-top: 2px groove var(--panel-hi);
  margin: 16px 0;
}

/* home cards */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.card {
  display: block;
  padding: 12px;
  background: #fffdf2;
  color: var(--ink);
  text-decoration: none;
  border: 2px solid;
  border-color: var(--panel-dk) var(--panel-hi) var(--panel-hi) var(--panel-dk);
}

.win-body a.card { color: var(--ink); font-weight: normal; }

.card:hover { background: #fff3a8; }

.card b {
  display: block;
  font: bold 18px Georgia, "Times New Roman", serif;
  color: #c2187f;
  margin-bottom: 4px;
}

.card .icon { display: block; margin-bottom: 8px; }

/* project rows */

.item { padding: 12px 0; border-bottom: 2px groove var(--panel-hi); }
.item:last-child { border-bottom: 0; padding-bottom: 0; }
.item:first-child { padding-top: 0; }
.item h3 { margin-top: 0; }

.soon {
  display: inline-block;
  padding: 1px 8px;
  background: var(--gold);
  border: 1px solid var(--ink);
  font: bold 11px Verdana, sans-serif;
  text-transform: uppercase;
  animation: blink 1.2s steps(2, start) infinite;
}

@keyframes blink { to { visibility: hidden; } }

.new {
  color: #d4001a;
  font: bold italic 12px Georgia, serif;
}

/* video thumbnail */

.thumb {
  display: block;
  width: 100%;
  height: auto;
  margin: 8px 0;
  border: 2px solid;
  border-color: var(--panel-dk) var(--panel-hi) var(--panel-hi) var(--panel-dk);
}

/* write-ups */

.stack {
  margin: 0;
  padding: 0;
  list-style: none;
  font: 13px "Courier New", Courier, monospace;
}

.stack li { padding-left: 2ch; text-indent: -2ch; }

.stack li::before { content: "> "; color: #c2187f; font-weight: bold; }

figure.diagram {
  margin: 16px 0 0;
  padding: 10px;
  background: #0a0716;
  border: 2px solid;
  border-color: var(--panel-dk) var(--panel-hi) var(--panel-hi) var(--panel-dk);
}

figure.diagram svg { display: block; width: 100%; height: auto; }

figure.diagram figcaption {
  margin-top: 6px;
  color: var(--lime);
  font: 12px "Courier New", Courier, monospace;
  text-align: center;
}

/* sidebar widgets: counter, construction sign, badges */

.widgets {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 18px;
  margin: 8px 0 18px;
  text-align: center;
  font-size: 12px;
}

.counter {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: #000;
  border: 2px inset var(--panel-lo);
}

.counter b {
  display: block;
  width: 17px;
  padding: 2px 0;
  background: linear-gradient(180deg, #2b2b2b 0 48%, #111 52% 100%);
  color: var(--lime);
  font: bold 18px "Courier New", Courier, monospace;
  text-align: center;
}

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin-top: 10px;
}

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 31px;
  padding: 0 4px;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), inset -1px -1px 0 rgba(0, 0, 0, .45);
  font: bold 9px/1.1 Verdana, Tahoma, sans-serif;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
}

.b1 { background: linear-gradient(#1b1b1b, #3c3c3c); color: var(--lime); }
.b2 { background: linear-gradient(#ffe066, #ff9f1c); color: #2a1400; }
.b3 { background: linear-gradient(#6ff2e8, #1b8a9e); color: #001a1f; }
.b4 { background: linear-gradient(#ff8fd0, #b5125f); color: #fff; }
.b5 { background: linear-gradient(#e2e2e2, #9a9a9a); color: #111; }

footer {
  text-align: center;
  font-size: 12px;
  color: #b9b4cc;
}

footer p { margin: 6px 0; }

.muted { color: #5b566b; font-size: 13px; }

@media (max-width: 520px) {
  body { font-size: 14px; padding: 12px 8px 30px; }
  .win-body { padding: 12px; }
  .btn { padding: 6px 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker span { animation: none; padding-left: 8px; }
  .soon { animation: none; }
  .uc-light { animation: none !important; }
}

/* benchmark table */

.tablewrap { overflow-x: auto; }

table.bench {
  width: 100%;
  border-collapse: collapse;
  background: #fffdf2;
  font-size: 13px;
}

table.bench th,
table.bench td {
  padding: 5px 8px;
  border: 1px solid var(--panel-lo);
  text-align: left;
}

table.bench th { background: #4b0f6b; color: #fff; }
table.bench td + td { white-space: nowrap; }

table.consoles td.tick { text-align: center; font-weight: bold; color: #b5b0c4; }
table.consoles tr.had td { background: #fff3a8; }
table.consoles tr.had td.tick { color: #1a8a3a; font-size: 16px; }
table.consoles small { color: #6d6880; font-size: 11px; }

/* garage */

.garage { display: grid; gap: 12px; }

.ride {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px;
  background: #fffdf2;
  border: 2px solid;
  border-color: var(--panel-dk) var(--panel-hi) var(--panel-hi) var(--panel-dk);
}

.ride h3 { margin: 0 0 4px; }
.ride p { margin: 0; }
.ride-body { flex: 1 1 0; min-width: 0; }

.ride-shot {
  flex: 0 0 auto;
  width: 150px;
  height: auto;
  border: 2px solid;
  border-color: var(--panel-dk) var(--panel-hi) var(--panel-hi) var(--panel-dk);
}

@media (max-width: 520px) {
  .ride { flex-wrap: wrap; }
  .ride-shot { width: 100%; }
}

.plate {
  flex: 0 0 auto;
  display: flex;
  width: 92px;
  border: 2px solid #120e1f;
  border-radius: 4px;
  background: #f4f2fa;
  font: bold 14px "Courier New", Courier, monospace;
  overflow: hidden;
}

.plate .cc { padding: 4px 5px; background: #3b1fa8; color: var(--gold); font-size: 11px; }
.plate .pn { padding: 4px 6px; color: #120e1f; }

.chip {
  display: inline-block;
  padding: 1px 7px;
  background: #120e1f;
  color: var(--lime);
  font: bold 11px "Courier New", Courier, monospace;
  vertical-align: middle;
}

/* diagrams */

.dg-box { fill: #1b1430; stroke: #6ff2e8; stroke-width: 2; }
.dg-hot { fill: #3a0d4f; stroke: #ff4fb0; stroke-width: 2; }
.dg-gpu { fill: #12301f; stroke: #b6ff3b; stroke-width: 2; }
.dg-t { fill: #ece9f7; font: bold 17px Verdana, Tahoma, sans-serif; text-anchor: middle; }
.dg-s { fill: #ffd23f; font: 14px "Courier New", Courier, monospace; text-anchor: middle; }
.dg-line { stroke: #ff4fb0; stroke-width: 3; fill: none; }
.dg-head { fill: #ff4fb0; }

/* the Peugeot 207 sticker, flown in by js/garage.js */

.sticker-207 { border: 0; }

.sticker-207.flying { position: relative; z-index: 50; }

/* small photo gallery */

.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin: 12px 0 4px;
}

.gallery img {
  display: block;
  width: 100%;
  height: 160px;
  object-fit: cover;
  border: 2px solid;
  border-color: var(--panel-dk) var(--panel-hi) var(--panel-hi) var(--panel-dk);
}