/* ==========================================================================
   ertdfgcvb fan site — foundational stylesheet
   B&W brutalist grid · newspaper portal · bar hover system
   ========================================================================== */

/* --- tokens --- */
:root {
  --color-bg: #ffffff;
  --color-bg-alt: #eeeeee;
  --color-bg-bar: #d3d3d3;
  --color-bg-panel: #f5f5f5;
  --color-text: #000000;
  --color-muted: #808080;
  --color-link: #0000ff;
  --color-link-hover: #000000;
  --color-active: #000000;
  --color-border: #000000;
  --font-sans: Arial, Helvetica, sans-serif;
  --font-mono: "Courier New", Courier, monospace;
  --site-max: 1000px;
  --col-left: 180px;
  --col-right: 180px;
  --border: 1px solid var(--color-border);
  --space-xs: 4px;
  --space-sm: 6px;
  --space-md: 8px;
  --space-lg: 12px;
}

/* --- reset + base --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.35;
  background: var(--color-bg-alt);
  color: var(--color-text);
}

a {
  color: var(--color-link);
  text-decoration: underline;
}

a:hover {
  color: var(--color-link-hover);
  background: var(--color-bg-bar);
}

code,
.mono {
  font-family: var(--font-mono);
  font-size: 11px;
}

button {
  font-family: var(--font-sans);
  font-size: 12px;
  padding: var(--space-xs) 10px;
  border: var(--border);
  background: var(--color-bg);
  cursor: pointer;
}

button:hover {
  background: var(--color-bg-bar);
}

button:active {
  transform: translateY(1px);
}

h1,
h2,
h3 {
  margin-bottom: var(--space-sm);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

h1 {
  font-size: 16px;
}

h2 {
  font-size: 13px;
}

h3 {
  font-size: 11px;
}

p {
  margin-bottom: var(--space-sm);
}

ul,
ol {
  padding-left: 14px;
}

li {
  margin-bottom: var(--space-xs);
}

img,
video {
  max-width: 100%;
  display: block;
}

/* --- site frame --- */
.site-frame {
  max-width: var(--site-max);
  margin: 0 auto;
}

/* --- header --- */
.site-header {
  padding: var(--space-md) var(--space-lg) var(--space-xs);
}

.branding-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: stretch;
  gap: var(--space-md);
}

.logo-block {
  background: var(--color-bg);
  padding: var(--space-md);
  border: var(--border);
}

.logo-mark {
  font-weight: bold;
  font-size: 14px;
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
}

.logo-caption {
  font-size: 10px;
  color: var(--color-muted);
  margin-top: var(--space-xs);
}

.banner {
  background: var(--color-bg);
  border: var(--border);
  padding: 3px;
}

.banner-inner {
  width: 100%;
  min-height: 48px;
  max-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: var(--space-sm);
  text-align: center;
}

.banner-inner.tiled {
  background-image: url(../assets/images/andreas1.jpg);
  background-repeat: repeat;
  background-size: 120px;
  filter: grayscale(100%) contrast(1.2);
  color: #fff;
  text-shadow: 0 0 4px #000, 1px 1px 2px #000;
}

/* --- nav --- */
.site-nav {
  padding: var(--space-xs) var(--space-lg) var(--space-sm);
}

.site-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  border: var(--border);
  background: var(--color-bg);
}

.site-nav li {
  margin: 0;
}

.site-nav .nav-link {
  display: block;
  padding: var(--space-xs) 10px;
  border-right: var(--border);
  text-decoration: none;
  font-size: 11px;
  text-transform: lowercase;
}

.site-nav li:last-child .nav-link {
  border-right: none;
}

.site-nav .nav-link:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.site-nav .nav-link.active {
  background: var(--color-text);
  color: var(--color-bg);
  text-decoration: none;
}

.site-nav .nav-sep::before {
  content: "/";
  color: var(--color-muted);
  padding: 0 2px;
}

/* --- status bar --- */
.status-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-lg);
  font-family: var(--font-mono);
  font-size: 10px;
  border-top: var(--border);
  border-bottom: var(--border);
  background: var(--color-bg);
  max-width: var(--site-max);
  margin: 0 auto;
}

.status-bar span {
  white-space: nowrap;
}

.status-bar .status-label {
  color: var(--color-muted);
}

/* --- main grid --- */
.site-main {
  display: grid;
  grid-template-columns: var(--col-left) 1fr var(--col-right);
  max-width: var(--site-max);
  margin: 0 auto;
  background: var(--color-bg);
  border-bottom: var(--border);
}

.col-left,
.col-right {
  padding: var(--space-md);
  background: var(--color-bg-panel);
}

.col-left {
  border-right: var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.col-right {
  border-left: var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.col-main {
  padding: var(--space-lg);
  min-width: 0;
}

.panel {
  border: var(--border);
  background: var(--color-bg);
  padding: var(--space-sm);
}

/* --- components --- */
.menu-block h3 {
  border-bottom: var(--border);
  padding-bottom: 2px;
  margin-bottom: var(--space-xs);
}

.menu-block .link-list {
  list-style: none;
  padding-left: 0;
}

.menu-block .link-list li {
  margin-bottom: 2px;
}

.menu-block .link-list a {
  font-size: 11px;
}

.promo-box {
  padding: var(--space-sm);
  background: var(--color-bg);
  border: var(--border);
  font-size: 11px;
}

.promo-box h3 {
  margin-bottom: var(--space-xs);
}

.content-block {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px dashed var(--color-muted);
}

.content-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.content-block ul {
  margin-top: var(--space-sm);
}

.hero-block p {
  margin-bottom: var(--space-sm);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-muted);
  border-top: var(--border);
  margin-top: var(--space-sm);
  padding-top: var(--space-xs);
}

.article-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: var(--border);
}

