/* Blog uses the same ivory/emerald editorial system as content pages.
   Scoped additions only; no images or new fonts, no game CSS changed. */
body.blog-page .content-hero { padding-bottom: 38px; }
body.blog-page .content-hero h1 { max-width: 980px; margin-left: auto; margin-right: auto; }
body.blog-page .content-article { padding-top: 10px; }
.blog-list { width: 100%; }
.content-article .blog-list-item { margin: 0; padding: 28px 0 40px; border-bottom: 1px solid var(--content-line); }
.content-article .blog-list-item:first-child { padding-top: 0; }
.content-article .blog-list-item:last-child { border-bottom: none; }
.blog-list-meta, .blog-byline {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  color: var(--content-ink-faint); font-size: 11px; line-height: 1.6;
}
.blog-list-meta > span:first-child { color: var(--content-gold); text-transform: uppercase; letter-spacing: .14em; font-weight: 750; }
.blog-byline { margin: 0 0 28px; padding-bottom: 18px; border-bottom: 1px solid var(--content-line); }
.blog-byline a { color: var(--content-ink-soft); }
.content-article .blog-list-item h2 { margin: 13px 0 12px; font: 540 clamp(26px, 4vw, 34px)/1.25 "Fraunces", Georgia, serif; }
.blog-list-item h2 a { color: var(--content-ink); text-decoration: none; }
.blog-list-item h2 a:hover { color: var(--content-emerald); text-decoration: underline; text-underline-offset: 5px; }
.blog-list-item p { max-width: 65ch; margin-bottom: 13px; }
.content-article a.blog-read-more { font-size: 12px; font-weight: 750; text-decoration: none; }
.blog-read-more span { margin-left: 5px; }
.blog-table-scroll {
  width: 100%; max-width: 100%; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: rgba(23, 61, 49, .25) transparent;
  margin: 22px 0 28px;
}
.blog-table-scroll:focus-visible { outline: 2px solid var(--content-gold); outline-offset: 2px; }
.blog-table-scroll .comparison-table { margin: 0; min-width: 570px; }
.blog-table-scroll .comparison-table th, .blog-table-scroll .comparison-table td { vertical-align: top; line-height: 1.65; }
.blog-table-scroll .comparison-table th[scope="row"] { width: 29%; color: var(--content-ink); font-weight: 720; }
.blog-table-scroll .comparison-table caption {
  text-align: left; caption-side: bottom; font-size: 11px;
  padding: 10px 2px 0; color: var(--content-ink-faint);
}
.blog-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:24px 0 28px; }
.blog-stats > div { padding:21px 14px; border:1px solid var(--content-line); border-radius:12px; background:rgba(255,255,255,.42); }
.blog-stats strong { display:block; color:var(--content-emerald); font:540 clamp(23px,3vw,30px)/1.15 "Fraunces",Georgia,serif; }
.blog-stats span { display:block; margin-top:6px; color:var(--content-ink-soft); font-size:11px; line-height:1.5; }
.blog-sources { padding-top:20px; border-top:1px solid var(--content-line); }
.blog-sources li { font-size:13px; line-height:1.75; }
/* Keep the article column inside the mobile viewport. The tables can scroll
   inside .blog-table-scroll without imposing their 510px min-width on the grid. */
@media(max-width:760px) {
  body.blog-page .content-layout--with-toc {
    grid-template-columns: minmax(0, 1fr);
  }
  body.blog-page .content-layout--with-toc .content-article,
  body.blog-page .content-layout--with-toc .content-toc {
    min-width: 0;
  }
}

@media(max-width:600px) {
  body.blog-page .content-hero { padding-top: 66px; padding-bottom: 28px; }
  .blog-stats { gap:7px; }
  .blog-stats > div { padding:16px 11px; }
  .blog-stats strong { font-size: 22px; }
  .blog-table-scroll .comparison-table { min-width: 510px; }
}


