/* The blog of coachaiofficial.com (tooling/site_blog_pages.py), on top of
   /site.css (tokens, type, buttons, surfaces, reveal) and under /footer.css
   (header, footer, store buttons). Every asset comes from this origin.

   The hub and the article heads are the page top every section page shares
   (tooling/site_hero.py, the "Page top" section of /site.css): the full-bleed
   black-and-white photo, the crumbs, the poster H1 in Montserrat ExtraBold
   caps with one red word, the mono meta line. This file only adds what the
   blog puts on it: the second part of an article's title under the poster
   part (.h1-b) and the three items of the article's meta line. The article
   text is built for reading: 19 px (18 on a phone), about 68 characters a
   line, line height 1.72, numbered subheads, the coach tip as a dark pull
   quote, tables that scroll sideways on a phone with the first column held.
   Headline sizes below the hero come from the page (--fs-m): the generator
   measures the longest word so no headline ever breaks inside a word. */

/* ---------- Reading progress: a red hairline under the top edge (CSS only) ---------- */
.blog-progress{display:none}
@supports (animation-timeline:scroll()){
  .blog-progress{display:block;position:fixed;z-index:70;left:0;right:0;top:0;height:3px;background:var(--sig);transform-origin:0 50%;transform:scaleX(0);animation:blog-progress linear both;animation-timeline:scroll(root)}
  @keyframes blog-progress{to{transform:scaleX(1)}}
}

/* ---------- Page top: what the blog adds to the shared hero (site_hero.py, /site.css) ---------- */
/* An article's title is one H1 in two parts: the part before the colon is the
   poster headline the shared .fit sizes; the rest is this plain line under it,
   Montserrat, sentence case, about the size of the lede. */
.page-hero h1 .h1-b{display:block;max-width:30em;margin-top:22px;font-size:clamp(19px,1.6vw,24px);font-weight:600;line-height:1.35;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.9);text-wrap:pretty}
/* the article's meta line: read time, the date, the byline, a red square between them */
.blog-article .page-hero-meta{display:flex;flex-wrap:wrap;gap:6px 18px}
.blog-article .page-hero-meta span,.blog-article .page-hero-meta time,.blog-article .page-hero-meta a{font:inherit;color:inherit}
.blog-article .page-hero-meta a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.4)}
.blog-article .page-hero-meta a:hover{color:#fff;text-decoration-color:#fff}
.blog-article .page-hero-meta > * + *::before{content:"";display:inline-block;width:6px;height:6px;margin:0 14px 0 0;vertical-align:middle;background:var(--sig);position:relative;top:-1px}

/* ---------- Article: contents on the left, the text in one comfortable column ---------- */
.blog-layout{display:grid;grid-template-columns:minmax(200px,250px) minmax(0,720px);column-gap:clamp(48px,6vw,112px);justify-content:center;align-items:start;max-width:var(--max);margin:0 auto;padding:88px var(--gut) 120px}
.blog-aside{position:sticky;top:100px;max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:none}
.blog-aside::-webkit-scrollbar{display:none}
.blog-toc-title{margin:0 0 14px;color:var(--muted-l)}
.blog-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;border-top:1px solid var(--line-l)}
.blog-toc li{counter-increment:toc;border-bottom:1px solid var(--line-l)}
.blog-toc a{display:grid;grid-template-columns:30px 1fr;gap:0 8px;padding:12px 0;font-size:14px;font-weight:600;line-height:1.35;color:var(--ink);transition:color .2s}
.blog-toc a:before{content:counter(toc,decimal-leading-zero);padding-top:2px;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--sig-text)}
.blog-toc a:hover{color:var(--sig-text)}

.blog-body{max-width:720px;font-size:19px;line-height:1.72;color:var(--text-l);counter-reset:sec}
.blog-body p{margin:0 0 1.05em}
.blog-lede{margin:0 0 56px!important;font-size:23px;line-height:1.5;font-weight:600;color:var(--ink);text-wrap:pretty}
.blog-body section{counter-increment:sec}
.blog-body h2{margin:72px 0 26px;scroll-margin-top:96px;font-family:var(--head);font-weight:800;font-size:clamp(28px,2.7vw,40px);line-height:1;letter-spacing:-.02em;text-transform:uppercase;color:var(--ink);hyphens:none;-webkit-hyphens:none;overflow-wrap:normal;word-break:keep-all;text-wrap:balance}
.blog-body section > h2:before{content:counter(sec,decimal-leading-zero);display:block;margin-bottom:14px;font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--sig-text)}
.blog-body section:first-of-type > h2{margin-top:0}
.blog-body h3{margin:44px 0 14px;scroll-margin-top:96px;font-family:var(--head);font-weight:800;font-size:22px;line-height:1.25;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.blog-body strong{font-weight:700;color:var(--ink)}
.blog-body em{font-style:italic}
.blog-body a:not(.sb){color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--sig);text-decoration-thickness:2px;text-underline-offset:3px;transition:color .2s}
.blog-body a:not(.sb):hover{color:var(--sig-text)}

