:root { --paper:#f6f2e8; --ink:#141210; --dim:#6e685e; --accent:#c8452d; }
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--paper); color:var(--ink);
  font-family:Georgia,'Times New Roman',serif; line-height:1.5;
  -webkit-font-smoothing:antialiased; }
.wrap { max-width:860px; margin:0 auto; padding:1.5rem 1rem 4rem; }

/* masthead: heavier, tighter, with a rule that reads as a press slug */
header.site { text-align:center; padding:2rem 0 1.2rem;
  border-bottom:4px solid var(--ink); margin-bottom:2.6rem; }
header.site h1 { font-size:clamp(2.8rem,9vw,4.2rem); font-style:italic;
  letter-spacing:-.02em; line-height:.95; }
header.site p { color:var(--dim); font-size:.8rem; margin-top:.55rem;
  text-transform:uppercase; letter-spacing:.18em; }

/* the per-piece colour strip — sampled from that cartoon's own palette */
.strip { height:8px; background:var(--accent); margin:0 0 .9rem; }
article .strip { margin-bottom:1.4rem; }

/* punchline leads, title is the kicker underneath it */
.punch { font-size:clamp(1.7rem,4.6vw,2.5rem); line-height:1.15;
  letter-spacing:-.015em; margin:0 0 .5rem; }
.card h2 { font-size:clamp(1.25rem,3vw,1.6rem); line-height:1.2;
  letter-spacing:-.01em; margin:0 0 .4rem; }
.card h2 a { color:var(--ink); text-decoration:none;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-size:0% 3px; background-repeat:no-repeat;
  background-position:0 100%; transition:background-size .18s ease; }
.card h2 a:hover { background-size:100% 3px; }
.kicker { font-size:.78rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--accent); font-weight:700; margin:0 0 .2rem; }
.kicker .dot, .card .kicker { color:var(--dim); font-weight:400; }
.card .kicker strong { color:var(--accent); }

.card { margin:0 0 4rem; }
.card a.img { display:block; }
.card img, article img { width:100%; height:auto; display:block;
  border:2px solid var(--ink); }
.meta { color:var(--dim); font-size:.82rem; }
article .meta { margin:0 0 1.4rem; }
article .summary { margin:1.6rem 0 0; font-size:1.02rem; }
footer.src { margin-top:1.6rem; padding-top:.9rem;
  border-top:2px solid var(--ink); color:var(--dim); font-size:.85rem; }
footer.src a { color:var(--dim); }
a.back { display:inline-block; color:var(--dim); font-size:.75rem;
  text-transform:uppercase; letter-spacing:.14em; text-decoration:none;
  margin-bottom:1.4rem; }
a.back:hover { color:var(--accent); }
.nav { text-align:center; margin-top:3rem; padding-top:1.4rem;
  border-top:2px solid var(--ink); text-transform:uppercase;
  letter-spacing:.14em; font-size:.75rem; }
.nav a { color:var(--dim); text-decoration:none; }
.nav a:hover { color:var(--accent); }
article.about { margin-top:1.4rem; }
article.about p { margin:0 0 1rem; }
article.about p:first-child { font-size:1.15rem; }
@media (max-width:600px) { .wrap { padding:1rem .8rem 3rem; } }