/* --- Curated browser games for seniors -----------------------------------
   Scoped to one editorial guide; the rest of the blog and game are unchanged.
*/
.senior-games { --senior-border: rgba(23, 49, 41, .14); }
.senior-games-opening {
  font-size: 17px !important;
  line-height: 1.78 !important;
  color: var(--content-ink) !important;
}
.senior-games .senior-section-kicker {
  font: 800 10px/1.5 "Manrope", sans-serif;
  color: var(--content-gold);
  letter-spacing: .16em;
  text-transform: uppercase;
  margin: 0 0 9px;
}
.senior-games-section { scroll-margin-top: 30px; }
.senior-games .senior-games-table {
  min-width: 670px;
  border: 1px solid var(--senior-border);
  border-radius: 10px;
  overflow: hidden;
}
.senior-games-table thead th { background: #e7e9dd; color: var(--content-emerald); }
.senior-games-table th[scope="row"] { color: var(--content-ink); }
.senior-games-table-feature { background: rgba(230, 238, 227, .56); }
.senior-games .senior-you {
  display: inline-block; margin: 4px 0 2px 5px;
  border: 1px solid rgba(34, 92, 68, .18); border-radius: 99px;
  padding: 1px 7px; background: #dcebe0; color: #1e553c;
  font: 800 9px/1.7 "Manrope", sans-serif; text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
}
.senior-game-heading { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.senior-game-heading > div:last-child { flex: 1; min-width: 0; }
.senior-games .senior-game-heading h2 {
  margin: 0 0 12px;
  font-size: clamp(27px, 4vw, 33px);
}
.senior-game-symbol {
  flex: 0 0 94px; width: 94px; height: 94px;
  border: 1px solid rgba(20, 55, 42, .15);
  border-radius: 17px;
  display: grid; place-items: center;
  overflow: hidden; position: relative;
  box-shadow: 0 8px 18px rgba(18, 37, 29, .065), inset 0 1px 0 rgba(255,255,255,.62);
  font-family: "Fraunces", Georgia, serif;
}
.senior-game-symbol--cards { background: linear-gradient(140deg, #1d513c, #103529); display: flex; gap: 0; justify-content: center; }
.senior-game-symbol--cards span {
  width: 43px; height: 59px; display: grid; place-items: center;
  background: #fffaf0; border: 1px solid rgba(19, 48, 39, .15); border-radius: 6px;
  color: #ad443a; font: 670 28px/1 "Fraunces",Georgia,serif;
  box-shadow: 0 6px 10px rgba(0,0,0,.20);
}
.senior-game-symbol--cards span:first-child { transform: rotate(-13deg) translateX(9px); color: #1d4338; }
.senior-game-symbol--cards span:last-child { transform: rotate(11deg) translateX(-5px); }
.senior-game-symbol--numbers {
  background: #eef0e7; display: grid;
  grid-template-columns: repeat(2, 28px); grid-template-rows: repeat(2, 28px);
  gap: 3px; align-content: center; justify-content: center;
}
.senior-game-symbol--numbers span {
  display: grid; place-items: center;
  background: #fffdf7; border: 1px solid #cdd8cc; color: #315747;
  font: 700 20px/1 "Manrope",sans-serif;
}
.senior-game-symbol--puzzle { background: linear-gradient(140deg,#dbd3bf,#eae5d4); color: #30624c; font-size: 73px; }
.senior-game-symbol--letters { 
  background: #e3e9dc; display: grid; grid-template-columns: repeat(2,31px);
  grid-template-rows: repeat(2,31px); gap: 2px; align-content: center; justify-content: center;
}
.senior-game-symbol--letters span {
  display:grid; place-items:center;
  background:#f9faf0; border:1px solid #d5ddce;
  color:#35684d; font:750 15px/1 "Manrope",sans-serif;
}
.senior-game-symbol--quordle {
  display: grid; grid-template-columns: repeat(2, 31px);
  grid-template-rows: repeat(2, 31px); gap: 4px;
  align-content: center; justify-content: center;
  background: #edf0e9;
}
.senior-game-symbol--quordle span { border-radius: 4px; background: #58735e; }
.senior-game-symbol--quordle span:nth-child(2) { background: #ad9255; }
.senior-game-symbol--quordle span:nth-child(3) { background: #a1afa6; }
.senior-game-symbol--quordle span:nth-child(4) { background: #2b5947; }
.senior-game-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.senior-game-tags span {
  padding: 4px 9px; border: 1px solid rgba(23,49,41,.12);
  border-radius: 100px; color: #486a56; background: rgba(255,255,255,.46);
  font: 680 10px/1.5 "Manrope",sans-serif;
}
.senior-action-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 22px 0 24px; }
.senior-games a.senior-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  width: fit-content; max-width: 100%;
  border: 1px solid #cbd7c9; border-radius: 9px; padding: 12px 16px;
  background: #f7f8f2; color: #214b37;
  font: 780 12px/1.45 "Manrope",Arial,sans-serif;
  text-align: center; text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.senior-games a.senior-button:hover {
  transform: translateY(-1px); background:#fff; box-shadow: 0 5px 12px rgba(18,52,36,.08);
}
.senior-games a.senior-button:focus-visible { outline: 3px solid #b18a42; outline-offset: 3px; }
/* Reuse the existing .site-nav__play component from content.css for the
   primary CTA. It already provides consistent background/hover/contrast. */
.senior-games a.site-nav__play {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: fit-content;
  max-width: 100%;
  padding: 12px 16px;
  font: 750 12px/1.45 "Manrope",Arial,sans-serif;
  text-decoration: none;
  text-align: center;
}
.senior-games a.site-nav__play:focus-visible {
  outline: 3px solid var(--content-gold);
  outline-offset: 3px;
}
.senior-games a.senior-button--external { margin: 5px 0 14px; }
.senior-games .senior-games-verdict {
  border-left: 2px solid #b89a63; padding: 4px 0 4px 15px; margin-top: 12px;
  font-size: 13px; line-height: 1.75;
}
.senior-games .senior-steps { padding-left: 24px; }
.senior-steps li { padding-left: 6px; margin-bottom: 13px; }
.senior-steps li::marker { color: #2a7351; font-weight: bold; }
.senior-games .senior-final-actions {
  margin: 25px 0 6px;
}
.senior-games .senior-editorial-note {
  margin-top: 42px; padding-top: 19px;
  border-top: 1px solid var(--content-line);
  color: var(--content-ink-faint); font-size: 12px; line-height: 1.76;
}
@media(max-width:600px) {
  .senior-game-heading { gap: 12px; align-items: flex-start; }
  .senior-game-symbol { flex-basis: 62px; width: 62px; height: 62px; border-radius: 11px; }
  .senior-game-symbol--cards span { width: 30px; height: 42px; font-size: 20px; }
  .senior-game-symbol--numbers { grid-template-columns:repeat(2,20px); grid-template-rows:repeat(2,20px); gap:2px; }
  .senior-game-symbol--numbers span { font-size: 14px; }
  .senior-game-symbol--letters { grid-template-columns:repeat(2,21px); grid-template-rows:repeat(2,21px); }
  .senior-game-symbol--letters span { font-size: 11px; }
  .senior-game-symbol--puzzle { font-size: 49px; }
  .senior-game-symbol--quordle { grid-template-columns:repeat(2,21px); grid-template-rows:repeat(2,21px); }
  .senior-games .senior-game-heading h2 { font-size: 26px; }
  .senior-game-tags { gap: 4px; }
  .senior-game-tags span { font-size: 9px; padding: 3px 7px; }
  .senior-games .senior-games-table { min-width: 610px; }
  .senior-games a.senior-button, .senior-games a.site-nav__play { width: 100%; }
}


/* Authentic publisher favicons and linked game thumbnails.
   Brand images use the source site's current favicon via Google's favicon service. */
.senior-game-logo-link {
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.senior-game-logo-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(18,37,29,.13);
}
.senior-game-logo-link:focus-visible {
  outline: 3px solid #3e8b67;
  outline-offset: 4px;
}
.senior-game-symbol--brand {
  background: #ffffff;
  padding: 13px;
}
.senior-game-symbol--brand img {
  display: block;
  width: 64px;
  height: 64px;
  object-fit: contain;
}
@media (max-width: 640px) {
  .senior-game-symbol--brand { padding: 8px; }
  .senior-game-symbol--brand img { width: 44px; height: 44px; }
}