/* drz.pw — minimal vaporwave
   Edit colors here; everything else follows. */
:root {
  --bg: #120b24;
  --bg-2: #1b1236;
  --line: #2e2152;
  --text: #ece6ff;
  --muted: #9a8fc4;
  --pink: #ff71ce;
  --cyan: #01cdfe;
  --mint: #05ffa1;
  --lilac: #b967ff;
  --sun: #fffb96;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --max: 42rem;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.7 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
a { color: var(--cyan); text-decoration: none; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
a:hover { color: var(--pink); border-color: var(--pink); }
::selection { background: var(--pink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 1.25rem; }
.wide { max-width: 64rem; }

/* ---------- header ---------- */
.site-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 1.25rem; font-family: var(--mono); font-size: .9rem;
}
.logo { color: var(--text); font-weight: 700; letter-spacing: .02em; border: 0; }
.logo span { color: var(--pink); }
.logo:hover { color: var(--text); border: 0; }
.nav { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: flex-end; }
.nav a { color: var(--muted); }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text); border-color: var(--lilac); }

/* ---------- hero ---------- */
.hero { position: relative; overflow: hidden; padding: 4.5rem 0 0; text-align: center; }
.sun {
  width: 220px; height: 220px; margin: 0 auto; border-radius: 50%;
  background: linear-gradient(180deg, var(--sun) 0%, var(--pink) 55%, var(--lilac) 100%);
  /* horizontal slats across the lower half */
  -webkit-mask: linear-gradient(#000 0 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82% 88%, transparent 88% 95%, #000 95%);
          mask: linear-gradient(#000 0 52%, transparent 52% 56%, #000 56% 64%, transparent 64% 69%, #000 69% 76%, transparent 76% 82%, #000 82% 88%, transparent 88% 95%, #000 95%);
  filter: drop-shadow(0 0 40px rgba(255,113,206,.35));
}
.hero h1 {
  font-family: var(--mono); font-size: clamp(2.6rem, 9vw, 4.5rem);
  letter-spacing: .35em; margin: 2rem 0 .25rem; padding-left: .35em; font-weight: 700;
  background: linear-gradient(90deg, var(--cyan), var(--lilac), var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: var(--muted); font-family: var(--mono); font-size: .9rem; margin: 0; }
.grid-floor {
  height: 140px; margin-top: 2.5rem;
  background:
    linear-gradient(var(--bg) 0%, transparent 40%),
    repeating-linear-gradient(90deg, transparent 0 59px, rgba(185,103,255,.45) 59px 60px),
    repeating-linear-gradient(0deg, transparent 0 23px, rgba(1,205,254,.35) 23px 24px);
  transform: perspective(240px) rotateX(55deg);
  transform-origin: top; mask: linear-gradient(#000, transparent);
  -webkit-mask: linear-gradient(#000, transparent);
}

/* ---------- sections ---------- */
.section-label {
  font-family: var(--mono); font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--lilac); margin: 3rem 0 1rem;
}
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li { border-top: 1px solid var(--line); }
.post-list li:last-child { border-bottom: 1px solid var(--line); }
.post-list a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: 1rem 0; color: var(--text); border: 0;
}
.post-list a:hover { color: var(--pink); }
.post-list time { font-family: var(--mono); font-size: .8rem; color: var(--muted); white-space: nowrap; }

.card-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.card {
  display: block; padding: 1.25rem; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg-2); color: var(--text);
}
.card:hover { border-color: var(--pink); color: var(--text); }
.card b { display: block; font-family: var(--mono); color: var(--mint); margin-bottom: .25rem; }
.card small { color: var(--muted); }

/* ---------- post ---------- */
.post-head { margin: 3rem 0 2rem; }
.post-head h1 { font-size: clamp(1.8rem, 5vw, 2.4rem); line-height: 1.2; margin: 0 0 .5rem; }
.post-head time { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.prose h2 { font-size: 1.3rem; margin-top: 2.5rem; color: var(--text); }
.prose h2::before { content: "// "; color: var(--pink); font-family: var(--mono); }
.prose img { max-width: 100%; border-radius: 8px; }
.prose blockquote { margin: 1.5rem 0; padding: .25rem 1.25rem; border-left: 3px solid var(--lilac); color: var(--muted); }
.prose code { font-family: var(--mono); font-size: .88em; background: var(--bg-2); padding: .1em .35em; border-radius: 4px; color: var(--mint); }
.prose pre { background: var(--bg-2); border: 1px solid var(--line); padding: 1rem; border-radius: 8px; overflow-x: auto; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; height: 1px; background: linear-gradient(90deg, var(--cyan), var(--pink)); margin: 2.5rem 0; }

/* ---------- memes and wallpapers ---------- */
.meme-grid, .wallpaper-grid { columns: 3 16rem; column-gap: 1rem; margin-bottom: 3rem; }
.wallpaper-grid { columns: 2 22rem; }
.meme, .wallpaper {
  break-inside: avoid; margin: 0 0 1rem; border: 1px solid var(--line); border-radius: 10px;
  overflow: hidden; background: var(--bg-2);
}
.meme button.open, .wallpaper button.open { all: unset; cursor: zoom-in; display: block; width: 100%; }
.meme img, .meme video, .wallpaper img, .wallpaper video { display: block; width: 100%; height: auto; }
.meme figcaption, .wallpaper figcaption {
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
  padding: .6rem .8rem; font-size: .85rem; color: var(--muted);
}
.actions { display: flex; gap: .4rem; flex-shrink: 0; }
.copy {
  font: .75rem var(--mono); color: var(--cyan); background: none; cursor: pointer;
  border: 1px solid var(--line); border-radius: 6px; padding: .3rem .6rem; white-space: nowrap;
}
.copy:hover { border-color: var(--cyan); }
.copy.done { color: var(--mint); border-color: var(--mint); }
.empty { color: var(--muted); font-family: var(--mono); }

dialog.lightbox {
  border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh;
}
dialog.lightbox::backdrop { background: rgba(10,5,22,.88); backdrop-filter: blur(4px); }
dialog.lightbox img, dialog.lightbox video { display: block; max-width: 92vw; max-height: 86vh; border-radius: 8px; }
dialog.lightbox p { text-align: center; color: var(--text); margin: .5rem 0 0; font-size: .9rem; }

/* ---------- footer ---------- */
.site-foot {
  font-family: var(--mono); font-size: .8rem; color: var(--muted);
  border-top: 1px solid var(--line); padding: 1.5rem 0; margin-top: 4rem;
}
.site-foot .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }