/* ==========================================================================
   OMA ARTICLE PASS  v1  —  17 Sep 2026
   The article/blog sibling of assets/css/premium.css.

   Why this file exists: premium.css says "Homepage only" and it is. Every
   rule it carries for type scale, tracking, line length and glows names
   homepage classes, so the nine pages that use <body class="blog-page">
   were never enrolled in the design system. Measured on 17 Sep 2026, the
   article template was running:

       H1    36px Inter      (homepage: 74px Oswald)
       body  15px            (homepage: 18px)
       line  ~100 characters (premium.css section 3: "nothing wider than ~62")
       and 5 of the 10 AI-design tells from his own checklist.

   Loaded from include/links.php for the blog-page templates only, AFTER
   style.css and BEFORE each page's own inline <style>, so every rule here
   carries `html` + !important exactly like premium.css does.

   Roll back: delete the one conditional <link> block in include/links.php.
   Nothing else changes.
   ========================================================================== */

:root{
  --art-fs-body  : 17px;
  --art-fs-lead  : 19px;
  --art-fs-small : 15px;
  --art-lh-body  : 1.72;
  --art-measure  : 580px;    /* ~66 characters at 17px Inter. Measured, not
                                assumed: 66ch resolved to 708px because Inter's
                                zero glyph is wide, which is 83 characters. */
  --art-display  : 'Oswald','Arial Narrow',Arial,sans-serif;
  --art-label    : rgba(255,255,255,.52);
}

/* --------------------------------------------------------------------------
   1. TYPE SCALE — body up, headings up more, so the hierarchy is visible.
      Was H2 22px / body 15px = 1.47x. A ratio that flat reads as one grey
      strip from top to bottom. Now 34/17 = 2.0x.
   -------------------------------------------------------------------------- */
html .blog-page .blog-paragraph,
html .blog-page .blog-faq-wrap .faq-answer,
html .blog-page .oma-src p,
html .blog-page .blog-content-wrap > ol,
html .blog-page .blog-content-wrap > ul{
  font-size: var(--art-fs-body) !important;
  line-height: var(--art-lh-body) !important;
}

html .blog-page .blog-intro-box{
  font-size: var(--art-fs-lead) !important;
  line-height: 1.6 !important;
}

/* the display face the rest of the site uses. The article template had it
   on the small uppercase labels and Inter on the headline, which is the
   pairing upside down. */
html .blog-page .blog-hero-title,
html .blog-page .blog-h2,
html .blog-page .blog-h3,
html .blog-page .blog-related-title,
html .blog-page .faq-question{
  font-family: var(--art-display) !important;
}

html .blog-page .blog-hero-title{
  font-size: clamp(40px, 5vw, 62px) !important;
  line-height: 1.06 !important;
  letter-spacing: -.028em !important;
  font-weight: 600 !important;
}
html .blog-page .blog-h2{
  font-size: clamp(30px, 3.1vw, 38px) !important;
  line-height: 1.16 !important;
  letter-spacing: -.018em !important;
  font-weight: 600 !important;
}
html .blog-page .blog-h3{
  font-size: 21px !important;
  line-height: 1.25 !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
}
html .blog-page .faq-question{
  font-size: 19px !important;
  letter-spacing: 0 !important;
  font-weight: 500 !important;
}

/* anchors from the contents list must not land under the fixed header */
html .blog-page .blog-h2{ scroll-margin-top: 96px !important; }

/* --------------------------------------------------------------------------
   2. LINE LENGTH — the rule premium.css already states, applied here.
      Tables stay full width on purpose: data wants width, prose does not,
      and the difference between the two is a real editorial signal.
   -------------------------------------------------------------------------- */
html .blog-page .blog-paragraph,
html .blog-page .blog-intro-box,
html .blog-page .blog-content-wrap > ol,
html .blog-page .blog-content-wrap > ul,
html .blog-page .oma-src p,
html .blog-page .faq-answer{
  max-width: var(--art-measure) !important;
}

/* --------------------------------------------------------------------------
   3. VERTICAL RHYTHM — a section break should be felt before it is read.
   -------------------------------------------------------------------------- */
html .blog-page .blog-h2{ margin-top: 68px !important; margin-bottom: 18px !important; }
html .blog-page .blog-h2 + .blog-paragraph{ margin-top: 0 !important; }
html .blog-page .blog-paragraph{ margin-bottom: 22px !important; }
html .blog-page .oma-tbl-wrap{ margin-top: 26px !important; margin-bottom: 34px !important; }

/* --------------------------------------------------------------------------
   4. AI-DESIGN TELLS — the same five premium.css removed from the homepage
      on 5 Sep, still live on the article template on 17 Sep.
   -------------------------------------------------------------------------- */

/* tell #1 + #8 — the eyebrow pill. Kill the chrome, keep the words. */
html .blog-page .blog-category-badge{
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  color: var(--art-label) !important;
  text-transform: none !important;
  letter-spacing: .01em !important;
  font-size: 15px !important;
}

