/* The typography of a generated article.
 *
 * Every hand-made page on this site carries its own stylesheet, loaded by post
 * ID from inc/page-assets.php. That works for a fixed list of pages and cannot
 * work for articles: there is one per day, and nobody is going to write a
 * stylesheet for each.
 *
 * So until 2026-09-05 an article loaded no stylesheet at all. The container
 * class and the section classes were in the markup and nothing rendered them.
 * The article inherited the theme's defaults instead: text set the full width
 * of the content column, the theme's own leading, and no space between
 * paragraphs. Beside the article written by hand in June — 900px measure,
 * line-height 1.8 — it read as cramped, and it was.
 *
 * The values here are that June article's, moved rather than invented:
 *
 *   .uwb{max-width:900px;margin:0 auto;line-height:1.8}
 *   .uwb h2{font-size:28px;font-weight:800;margin:48px 0 16px;letter-spacing:-.5px}
 *   .uwb p{font-size:16px;color:#334155;margin-bottom:20px}
 *
 * What is new is only what the generator produces and that page did not have:
 * tables, checklists, process flows, and the Japanese half.
 */

/* The measure needs !important, which is the idiom this codebase already uses
 * for anything that has to beat the theme (see the header of the extracted page
 * stylesheets: "the ones that fight the theme were already !important before
 * they moved"). Without it the container computes to 1200px — the theme sets it
 * through a custom property, so the value never appears in any rule text and a
 * plain `.uw-pg{max-width:900px}` loses.
 *
 * 900px is not a preference. It is the measure of the article written by hand
 * in June, which is the one this was compared against.
 */
.uw-pg {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #0F172A;
  /* `width`, not `max-width`. The theme pins max-width to 1200px through a
     custom property, so the value appears in no rule text and even
     `max-width:900px !important` loses to it — measured on the live page.
     Setting a different property sidesteps the argument entirely: a width of
     900px is not restricted by a max-width of 1200px. */
  width: min(900px, 100%);
  margin-left: auto;
  margin-right: auto;
  line-height: 1.8;
}

/* Japanese needs more room between lines than English at the same size, and
   the two alternate paragraph by paragraph here. Setting it on the span rather
   than the block keeps the English measure unchanged. */
.uw-pg .jp {
  line-height: 1.95;
  font-feature-settings: "palt" 1;
}

.uw-pg h1 {
  font-size: 34px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.6px;
  margin: 0 0 24px;
}

.uw-pg h2 {
  font-size: 28px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.5px;
  margin: 48px 0 16px;
}

.uw-pg h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.45;
  margin: 32px 0 12px;
}

.uw-pg p {
  font-size: 16px;
  color: #334155;
  margin: 0 0 20px;
}

.uw-pg strong { color: #0F172A; font-weight: 700; }

.uw-pg a {
  color: #2563EB;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* A section is the unit the generator writes in. The rule above the heading
   does the work a blank line cannot at this size. */
.uw-pg .uwe-s { margin: 0 0 8px; }
.uw-pg .uwe-s + .uwe-s { border-top: 1px solid #F1F5F9; padding-top: 8px; }

.uw-pg ul,
.uw-pg ol { margin: 0 0 24px; padding-left: 24px; }
.uw-pg li { font-size: 16px; color: #334155; margin: 0 0 10px; }

/* Tables carry the comparisons. They scroll rather than overflow: the site is
   read on 390px phones and a 3-column table does not fit one. */
.uw-pg table {
  width: 100%;
  border-collapse: collapse;
  margin: 28px 0;
  font-size: 15px;
  display: block;
  overflow-x: auto;
}
.uw-pg th,
.uw-pg td {
  border: 1px solid #E2E8F0;
  padding: 12px 14px;
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}
.uw-pg th {
  background: #F8FAFC;
  font-weight: 700;
  color: #0F172A;
  white-space: nowrap;
}
.uw-pg td { color: #334155; }

/* A checklist is a list the reader is meant to act on, so it is given a
   surface of its own rather than being one more run of bullets. */
.uw-pg .uwe-checklist {
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px 24px 20px 44px;
  margin: 28px 0;
}
.uw-pg .uwe-checklist li { margin-bottom: 12px; }
.uw-pg .uwe-checklist li:last-child { margin-bottom: 0; }

.uw-pg .uwe-process,
.uw-pg .uwe-process-flow { margin: 28px 0; }
.uw-pg .uwe-process li,
.uw-pg .uwe-process-flow li { margin-bottom: 14px; }

.uw-pg .uwe-compare { margin: 28px 0; }

/* Photographs. They are here for reading comfort and count for nothing against
   the substantive-element requirement — the tables and lists still have to be
   there on their own. The caption carries the photographer and the notice that
   the picture is illustrative, which is what stops a stock photograph on a
   recruiting site being read as a real employee or a real candidate. */
.uw-pg .uwe-photo {
  margin: 36px 0;
}
.uw-pg .uwe-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}
.uw-pg .uwe-photo figcaption {
  font-size: 12px;
  color: #64748B;
  line-height: 1.6;
  margin-top: 8px;
}

/* The one thing the article is asking the reader to do. */
.uw-pg .uwe-cta,
.uw-pg .uwe-cta-link {
  display: inline-block;
  background: #2563EB;
  color: #fff;
  padding: 12px 22px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  margin: 8px 0 0;
  min-height: 44px;
  line-height: 20px;
  box-sizing: border-box;
}
.uw-pg .uwe-cta:hover,
.uw-pg .uwe-cta-link:hover { background: #1D4ED8; }
.uw-pg .uwe-cta span,
.uw-pg .uwe-cta-link span { color: #fff !important; }
/* Inside the blue block, a link and a <strong> kept their own colours — link
   blue (#2563EB, the block's own background) and the body's dark navy — so the
   contact link was invisible and the lead sentence hard to read on posts 178,
   205 and 216 (2026-10-02). White on #2563EB is 5.2:1. The underline is what
   still marks the link as a link once it is the same colour as the text. */
.uw-pg .uwe-cta a,
.uw-pg .uwe-cta strong { color: #fff !important; }
.uw-pg .uwe-cta a { text-decoration: underline; text-underline-offset: 3px; }
.uw-pg .uwe-cta a:hover { text-decoration-thickness: 2px; }
.uw-pg .uwe-cta li::marker { color: #fff; }

@media (max-width: 768px) {
  .uw-pg h1 { font-size: 27px; }
  .uw-pg h2 { font-size: 23px; margin: 36px 0 14px; }
  .uw-pg h3 { font-size: 18px; }
  .uw-pg p,
  .uw-pg li { font-size: 16px; }
}