/* Theme Park Alert — the blog: index cards, tag pills, and the post itself.
   Shares every colour and type token with the rest of the site; nothing new is
   invented here. */

/* ---------- tag pills ---------- */
.tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(28px,3.6vw,42px); }
.tag{
  display:inline-block; padding:7px 14px; border-radius:999px;
  border:2px solid var(--sky-line); background:var(--white);
  font-family:var(--font-display); font-weight:500; font-size:var(--fs-small);
  color:var(--ink-2); text-decoration:none;
  transition:border-color .2s ease, color .2s ease, transform .2s var(--ease-ride);
}
.tag:hover{ border-color:var(--sky); color:var(--ink); transform:translateY(-2px); }
.tag.on{ background:var(--pink-deep); border-color:var(--pink-deep); color:#FFF; }
.tag-row-foot{ margin:36px 0 0; }

/* ---------- the card grid ---------- */
.post-grid{
  display:grid; gap:22px;
  grid-template-columns:repeat(auto-fill, minmax(290px, 1fr));
}
.card{
  border:2px solid var(--sky-line); border-radius:var(--radius); background:var(--white);
  overflow:hidden;
  box-shadow:0 16px 36px -28px rgba(23,54,79,.5);
  transition:transform .35s var(--ease-ride), border-color .25s ease, box-shadow .35s ease;
}
.card:hover{
  transform:translateY(-6px); border-color:var(--sky);
  box-shadow:0 30px 54px -30px rgba(23,54,79,.5);
}
.card-link{ display:flex; flex-direction:column; height:100%; text-decoration:none; color:inherit; }
.card-shot{ aspect-ratio:16/9; background:var(--sky-wash); overflow:hidden; }
.card-shot img, .card-shot picture{ display:block; width:100%; height:100%; object-fit:cover; }
.card-shot-empty{
  display:grid; place-items:center;
  background:linear-gradient(135deg, var(--sky-wash), var(--sand));
  color:var(--sky); font-size:2.4rem;
}
.card-body{ padding:20px 20px 22px; display:flex; flex-direction:column; gap:10px; flex:1; }
.card-title{ font-family:var(--font-display); font-weight:600; font-size:var(--fs-h3); color:var(--ink); }
.card-blurb{ color:var(--ink-dim); font-size:.94rem; flex:1; }
.card-meta{
  font-family:var(--font-mono); font-size:var(--fs-micro);
  color:var(--ink-far); text-transform:uppercase; letter-spacing:.06em;
}
.card:hover .card-title{ color:var(--pink-deep); }

/* ---------- pagination ---------- */
.pager{ display:flex; align-items:center; justify-content:center; gap:16px; margin-top:44px; }
.pager-at{ font-family:var(--font-mono); font-size:var(--fs-small); color:var(--ink-dim); }

/* ---------- one post ---------- */
.post-head{ max-width:62ch; }
.post-crumb{
  font-family:var(--font-display); font-weight:500; font-size:var(--fs-small);
  color:var(--ink-dim); letter-spacing:.04em; margin-bottom:14px;
}
.post-crumb a{ color:var(--sky-deep); }
.post-stand{ margin-top:18px; font-size:1.18rem; color:var(--ink-2); line-height:1.6; }
.post-meta{
  margin-top:18px; font-family:var(--font-mono); font-size:var(--fs-micro);
  color:var(--ink-far); text-transform:uppercase; letter-spacing:.07em;
}
.post-hero{
  width:100%; max-width:980px; margin:clamp(32px,4vw,52px) auto 0; padding-inline:20px;
}
.post-hero img{ display:block; width:100%; height:auto; border-radius:var(--radius); }
.post-hero figcaption{
  margin-top:10px; font-size:var(--fs-small); color:var(--ink-dim); text-align:center;
}

/* ---------- the body itself ----------
   Written by hand in Markdown, so every tag the renderer can emit is styled
   here. Nothing else can appear: the renderer escapes the rest. */
.prose{ margin-top:clamp(32px,4vw,52px); font-size:1.06rem; line-height:1.72; color:var(--ink-2); }
.prose > * + *{ margin-top:1.15em; }
.prose h2, .prose h3, .prose h4, .prose h5, .prose h6{
  font-family:var(--font-display); font-weight:600; color:var(--ink); line-height:1.25;
  margin-top:1.9em;
}
.prose h2{ font-size:clamp(1.5rem,3vw,2rem); }
.prose h3{ font-size:clamp(1.2rem,2.2vw,1.5rem); }
.prose h4{ font-size:1.12rem; }
.prose a{ color:var(--pink-deep); text-decoration:underline; text-underline-offset:3px; }
.prose a:hover{ color:var(--pink-dark); }
.prose strong{ color:var(--ink); font-weight:700; }
.prose ul, .prose ol{ padding-left:1.3em; display:flex; flex-direction:column; gap:.5em; }
.prose li::marker{ color:var(--sky-mid); }
.prose blockquote{
  margin-inline:0; padding:4px 0 4px 22px; border-left:4px solid var(--pink);
  color:var(--ink); font-size:1.12rem;
}
.prose code{
  font-family:var(--font-mono); font-size:.88em;
  background:var(--sky-wash); padding:2px 6px; border-radius:6px; color:var(--sky-deep);
}
.prose pre{
  background:var(--ink); color:var(--on-dark-text); padding:18px 20px;
  border-radius:var(--radius); overflow-x:auto; font-size:.9rem;
}
.prose pre code{ background:none; padding:0; color:inherit; }
.prose hr{ border:0; border-top:2px dashed var(--sky-line); margin-block:2.2em; }
.prose figure{ margin-inline:0; }
.prose img{ display:block; width:100%; height:auto; border-radius:var(--radius); }
.prose figcaption{
  margin-top:10px; font-size:var(--fs-small); color:var(--ink-dim); text-align:center;
}
.prose table{ width:100%; border-collapse:collapse; }

/* ---------- the ask at the foot of a post ---------- */
.post-cta{
  margin-top:clamp(40px,5vw,64px); padding:26px 24px;
  border:2px dashed var(--sky-line); border-radius:var(--radius); background:var(--sand);
}
.post-cta p{ color:var(--ink-2); margin-bottom:18px; }
.post-cta b{ color:var(--ink); }

@media (max-width: 560px){
  .post-grid{ grid-template-columns:1fr; }
  .pager{ flex-direction:column; gap:12px; }
}