/* tell #2 — the coloured status dot. This is the exact element he pointed at
   on the hero on 5 Sep. */
html .blog-page .blog-meta-dot{ display: none !important; }
html .blog-page .blog-meta-item{ color: rgba(255,255,255,.58) !important; }

/* tell #5 — coloured glows */
html .blog-page .blog-hero-glow,
html .blog-page .blog-cta-glow{ display: none !important; }

/* tell #8 — all-caps letter-spaced labels. 28 of them on one page. Table
   headers keep it, because a data table header is a label and reads as one.
   Everything that is really a heading goes back to sentence case. */
html .blog-page .blog-toc-title,
html .blog-page .blog-related-title,
html .blog-page .oma-src-h,
html .blog-page .blog-cta-tag,
html .blog-page .blog-related-card-cat{
  text-transform: none !important;
  letter-spacing: .01em !important;
}
html .blog-page .blog-toc-title,
html .blog-page .blog-related-title{
  font-family: var(--art-display) !important;
  font-size: 20px !important;
  font-weight: 600 !important;
}

/* tell #4 — three identical cards in a row. Symmetry is the tell: equal
   cells mean nobody decided which number mattered. One lead stat keeps the
   card; the other two become quiet text beside it. */
html .blog-page .blog-stats-row{
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1fr !important;
  gap: 0 !important;
  align-items: stretch !important;
}
html .blog-page .blog-stat-card{
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 4px 26px 4px 0 !important;
  text-align: left !important;
}
html .blog-page .blog-stat-card + .blog-stat-card{
  border-left: 1px solid rgba(255,255,255,.10) !important;
  padding-left: 26px !important;
}
html .blog-page .blog-stat-card-line{ display: none !important; }
html .blog-page .blog-stat-number{
  font-family: var(--art-display) !important;
  font-size: 30px !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  display: block !important;
  margin-bottom: 8px !important;
}
html .blog-page .blog-stat-card:first-child .blog-stat-number{
  font-size: 46px !important;
  color: #298dff !important;
}
html .blog-page .blog-stat-label{
  font-size: 14px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  color: rgba(255,255,255,.60) !important;
  max-width: 34ch !important;
}

/* --------------------------------------------------------------------------
   5. CONTENTS — twelve links used to eat a whole screen before the first
      sentence. Two columns, quieter, same links.
   -------------------------------------------------------------------------- */
html .blog-page .blog-toc-list{
  column-count: 2 !important;
  column-gap: 34px !important;
}
html .blog-page .blog-toc-list li{
  break-inside: avoid !important;
  font-size: 15px !important;
  margin-bottom: 9px !important;
}
@media (max-width: 767px){
  html .blog-page .blog-toc-list{ column-count: 1 !important; }
}

/* --------------------------------------------------------------------------
   6. PHONE — the measure rule does the work on desktop; on a phone the
      column is already narrow, so only the sizes need holding.
   -------------------------------------------------------------------------- */
@media (max-width: 575px){
  html .blog-page .blog-paragraph,
  html .blog-page .faq-answer{ font-size: 16.5px !important; line-height: 1.7 !important; }
  html .blog-page .blog-intro-box{ font-size: 17.5px !important; }
  html .blog-page .blog-stats-row{ grid-template-columns: 1fr !important; }
  html .blog-page .blog-stat-card{ padding: 14px 0 !important; }
  html .blog-page .blog-stat-card + .blog-stat-card{
    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,.10) !important;
    padding-left: 0 !important;
  }
  html .blog-page .blog-stat-card:first-child .blog-stat-number{ font-size: 38px !important; }
}

/* --------------------------------------------------------------------------
   7. THE SHORT ANSWER — the headline number before the reader scrolls.
      NerdWallet does this in 79 words; every page audited that ranked for a
      cost query had the figure above the fold.
   -------------------------------------------------------------------------- */