/* lists: red squares; numbered lists as steps with mono numbers */
.blog-body ul,.blog-body ol{margin:0 0 1.3em;padding:0;list-style:none}
.blog-body li{position:relative;margin:0 0 .7em}
.blog-body ul > li{padding-left:28px}
.blog-body ul > li:before{content:"";position:absolute;left:2px;top:.66em;width:8px;height:8px;background:var(--sig)}
.blog-body ol{counter-reset:step;border-top:1px solid var(--line-l)}
.blog-body ol > li{counter-increment:step;margin:0;padding:16px 0 16px 56px;border-bottom:1px solid var(--line-l)}
.blog-body ol > li:before{content:counter(step,decimal-leading-zero);position:absolute;left:0;top:17px;font-family:var(--mono);font-size:15px;font-weight:700;letter-spacing:.02em;color:var(--sig-text)}

/* the coach tip: a dark pull quote */
.coach-tip{--sig:var(--sig-hi);--sig-text:var(--sig-hi);margin:44px 0;padding:30px 34px 10px;background:var(--ink);color:var(--bone)}
.coach-tip .coach-tip-label{margin:0 0 14px;font-family:var(--label);font-weight:700;font-size:12px;letter-spacing:.08em;line-height:1.2;text-transform:uppercase;color:var(--sig-text)}
.coach-tip p{font-size:20px;line-height:1.55;font-weight:600;color:var(--bone)}
.coach-tip p:not(.coach-tip-label){margin:0 0 20px}
.coach-tip strong{color:#fff}
.coach-tip a{color:#fff}

/* app screenshots in the text: a band of the phone screen, framed like a
   magazine figure, with the app's name and one line under it */
.blog-shot{margin:40px auto 44px;max-width:420px}
.blog-shot .blog-shot-scr{overflow:hidden;border-radius:18px;background:#fbfbf9;box-shadow:0 0 0 1px rgba(11,11,11,.12),0 18px 40px rgba(11,11,11,.14)}
.blog-shot img{display:block;width:100%;height:auto}
.blog-shot figcaption{margin:14px 6px 0;font-size:14px;line-height:1.5;color:var(--muted-l);text-wrap:pretty}
.blog-shot figcaption .lb{display:inline-block;margin-right:8px;font-size:11px;color:var(--ink)}
.blog-shot figcaption .lb .s{color:var(--sig-text)}

/* tables: mono heads; on a phone they scroll sideways, the first column stays */
.table-scroll{margin:30px 0 34px;overflow-x:auto;-webkit-overflow-scrolling:touch;border-top:2px solid var(--ink);
  background:linear-gradient(to right,var(--bone) 30%,rgba(242,238,231,0)) left center / 32px 100% no-repeat local,
    linear-gradient(to left,var(--bone) 30%,rgba(242,238,231,0)) right center / 32px 100% no-repeat local,
    linear-gradient(to right,rgba(11,11,11,.16),rgba(11,11,11,0)) left center / 14px 100% no-repeat scroll,
    linear-gradient(to left,rgba(11,11,11,.16),rgba(11,11,11,0)) right center / 14px 100% no-repeat scroll}
.blog-table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.45}
.blog-table th{padding:14px 16px 12px;text-align:left;vertical-align:bottom;font-family:var(--label);font-weight:700;font-size:11px;letter-spacing:.06em;line-height:1.3;text-transform:uppercase;color:var(--muted-l);border-bottom:1px solid var(--ink)}
.blog-table td{padding:14px 16px;vertical-align:top;border-bottom:1px solid var(--line-l);color:var(--text-l)}
.blog-table td:first-child{font-weight:700;color:var(--ink)}
.blog-table th:first-child,.blog-table td:first-child{padding-left:0}
.blog-table .t-right{text-align:right}
.blog-table .t-center{text-align:center}

/* the app note in the middle of the article */
.blog-mid{margin:56px 0;padding:30px 32px 32px;background:var(--bone-2);border-left:4px solid var(--sig)}
.blog-mid .blog-mid-l{margin:0 0 12px;color:var(--ink)}
.blog-mid .blog-mid-t{margin:0 0 22px;font-size:20px;line-height:1.45;font-weight:700;color:var(--ink);text-wrap:pretty}
.blog-mid .sb{border-color:transparent}

/* FAQ */
.blog-faq{margin-top:72px}
.blog-faq h2{margin-top:0}
.blog-faq h2:before{content:none!important}
.blog-faq details{border-top:1px solid var(--line-l)}
.blog-faq details:last-child{border-bottom:1px solid var(--line-l)}
.blog-faq summary{position:relative;display:block;padding:22px 52px 22px 0;cursor:pointer;list-style:none;font-size:19px;font-weight:700;line-height:1.4;color:var(--ink);transition:color .2s}
.blog-faq summary::-webkit-details-marker{display:none}
.blog-faq summary:hover{color:var(--sig-text)}
.blog-faq summary:before,.blog-faq summary:after{content:"";position:absolute;right:6px;top:50%;width:18px;height:2px;margin-top:-1px;background:var(--ink);transition:transform .25s var(--ease-out)}
.blog-faq summary:after{transform:rotate(90deg)}
.blog-faq details[open] summary:after{transform:rotate(0)}
.blog-faq .faq-a{padding:0 0 10px}
.blog-faq .faq-a p{margin:0 0 1em}

/* ---------- Article cards: B/W photo, read time, the title in caps ---------- */
.blog-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:64px 24px;margin:0;padding:0;list-style:none}
.blog-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.blog-grid > .bcard{grid-column:span 2}
.blog-grid > .bcard--half{grid-column:span 3}
.blog-grid--two > .bcard{grid-column:auto}
.bcard--half .blog-card .ph{aspect-ratio:3/2}
.bcard--half .bcard-t{font-size:clamp(26px,2.4vw,36px)}
.bcard--half .blog-card .ph img{object-position:50% var(--fy,30%)}
.bcard{margin:0;padding:0}
.blog-card{display:block;color:var(--ink)}
.blog-card .ph{position:relative;display:block;overflow:hidden;background:var(--ink);aspect-ratio:3/4}
.blog-card .ph picture,.blog-card .ph img{position:absolute;inset:0;display:block;width:100%;height:100%}
.blog-card .ph img{object-fit:cover;object-position:var(--fx,50%) var(--fy,30%);transition:transform .6s var(--ease-out)}
.blog-card:hover .ph img{transform:scale(1.04)}
.blog-card .tag{position:absolute;z-index:2;right:12px;top:12px;background:var(--ink);color:var(--bone);padding:6px 10px 5px}
.bcard-text{display:block}
.bcard-t{display:block;margin-top:20px;font-size:clamp(24px,2.1vw,30px);line-height:.98;text-wrap:balance;transition:color .2s}
.blog-card:hover .bcard-t{color:var(--sig-text)}
.bcard-d{display:-webkit-box;margin-top:14px;font-size:16px;line-height:1.5;color:var(--muted-l);-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.blog-card .ulink{display:inline-block;margin-top:18px}
/* the lead card: the whole width, the photo beside the words */
.blog-grid > .bcard--lead{grid-column:1/-1}
.bcard--lead .blog-card{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:end}
.bcard--lead .ph{aspect-ratio:3/2}
.bcard--lead .ph img{object-position:50% var(--fy,30%)}
.bcard--lead .bcard-t{margin-top:0;font-size:clamp(34px,3.6vw,58px);line-height:.94}
.bcard--lead .bcard-d{margin-top:22px;font-size:18px;-webkit-line-clamp:5;color:var(--text-l)}
.bcard--lead .ulink{margin-top:26px}

/* ---------- Hub list, Read next ---------- */
.blog-list{padding:120px 0}
/* The hub's list sits on Ink like the programs' cards (owner, 2026-10-22): the
   card colours below flip from the Bone defaults, which the article's next-list keeps. */
.blog-list.ink .blog-card{color:var(--bone)}
.blog-list.ink .blog-card .ph{background:var(--ink-2)}
.blog-list.ink .bcard-d{color:var(--muted-d)}
.blog-list.ink .bcard--lead .bcard-d{color:rgba(242,238,231,.84)}
.blog-list.ink .blog-list-head .mono{color:var(--muted-d)}
.blog-list.ink .blog-coming p{color:var(--muted-d)}
.blog-list-head,.blog-next-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:48px}
.blog-list-head .hd,.blog-next-head .hd{font-size:clamp(56px,6.4vw,104px)}
.blog-list-head .mono{color:var(--muted-l);padding-bottom:10px}
.blog-next{padding:112px 0 120px}
/* the program that has the article's advice built in, under the two cards */
.blog-next-prog{margin-top:36px;max-width:46em;font-size:19px;line-height:1.55;color:var(--text-l)}
.blog-next-prog a{color:var(--ink);font-weight:700}
.blog-coming p{max-width:38em;margin-top:24px;font-size:19px;line-height:1.65}
.blog-coming a{text-decoration:underline;text-decoration-color:var(--sig);text-decoration-thickness:2px;text-underline-offset:3px}


/* ---------- Tablet ---------- */
@media(max-width:1100px){
  .blog-layout{grid-template-columns:minmax(0,720px);padding-top:64px}
  .blog-aside{position:static;max-height:none;overflow:visible;margin-bottom:56px}
  .blog-grid:not(.blog-grid--two) > .bcard:not(.bcard--lead){grid-column:span 3}
  .bcard--lead .blog-card{gap:32px}
}

/* ---------- Phone ---------- */
@media(max-width:760px){
  .page-hero h1 .h1-b{margin-top:16px;font-size:18px}
  /* on a phone the byline takes its own row, so no row starts with a separator */
  .blog-article .page-hero-meta .blog-by{flex-basis:100%}
  .blog-article .page-hero-meta .blog-by::before{display:none}
  .blog-layout{padding:48px var(--gut) 88px}
  .blog-aside{margin-bottom:44px}
  .blog-body{font-size:18px;line-height:1.7}
  .blog-lede{margin-bottom:44px!important;font-size:20px}
  .blog-body h2{margin-top:60px;font-size:var(--fs-m,27px)}
  .blog-body h3{margin-top:36px;font-size:20px}
  .blog-body ol > li{padding-left:44px}
  .coach-tip{margin:36px 0;padding:24px 22px 4px}
  .coach-tip p{font-size:18px}
  .blog-mid{margin:44px 0;padding:24px 20px 24px}
  .blog-shot{margin:32px auto 36px;max-width:86vw}
  .blog-shot figcaption{font-size:13px}
  .blog-mid .blog-mid-t{font-size:18px}
  .blog-table{font-size:15px}
  .blog-table:has(th:nth-child(3)){min-width:480px}
  .blog-table:has(th:nth-child(4)){min-width:560px}
  .blog-table th:first-child,.blog-table td:first-child{position:sticky;left:0;z-index:1;background:var(--bone);padding-right:14px;box-shadow:1px 0 0 var(--line-l)}
  .blog-table td{padding:12px 12px}
  .blog-table th{padding:12px 12px 10px}
  .blog-faq summary{font-size:18px;padding:18px 44px 18px 0}
  .blog-grid,.blog-grid--two{grid-template-columns:1fr;gap:48px}
  .blog-grid > .bcard{grid-column:auto!important}
  .blog-card .ph{aspect-ratio:3/2}
  .bcard-t,.bcard--lead .bcard-t{font-size:var(--fs-m,28px);margin-top:16px}
  .bcard--lead .blog-card{display:block}
  .bcard--lead .bcard-d{font-size:16px;margin-top:14px;-webkit-line-clamp:4}
  .blog-list{padding:84px 0}
  .blog-next{padding:84px 0 92px}
  .blog-next-prog{margin-top:28px;font-size:17px}
  .blog-list-head,.blog-next-head{flex-direction:column;align-items:flex-start;gap:14px;margin-bottom:32px}
  .blog-list-head .hd,.blog-next-head .hd{font-size:clamp(40px,12vw,60px)}
  .blog-list-head .mono{padding-bottom:0}
}

/* Print: the article, without the site around it */
@media print{
  .blog-progress,.blog-aside,.blog-next,.blog-mid{display:none!important}
  .page-hero h1 .h1-b{max-width:none;margin-top:6pt;font-size:13pt;color:#000}
  .blog-article .page-hero-meta{color:#333}
  .blog-layout{display:block;padding:0}
  .blog-body{max-width:none;font-size:12pt;line-height:1.55}
  .blog-faq details::details-content{content-visibility:visible;display:block}
  .blog-faq summary:before,.blog-faq summary:after{display:none}
  .coach-tip{background:none;color:#000;border-left:3pt solid #000;break-inside:avoid}
  .coach-tip p{color:#000}
  .table-scroll{break-inside:avoid;background:none}
}
@media(prefers-reduced-motion:reduce){.blog-progress{display:none!important}}