/* =========================================================================
   Lorcappa — blog.css  •  article typography for deck subpages ONLY.
   Loaded on top of css/style.css (which handles theme, header, footer).
   Deck pages are deliberately simple: text, small images, lists, tables,
   and captioned figures. Nothing here needs JavaScript.
   ========================================================================= */

.article {
  max-width: 780px;
  margin: 0 auto;
  padding: 8px 18px 30px;
}

.article .back {
  display: inline-block;
  margin: 4px 0 14px;
  font-size: .9rem;
  text-decoration: none;
}
.article .back:hover { text-decoration: underline; }

.article .post-meta {
  margin: 0 0 4px;
  font-size: .85rem;
  color: var(--text-muted);
}

.article h1 {
  font-family: var(--font-head);
  font-size: clamp(1.5rem, 5.5vw, 2.2rem);
  line-height: 1.2;
  margin: 0 0 12px;
  text-shadow: 0 2px 18px var(--glow);
}
.article h2 {
  font-family: var(--font-head);
  font-size: clamp(1.15rem, 4vw, 1.45rem);
  margin: 28px 0 8px;
  color: var(--accent);
}
.article p { margin: 0 0 14px; }
.article ul, .article ol { margin: 0 0 14px; padding-left: 1.4em; }
.article li { margin: 4px 0; }

/* The full decklist image. Wrapped in a link to the original file so
   readers can zoom into card text. */
.article figure {
  margin: 18px 0;
}
.article figure img {
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
}
.article figcaption {
  margin-top: 6px;
  font-size: .8rem;
  color: var(--text-muted);
  text-align: center;
}

/* Simple responsive table (e.g. matchup chart): the wrapper scrolls if the
   table is wider than a phone screen, so the page itself never pans. */
.table-scroll { overflow-x: auto; margin: 0 0 14px; }
.article table {
  border-collapse: collapse;
  width: 100%;
  font-size: .92rem;
}
.article th, .article td {
  padding: 8px 10px;
  border: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
}
.article th { background: var(--surface-2); color: var(--accent); }
.article tr:nth-child(even) td { background: var(--surface); }