html .blog-page .oma-answer{
  border-left: 3px solid #298dff !important;
  padding: 4px 0 4px 22px !important;
  margin: 8px 0 34px !important;
  max-width: 640px !important;
}
html .blog-page .oma-answer-h{
  font-family: var(--art-display) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--art-label) !important;
  margin-bottom: 8px !important;
}
html .blog-page .oma-answer p{
  font-size: 19px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,.90) !important;
  margin: 0 !important;
}
html .blog-page .oma-answer strong{ color: #fff !important; }

/* --------------------------------------------------------------------------
   8. METHODOLOGY — named source, and what we could not find. Second most
      common thing the audited pages had and ordinary pages do not.
   -------------------------------------------------------------------------- */
html .blog-page .oma-method{
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 8px !important;
  padding: 22px 24px !important;
  margin: 0 0 38px !important;
  background: rgba(255,255,255,.02) !important;
}
html .blog-page .oma-method-h{
  font-family: var(--art-display) !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  margin-bottom: 10px !important;
}
html .blog-page .oma-method p{
  font-size: 15.5px !important;
  line-height: 1.68 !important;
  color: rgba(255,255,255,.72) !important;
  max-width: 68ch !important;
  margin: 0 0 12px !important;
}
html .blog-page .oma-method p:last-child{ margin-bottom: 0 !important; }

/* --------------------------------------------------------------------------
   9. CHARTS — drawn for this page from this page's own numbers.
   -------------------------------------------------------------------------- */
html .blog-page .oma-fig{ margin: 30px 0 38px !important; }
html .blog-page .oma-chart{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 8px !important;
  padding: 10px 6px !important;
}
html .blog-page .oma-fig figcaption{
  font-size: 13.5px !important;
  line-height: 1.6 !important;
  color: rgba(255,255,255,.52) !important;
  margin-top: 10px !important;
  max-width: 72ch !important;
}

/* --------------------------------------------------------------------------
   10. ESTIMATOR — the one "what about me?" control on the page.
   -------------------------------------------------------------------------- */
html .blog-page .oma-est{
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 8px !important;
  padding: 24px !important;
  margin: 26px 0 40px !important;
  background: rgba(255,255,255,.025) !important;
}
html .blog-page .oma-est-grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 18px 26px !important;
}
html .blog-page .oma-est label{
  display: block !important;
  font-size: 14px !important;
  color: rgba(255,255,255,.62) !important;
  line-height: 1.5 !important;
}
html .blog-page .oma-est select{
  display: block !important;
  width: 100% !important;
  margin-top: 7px !important;
  background: #0a121d !important;
  color: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  border-radius: 4px !important;
  padding: 10px 12px !important;
  font-size: 15px !important;
  font-family: Inter, Arial, sans-serif !important;
}
html .blog-page .oma-est-checks{
  display: block !important;
  margin-top: 9px !important;
  font-size: 15px !important;
  color: rgba(255,255,255,.86) !important;
}
html .blog-page .oma-est-checks span{ display: block !important; margin-bottom: 7px !important; }
html .blog-page .oma-est-checks input{ margin-right: 8px !important; accent-color: #298dff !important; }
html .blog-page .oma-est-out{
  margin-top: 22px !important;
  padding-top: 20px !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
html .blog-page .oma-est-num{
  font-family: var(--art-display) !important;
  font-size: 40px !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  color: #298dff !important;
}
html .blog-page .oma-est-why{
  font-size: 15px !important;
  line-height: 1.66 !important;
  color: rgba(255,255,255,.78) !important;
  margin-top: 10px !important;
  max-width: 64ch !important;
}
html .blog-page .oma-est-note{
  font-size: 13.5px !important;
  color: rgba(255,255,255,.48) !important;
  margin-top: 12px !important;
  max-width: 64ch !important;
}
@media (max-width: 767px){
  html .blog-page .oma-est-grid{ grid-template-columns: 1fr !important; }
  html .blog-page .oma-est-num{ font-size: 32px !important; }
}

/* --------------------------------------------------------------------------
   11. LESS BLUE  —  the article twin of premium.css section 7.
       Measured 17 Sep, after the rest of this file went live: 39 blue blocks
       and 19 blue text elements on one article page. The count is close to the
       homepage's, but a homepage carries photographs and an article is nothing
       but text, so the same amount of blue reads far louder here. Worse, it
       repeats in one shape: 21 of those 39 were the blue rule under every
       table header, marching down an 18,000px page.

       What stays blue, deliberately: the CTA button, links inside prose, and
       the accent line in the headline. Everything else goes quiet.
   -------------------------------------------------------------------------- */

/* the 21 table-header rules */
html .blog-page .oma-tbl th{ border-bottom-color: rgba(255,255,255,.16) !important; }

/* the eight FAQ plus signs */
html .blog-page .faq-icon{ border-color: rgba(255,255,255,.22) !important; }

/* section rules that were blue for no reason */
html .blog-page .blog-related-title{ border-bottom-color: rgba(255,255,255,.12) !important; }
html .blog-page .oma-src{ border-left-color: rgba(255,255,255,.14) !important; }

/* the marker on the short-answer block: a rule, not a highlighter */
html .blog-page .oma-answer{ border-left-color: rgba(255,255,255,.26) !important; }

/* the two big numbers. Size already carries them; colour was doing the job
   twice, and it put a second loud blue next to the blue headline. */
html .blog-page .blog-stat-card:first-child .blog-stat-number{ color: #fff !important; }
html .blog-page .oma-est-num{ color: #fff !important; }

/* contents links were a blue-grey; make them read as quiet text with an
   underline, which is what they are */
html .blog-page .blog-toc-list a{
  color: rgba(255,255,255,.74) !important;
  text-decoration-color: rgba(255,255,255,.28) !important;
}
html .blog-page .blog-toc-list a:hover{ color: #fff !important; }
