/* bitwalk.com — 1950s print ad, raw dogged.
   body: Vollkorn · headlines: Cherry Cream Soda · pills/dates: Rye */

:root {
  --ink: #2b2117;
  --red: #c9252d;
  --paper: #e4d8c2;
  --matte: #f5efe2;
  color-scheme: light dark;
}

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

/* behind the paper: a darker desk. this is what the overscroll bounce reveals */
html { background-color: #8b7a5e; }

body {
  min-height: 100vh;
  color: var(--ink);
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.28 0 0 0 0 0.18 0 0 0 0.14 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 50% 30%, rgba(255,252,240,0.7) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(ellipse at 50% 100%, rgba(120,90,40,0.18) 0%, rgba(0,0,0,0) 70%);
  font-family: 'Vollkorn', serif;
  font-size: 1.3rem;
  line-height: 1.55;
}

.page { max-width: 640px; margin: 0 auto; padding: 3rem 1.5rem 5rem; }

/* headlines — Cherry Cream Soda, ink black, organic red underline under the text */
h1, h2 {
  font-family: 'Cherry Cream Soda', cursive;
  font-weight: 400;
  font-size: 2.1rem;
  line-height: 1.15;
  margin: 2.2rem 0 0.8rem;
  text-wrap: balance;
}
h3 { font-family: 'Cherry Cream Soda', cursive; font-weight: 400; font-size: 1.3rem; margin: 1.8rem 0 0.6rem; }

/* the organic red line — <u> words, in body and headlines alike.
   inline + clone so multi-line text gets the line under each written line. */
u {
  text-decoration: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 4 Q 25 2.2 50 3.8 T 98 3.6' fill='none' stroke='%23c9252d' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat bottom / 100% 0.26em;
  padding-bottom: 0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

p { margin-bottom: 1rem; text-wrap: pretty; }

/* links: red in body, never red on hover — hover gets the wobbly ink underline,
   only under the actual text (inline + clone) */
a {
  color: var(--red);
  text-decoration: none;
  padding-bottom: 0.14em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
a:hover {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 4 Q 25 2.2 50 3.8 T 98 3.6' fill='none' stroke='%232b2117' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat bottom / 100% 0.26em;
}
/* while the ink hover line is drawn, the red line steps aside */
a:hover u { background: none; }

/* pills — light: ink Rye caps in a thin ink frame.
   ONE size for every pill on the site, badges included. */
mark, .pill, .badges a {
  font-family: 'Rye', serif;
  font-size: 0.9rem;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
  padding: 0 0.35em;
}
a.pill:hover { background: var(--ink); color: var(--paper); }

/* filter pills on the archive page: off = light (default), on = filled dark */
.filter { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 1.4rem 0 2.2rem; }
.filter .pill { background: var(--ink); color: var(--paper); }
.filter .pill.off { background: transparent; color: var(--ink); }
.filter .pill.off:hover, .filter .pill:hover { background: var(--ink); color: var(--paper); }

/* dates — Rye, no chip, same size as pills */
time {
  font-family: 'Rye', serif;
  font-size: 0.9rem;
  letter-spacing: 0.08em;
  opacity: 0.65;
}

/* pill + date line */
.meta { display: flex; align-items: center; gap: 0.8rem; }

img { max-width: 100%; }

/* 50s-ad style illustrations (transparent, *_ill.png): no frame, modest size */
.article img[src*="_ill"] {
  display: block;
  margin: 0.5rem auto;
  max-width: min(260px, 70%);
}

/* content images: white frame, scissor-cut from the newspaper */
.masthead img, .article img:not([src*="_ill"]) {
  background: var(--matte);
  padding: 12px;
  clip-path: polygon(
    0.8% 1.6%, 12% 0.4%, 27% 1.8%, 41% 0.2%, 58% 1.4%, 73% 0.3%, 88% 1.7%, 99.2% 0.6%,
    99.6% 14%, 98.9% 31%, 99.8% 47%, 99% 63%, 99.7% 81%, 99.1% 98.9%,
    85% 99.6%, 70% 98.7%, 54% 99.8%, 38% 98.8%, 22% 99.7%, 8% 98.9%, 0.4% 99.4%,
    1.2% 84%, 0.3% 66%, 1.5% 49%, 0.5% 32%, 1.4% 15%);
}

/* upscaled screenshots from tiny machines stay crisp */
img.pixel { width: 100%; image-rendering: pixelated; }

/* masthead */
.masthead { text-align: center; margin-bottom: 2.5rem; }
.masthead img { max-width: min(300px, 92%); }
.masthead h1 { margin-top: 1.4rem; margin-bottom: 0.4rem; }
.tagline { font-style: italic; opacity: 0.8; }

/* archive entries — title, then pill + date */
.archive { list-style: none; margin: 1.6rem 0 2.6rem; }
.archive li { margin-bottom: 1.8rem; }
.archive .title {
  font-family: 'Cherry Cream Soda', cursive;
  font-size: 2.1rem;
  line-height: 1.2;
  color: var(--ink);
  padding-bottom: 0.12em;
  text-wrap: balance;
}
.archive .meta { margin: 0.9rem 0 0; }

/* article page */
.article h1 { margin: 0.6rem 0 1.1rem; }
.article .meta { margin-bottom: 1.8rem; }
.article img { margin-bottom: 0.5rem; }

/* back link — quiet ink, not red */
.back { font-style: italic; font-size: 1.05rem; margin-bottom: 2rem; }
.back a { color: var(--ink); }

/* badges — same chip as every other pill, icons sized to the text box */
.badges { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.8rem; margin: 2.4rem 0; }
.badges a { display: flex; align-items: center; }
.badges a svg { display: block; height: 1.15em; width: auto; }
.badges a:hover { background: var(--ink); color: var(--paper); }

/* footer — negroni on the left, then the line. served. */
footer {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 3.5rem;
  font-style: italic;
  opacity: 0.85;
  font-size: 1.05rem;
}
footer img { height: 56px; width: auto; }
footer p { margin: 0; }

/* dark theme — the same paper after midnight: very dark beige, light ink.
   photo frames stay light, like cutouts pinned to a dark board. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #201a11;
    --ink: #ddd0b6;
    --red: #e0565c;
  }
  html { background-color: #0d0a06; }
  body {
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.78 0 0 0 0 0.62 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)'/%3E%3C/svg%3E"),
      radial-gradient(ellipse at 50% 30%, rgba(255,240,210,0.05) 0%, rgba(0,0,0,0) 55%),
      radial-gradient(ellipse at 50% 100%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0) 70%);
  }
  a:hover {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8' preserveAspectRatio='none'%3E%3Cpath d='M2 4 Q 25 2.2 50 3.8 T 98 3.6' fill='none' stroke='%23ddd0b6' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}