/* Technesium readability layer
   The inherited theme set the content container to 2000px, which gave ~1185px text lines
   (roughly 170 characters) and made every image render over half a screen tall.
   This pulls the reading column back to a comfortable measure and stops images dominating. */

:root {
  --tech-measure: 760px;   /* ~70 characters at the body size */
  --tech-media:   760px;
}

/* --- reading column ------------------------------------------------------ */
.inside-article > .entry-header,
.inside-article > .entry-content,
.inside-article > .entry-summary,
.inside-article > .entry-meta,
.inside-article > .post-image,
.page-header,
.paging-navigation .nav-links {
  max-width: var(--tech-measure);
  margin-left: auto;
  margin-right: auto;
}

.entry-content > * {
  max-width: var(--tech-measure);
}

/* --- images -------------------------------------------------------------- */

/* Featured banner: scaled, never cropped. These images have their title text baked in,
   so object-fit:cover would slice the words off. Height is capped instead. */
.post-image img {
  max-width: min(100%, var(--tech-media));
  max-height: 420px;
  width: auto;
  height: auto;
  display: block;
  margin: 1.4em auto;
  border-radius: 4px;
}

/* In-article images: never wider than the column, never taller than ~half a screen.
   Height is the binding constraint for square/portrait diagrams, so scale by height
   and let the width follow, rather than cropping anything. */
.entry-content img {
  max-width: min(100%, var(--tech-media));
  max-height: 440px;
  width: auto;
  height: auto;
  display: block;
  margin: 1.7em auto;
  border-radius: 4px;
}

/* Tall portrait screenshots and the "Where to tap" cards read fine much smaller. */
.entry-content img[src*="-steps"],
.entry-content img[src*="x1024"],
.entry-content img[src*="x1536"],
.entry-content img[src*="x1113"],
.entry-content img[src*="x1279"] {
  max-width: 320px;
  max-height: 520px;
}

.entry-content img[src*="-steps"] { border: 1px solid #e3e7ec; }

/* --- typography ---------------------------------------------------------- */
.entry-content p { line-height: 1.65; }
.entry-content h2 { margin-top: 1.6em; }

@media (max-width: 820px) {
  .entry-content img[src*="-steps"],
  .entry-content img[src*="x1024"],
  .entry-content img[src*="x1536"],
  .entry-content img[src*="x1113"] { max-width: 100%; }
  .post-image img { max-height: 260px; }
}