@import url('https://fonts.googleapis.com/css2?family=Epunda+Slab:wght@300..900&display=swap');

:root{
  --bg: #181818;

  --title: #f2f2f2;
  --text: rgba(242,242,242,0.90);
  --muted: rgba(242,242,242,0.75);

  --maxw: 980px;
  --gutter: clamp(20px, 5vw, 60px);
  --radius: 14px;

  /* Tuning knobs */
  --snow-opacity: 0.28;   /* try 0.34 for stronger snow */
  --scan-opacity: 0.18;   /* reduce to 0.10 if too strong */
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Epunda Slab", serif;
  position: relative;
}

/* ============================= */
/*   REAL CRT SNOW (BITMAP)     */
/* ============================= */

body::before{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url("noise.png") repeat;
  background-size: 256px 256px;
  opacity: var(--snow-opacity);
  z-index: 0;
}

/* Optional scanlines layer */
body::after{
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: url("scanlines.png") repeat;
  background-size: 8px 4px;
  opacity: var(--scan-opacity);
  z-index: 0;
}

/* Ensure content sits above noise */
.masthead,
.container{
  position: relative;
  z-index: 1;
}

/* ============================= */
/*   TITLE                      */
/* ============================= */

.masthead{
  width: min(var(--maxw), calc(100% - (2 * var(--gutter))));
  margin: 0 auto;
  padding: clamp(60px, 9vw, 100px) 0 clamp(40px, 6vw, 60px);
}

.masthead h1{
  margin: 0;
  text-align: center;
  font-weight: 900;
  font-size: clamp(60px, 9vw, 110px);
  letter-spacing: -0.5px;
  color: var(--title);
}

/* ============================= */
/*   CONTENT                    */
/* ============================= */

.container{
  width: min(var(--maxw), calc(100% - (2 * var(--gutter))));
  margin: 0 auto;
  padding-bottom: clamp(60px, 8vw, 100px);
}

.list{
  display: grid;
  gap: clamp(60px, 9vw, 100px);
}

.entry{
  display: grid;
  justify-items: center;
  gap: 16px;
}

/* ============================= */
/*   THUMBNAILS                 */
/* ============================= */

.thumb{
  display: block;
  width: 100%;
  max-width: 920px;
  border-radius: var(--radius);
  overflow: hidden;
  text-decoration: none;
}

.thumb img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

.thumb:hover img{
  filter: brightness(1.08);
}

/* ============================= */
/*   META                       */
/* ============================= */

.meta{
  width: 100%;
  max-width: 920px;
  font-size: clamp(18px, 2.2vw, 20px);
  line-height: 1.3;
  color: var(--muted);
  text-decoration: none;
}

.meta:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ============================= */
/*   FOOTER                     */
/* ============================= */

.signature{
  margin-top: clamp(70px, 10vw, 120px);
  text-align: center;
}

.signature a{
  color: rgba(242,242,242,0.6);
  text-decoration: none;
}

.signature a:hover{
  text-decoration: underline;
  text-underline-offset: 4px;
}