/* ============================================================
   archive.css
   Shared styles for all archive pages.
   Loaded via <link rel="stylesheet" href="/css/archive.css">
   in: archive, audio, art, post, tag, search pages.
   ============================================================ */

@font-face {
  font-family: 'VT323';
  src: url('/fonts/VT323-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'Press Start 2P';
  src: url('/fonts/PressStart2P-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Prevent browser UA stylesheet from making links blue */
a { color: inherit; text-decoration: none; }

html, body {
  background: #050505;
  color: #cfcfcf;
  font-family: 'VT323', monospace;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: auto;
  font-size: 18px;
  line-height: 1.4;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

/* ── CRT overlay ── */
.crt-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 5;
  background:
    linear-gradient(rgba(0,0,0,0) 25%, rgba(0,0,0,0.6) 75%),
    linear-gradient(90deg, rgba(255,0,0,0.07), rgba(0,255,0,0.03), rgba(0,0,255,0.07));
  background-size: 100% 3px, 4px 100%;
  opacity: 0.55;
}
.crt-overlay::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.95) 100%);
}

/* ── Noise overlay ── */
.noise-overlay {
  position: fixed; inset: 0; pointer-events: none; z-index: 4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.4;
  animation: noise-shift 0.1s steps(1) infinite;
}
@keyframes noise-shift {
  0%   { background-position:   0px   0px; }
  10%  { background-position: -55px -30px; }
  20%  { background-position:  30px  55px; }
  30%  { background-position: -80px  15px; }
  40%  { background-position:  15px -65px; }
  50%  { background-position: -25px  45px; }
  60%  { background-position:  65px -15px; }
  70%  { background-position: -35px  75px; }
  80%  { background-position:  45px -45px; }
  90%  { background-position: -65px  25px; }
  100% { background-position:  25px  65px; }
}

/* ── Layout ── */
.page {
  position: relative; z-index: 10;
  max-width: 860px; margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

/* ── Page title ── */
.page-title {
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(0.7rem, 2.5vw, 1.1rem);
  color: #ef4444;
  text-shadow: 0 0 6px #ff3300, 0 0 16px #ff220066;
  margin-bottom: 1.5rem;
  letter-spacing: 0.05em;
  line-height: 1.6;
}
.page-sub {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.6rem; color: #555;
  margin-bottom: 1.5rem; letter-spacing: 0.08em;
  line-height: 1.8;
}

/* ── Posts container ── */
#posts { display: flex; flex-direction: column; gap: 1.25rem; }

/* ── Post card ── */
.post {
  border: 1px solid #331111; background: #0a0a0a;
  padding: 1rem;
  box-shadow: 0 0 10px #ff000014, inset 0 0 14px #08000a;
}

/* ── Attribution ── */
.attribution {
  font-size: 1rem; margin-bottom: 0.75rem;
  display: flex; align-items: baseline; gap: 0.6rem;
  flex-wrap: wrap;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem;
  line-height: 1.8;
}
.attribution a { color: #dc2626; text-decoration: none; }
.attribution a:hover { text-shadow: 0 0 6px #ff3300; }
.timestamp { color: #555; font-size: 1rem; font-family: 'VT323', monospace; }

/* ── Ask ── */
.ask-block {
  border-left: 2px solid #331111;
  padding-left: 0.75rem;
  margin-bottom: 0.75rem;
}
.ask-label   { font-size: 1rem; color: #dc2626; margin-bottom: 0.35rem; }
.ask-label a { color: #dc2626; text-decoration: none; }
.ask-content { font-size: 1rem; color: #999; font-style: italic; margin-bottom: 0.5rem; line-height: 1.5; }
.ask-replier { font-size: 1rem; color: #dc2626; margin: 0.5rem 0 0.25rem; }
.ask-replier a { color: #dc2626; text-decoration: none; }
.ask-reply   { font-size: 1rem; color: #cfcfcf; line-height: 1.5; }

/* ── Audio ── */
.audio-block { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
.ap + .ap { margin-top: 0.5rem; }
.title       { font-size: 1rem; color: #888; }
audio        { width: 100%; accent-color: #dc2626; }
.transcript  { font-size: 1rem; color: #888; line-height: 1.6; }
.source a    { font-size: 1rem; color: #dc2626; text-decoration: underline; }
.source a:hover { text-shadow: 0 0 6px #ff3300; }

/* ── Images (isolated from CRT) ── */
.img-wrap {
  isolation: isolate; position: relative; z-index: 60;
  display: block; background: #050505;
  transform: translateZ(0); will-change: transform;
  margin-bottom: 0.5rem;
}
img   { max-width: 100%; display: block; border: 1px solid #1a0808; }
video { max-width: 100%; display: block; margin-bottom: 0.5rem; }
.yt-wrap {
  width: 100%; margin-bottom: 0.5rem;
  isolation: isolate; position: relative; z-index: 60;
}
.yt-wrap iframe {
  width: 100%; aspect-ratio: 16/9;
  border: 1px solid #1a0808; display: block;
}
.caption { font-size: 1rem; color: #888; line-height: 1.6; }

/* ── Tags ── */
.tags {
  display: flex; flex-wrap: wrap; gap: 0.4rem;
  margin-top: 0.75rem; padding-top: 0.75rem;
  border-top: 1px solid #1a0808;
}
a.tag-link {
  font-family: 'VT323', monospace;
  font-size: 1.1rem; color: #cfcfcf !important;
  text-decoration: none !important; transition: color 0.15s;
}
a.tag-link:hover  { color: #ef4444 !important; text-shadow: 0 0 6px #ff330066; }
a.tag-link.active { color: #ef4444 !important; }

/* ── Permalinks ── */
.permalinks {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 0.75rem; padding-top: 0.75rem;
  border-top: 1px solid #1a0808;
}
.permalinks a {
  font-family: 'Press Start 2P', monospace;
  font-size: 0.5rem; color: #555;
  text-decoration: none; border: 1px solid #1a0808;
  padding: 0.4rem 0.75rem; background: #0d0505;
  transition: border-color 0.15s, color 0.15s;
  line-height: 1.8;
}
.permalinks a:hover { border-color: #cc0000; color: #fff; }

/* ── Loader ── */
#loading, #loader {
  text-align: center; padding: 1.5rem;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.55rem; color: #555; letter-spacing: 0.1em;
  border: 1px solid #1a0808; background: #0a0a0a;
  margin-top: 1.25rem; line-height: 2;
}

/* ── Utility ── */
.hidden { display: none !important; }

/* ── Mobile ── */
@media (max-width: 600px) {
  .page { padding: 1rem 0.75rem 3rem; }
  .page-title { margin-bottom: 1rem; }
  .post { padding: 0.75rem; }
  .permalinks a { font-size: 0.9rem; padding: 0.25rem 0.5rem; }
  .tag-link { font-size: 0.9rem; }
  audio { height: 36px; }
}