/* AADTAK Satire (/satire). Deliberately unlike the news pages: comic-strip
   yellow and black, chunky borders, tilted SATIRE stamps. If it ever looks
   like a news page, the design has failed. */
:root {
  --sat-yellow: #ffd60a;
  --sat-paper: #fff8d6;
  --sat-ink: #111111;
  --sat-pink: #ff3d7f;
  --sat-muted: #4a4535;
  --sat-head: 'Inter Tight', 'Mukta', 'Noto Sans Devanagari', system-ui, sans-serif;
  --sat-body: 'Inter', 'Mukta', 'Noto Sans Devanagari', system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: hidden; }
body.sat-page {
  background-color: var(--sat-paper);
  background-image: radial-gradient(rgba(17,17,17,.07) 1.2px, transparent 1.3px);
  background-size: 14px 14px;
  color: var(--sat-ink); font: 400 16px/1.55 var(--sat-body);
}
.sat-page a { color: inherit; }

/* masthead: aadtak.css paints header:has(.at-wm) black with a red rule */
header.sat-top:has(.at-wm) { border-bottom: 4px solid var(--sat-yellow) !important; }
.sat-top {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
}
.sat-top .sat-home { text-decoration: none; }
.sat-top .at-wm { font-size: 24px; }
.sat-top-label {
  background: var(--sat-yellow); color: var(--sat-ink) !important; font: 900 12px/1 var(--sat-head);
  letter-spacing: .08em; padding: 6px 9px; border-radius: 4px; transform: rotate(-3deg); white-space: nowrap;
}
.sat-back { margin-left: auto; font: 700 13px/1 var(--sat-head); color: rgba(255,255,255,.85) !important; text-decoration: none; white-space: nowrap; }
.sat-back:hover { color: #fff !important; text-decoration: underline; }

.sat-main { max-width: 980px; margin: 0 auto; padding: 22px 16px 40px; }

.sat-hero {
  position: relative; background: var(--sat-yellow); border: 3px solid var(--sat-ink);
  border-radius: 18px; box-shadow: 6px 6px 0 var(--sat-ink); padding: 26px 22px 22px; margin-bottom: 22px;
}
.sat-title {
  font: 900 italic clamp(40px, 9vw, 76px)/.95 var(--sat-head) !important; letter-spacing: -0.04em !important;
  margin: 14px 0 10px; text-transform: uppercase;
}
.sat-title span { font-family: 'Mukta', var(--sat-head); font-style: normal; color: var(--sat-pink); -webkit-text-stroke: 2px var(--sat-ink); text-transform: none; }
.sat-lede { font: 600 18px/1.45 var(--sat-head); margin: 0 0 12px; max-width: 46ch; }
.sat-warn {
  margin: 0; background: #fff; border: 2px dashed var(--sat-ink); border-radius: 10px;
  padding: 10px 12px; font-size: 14px; line-height: 1.5;
}
.sat-warn a { font-weight: 700; }

.sat-stamp {
  display: inline-block; background: var(--sat-ink); color: var(--sat-yellow);
  font: 900 11px/1 var(--sat-head); letter-spacing: .1em; padding: 6px 8px 5px; border-radius: 3px;
  transform: rotate(-2deg); white-space: nowrap;
}
.sat-stamp-big { font-size: 14px; padding: 8px 11px 7px; transform: rotate(-4deg); }

.sat-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.sat-tags button {
  font: 700 13px/1 var(--sat-head); color: var(--sat-ink); background: #fff; cursor: pointer;
  border: 2px solid var(--sat-ink); border-radius: 999px; padding: 8px 12px;
}
.sat-tags button.on, .sat-tags button:hover { background: var(--sat-ink); color: var(--sat-yellow); }

.sat-feed { display: grid; grid-template-columns: 1fr; gap: 18px; }
@media (min-width: 760px) { .sat-feed { grid-template-columns: 1fr 1fr; } }
.sat-card {
  background: #fff; border: 3px solid var(--sat-ink); border-radius: 16px; box-shadow: 5px 5px 0 var(--sat-ink);
  padding: 16px 16px 14px; display: flex; flex-direction: column; min-width: 0; scroll-margin-top: 16px;
}
.sat-card:nth-child(4n+2) { box-shadow: 5px 5px 0 var(--sat-pink); }
.sat-card:nth-child(4n+3) { box-shadow: 5px 5px 0 #ffb400; }
.sat-card.sat-hit { outline: 4px solid var(--sat-pink); outline-offset: 3px; }
.sat-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font: 700 12px/1 var(--sat-head); color: var(--sat-muted); }
.sat-tag { background: var(--sat-yellow); color: var(--sat-ink); border-radius: 999px; padding: 5px 9px; }
.sat-card-meta time { margin-left: auto; }
.sat-head { font: 800 21px/1.22 var(--sat-head) !important; letter-spacing: -0.015em !important; margin: 12px 0 6px; }
.sat-head a { text-decoration: none; }
.sat-head a:hover { text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--sat-yellow); }
.sat-hi { font: 700 16px/1.4 'Mukta', 'Noto Sans Devanagari', sans-serif; color: var(--sat-muted); margin: 0 0 8px; }
.sat-body { margin: 4px 0 12px; font-size: 15.5px; line-height: 1.6; }
.sat-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sat-share {
  font: 700 13px/1 var(--sat-head); background: var(--sat-yellow); color: var(--sat-ink); cursor: pointer;
  border: 2px solid var(--sat-ink); border-radius: 999px; padding: 8px 12px;
}
.sat-share:hover { background: var(--sat-ink); color: var(--sat-yellow); }
.sat-fake { font: italic 600 12px/1 var(--sat-head); color: var(--sat-muted); }
.sat-loading { font: 600 16px/1.5 var(--sat-head); text-align: center; padding: 30px 0; grid-column: 1 / -1; }

.sat-foot {
  background: var(--sat-ink); color: #f5f0d8; padding: 22px 16px 34px; text-align: center;
  font-size: 13.5px; line-height: 1.6; border-top: 4px solid var(--sat-yellow);
}
.sat-foot p { max-width: 760px; margin: 0 auto 8px; }
.sat-foot a { color: var(--sat-yellow); }
.sat-disc b { color: var(--sat-yellow); }

@media (max-width: 520px) {
  .sat-tags { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px 16px; padding: 2px 16px 4px; }
  .sat-tags::-webkit-scrollbar { display: none; }
  .sat-tags button { flex: 0 0 auto; }
  .sat-top { gap: 8px; padding: 10px 16px; }
  .sat-top .at-wm { font-size: 20px; }
  .sat-top-label { font-size: 10.5px; padding: 5px 7px; }
  .sat-back { font-size: 12px; }
  .sat-hero { padding: 20px 16px 16px; box-shadow: 4px 4px 0 var(--sat-ink); }
  .sat-lede { font-size: 16px; }
  .sat-head { font-size: 19px; }
  .sat-card { box-shadow: 4px 4px 0 var(--sat-ink); }
}