.article-row-thumb {
  width: 64px;
  height: 64px;
  border: var(--border);
  background: var(--color-bg-bar);
  overflow: hidden;
}

.article-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(100%);
}

.article-row-title {
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
}

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.tag-cloud a,
.tag-chip {
  display: inline-block;
  padding: 2px 5px;
  border: var(--border);
  font-size: 10px;
  text-decoration: none;
  background: var(--color-bg);
}

.tag-cloud a:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.stat-table {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 10px;
  border-collapse: collapse;
}

.stat-table td {
  padding: 2px 4px;
  border-bottom: 1px solid var(--color-muted);
}

.stat-table td:last-child {
  text-align: right;
}

.trivia {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-bar);
  border: var(--border);
  margin-bottom: var(--space-md);
  font-size: 11px;
  font-family: var(--font-mono);
}

.under-construction {
  padding: var(--space-sm);
  border: var(--border);
  background: repeating-linear-gradient(
    -45deg,
    #fff,
    #fff 4px,
    #eee 4px,
    #eee 8px
  );
  font-size: 10px;
  text-align: center;
  text-transform: uppercase;
}

.andreas-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin: var(--space-md) 0;
  border: var(--border);
  padding: 2px;
  background: var(--color-bg);
}

.andreas-strip img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border: var(--border);
  filter: grayscale(100%);
}

.work-hero-img {
  margin: var(--space-md) 0;
  border: var(--border);
  max-width: 400px;
}

.work-hero-img img {
  filter: grayscale(100%);
}

.work-video {
  margin: var(--space-lg) 0;
  border: var(--border);
  max-width: 560px;
  padding: var(--space-sm);
}

.work-video video {
  width: 100%;
}

.wallets-note {
  font-size: 10px;
  color: var(--color-muted);
  margin-top: var(--space-xs);
}

/* --- bar / hover system (refs 2+3) --- */
.bar-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: var(--space-md) 0;
}

.bar-link {
  display: block;
  position: relative;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg-bar);
  border: var(--border);
  text-decoration: none;
  color: var(--color-text);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  overflow: hidden;
  transition: background 0.12s, color 0.12s;
}

.bar-link:nth-child(3n + 1) {
  width: 100%;
}

.bar-link:nth-child(3n + 2) {
  width: 88%;
}

.bar-link:nth-child(3n) {
  width: 72%;
}

.bar-link:hover,
.bar-link:focus-visible {
  background: var(--color-text);
  color: var(--color-bg);
  text-decoration: none;
}

.bar-link .bar-detail {
  display: block;
  font-size: 10px;
  font-family: var(--font-mono);
  text-transform: none;
  letter-spacing: 0;
  margin-top: var(--space-xs);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.2s, opacity 0.15s;
}

.bar-link:hover .bar-detail,
.bar-link:focus-visible .bar-detail {
  max-height: 80px;
  opacity: 1;
}

.info-chip {
  display: inline-block;
  padding: 1px 5px;
  border: var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  cursor: help;
  background: var(--color-bg);
}

.info-chip:hover {
  background: var(--color-text);
  color: var(--color-bg);
}

.glitch-block {
  position: relative;
}

.glitch-block.glitch-hover::after {
  content: "▓▒░▓▒░";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: -1px;
  animation: glitch-flicker 0.3s steps(2) infinite;
}

@keyframes glitch-flicker {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

/* --- footer --- */
.site-footer {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: var(--space-md) var(--space-lg) var(--space-lg);
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.footer-box {
  border: var(--border);
  padding: var(--space-sm);
  font-size: 10px;
  background: var(--color-bg);
}

.footer-box h4 {
  font-size: 10px;
  text-transform: uppercase;
  margin-bottom: var(--space-xs);
  border-bottom: var(--border);
  padding-bottom: 2px;
}

.footer-bottom {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--color-muted);
  border-top: var(--border);
  padding-top: var(--space-sm);
}

.footer-bottom p {
  margin-bottom: 2px;
}

.visitor-count {
  font-weight: bold;
  color: var(--color-text);
}

/* --- page hooks --- */
.page-home .banner-inner.tiled {
  min-height: 64px;
}

.page-post .logo-mark,
.page-meltdown .logo-mark {
  letter-spacing: 0.02em;
}

/* --- responsive --- */
@media (max-width: 900px) {
  .site-main {
    grid-template-columns: 1fr;
  }

  .col-left,
  .col-right {
    order: 2;
    border-right: none;
    border-left: none;
    border-top: var(--border);
  }

  .col-main {
    order: 1;
  }

  .branding-row {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .site-nav ul {
    flex-direction: column;
  }

  .site-nav .nav-link {
    border-right: none;
    border-bottom: var(--border);
  }

  .site-nav li:last-child .nav-link {
    border-bottom: none;
  }
}