/* askchat.studio — blog.css — the blog in the Windows-style system.
   Spec: knowledge/projects/askchat_landing/win_redesign_plan.md, section 3.3.
   Requires /ui.css BEFORE this file: tokens, type scale, .wrap/.col, .btn, .win/.pane/.tbar,
   .listbox and the three bevels all live there.

   Rule of dosage on the blog. A post is read, not looked at, so the body of an article is white
   paper and one 720px column. Retro physics appears twice only:
     1. the CTA window at the end of a post ("Free check"),
     2. the "Read next" list, and the index list, drawn as a Win95 list view.
   The meta line under the title is a single status-bar cell — the same groove as .sbar in ui.css.

   Migration of the 37 posts: scripts/askchat_blog_restyle.py (idempotent). This file replaces the
   ten different inline <style> blocks those files used to carry.

   Nothing here may change text: article prose, headings, meta, canonical, OG and the Article
   JSON-LD are frozen content (content freeze, scripts/askchat_content_freeze.py). Where the window
   chrome needs a caption ("Free check", the column headers of the index), the caption is drawn by
   CSS ::before on an aria-hidden element and never enters the DOM as text. */

/* ============================================================ 1. the reading column */
/* .col in ui.css caps every direct child of <main> at --measure, and .wrap keeps the left edge of
   the text exactly under the brand in the header. Only the vertical rhythm is set here. */
.post-main{--measure:720px;padding:56px 0 88px}
.blog-main{--measure:900px;padding:56px 0 88px}

/* ============================================================ 2. the post */
.post{margin:0;line-height:1.7}
.post > :first-child{margin-top:0}

.post h1,.post .post-title{font-size:40px;line-height:1.1;letter-spacing:-.03em;font-weight:800;margin:0 0 18px;text-wrap:balance}
.post h2{font-size:28px;line-height:1.2;letter-spacing:-.02em;font-weight:700;margin:46px 0 14px;text-wrap:balance}
.post h3{font-size:20px;line-height:1.3;letter-spacing:-.015em;font-weight:700;margin:32px 0 10px}

.post p,.post li{font-size:17px;line-height:1.7}
.post p{margin:0 0 18px}
.post ul,.post ol{margin:0 0 22px;padding-left:22px}
.post li{margin:0 0 9px}
.post li::marker{color:var(--quiet)}
.post strong,.post b{font-weight:700}
.post em,.post i{font-style:italic}
.post a{color:var(--pen);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.post a.btn{color:var(--ink);text-decoration:none}
.post a.btn.pri{color:#fff}
.post hr{margin:34px 0}
.post code{font-family:var(--mono);font-size:.88em;font-weight:500;background:var(--band);padding:2px 5px;box-shadow:inset 0 0 0 1px var(--rule)}

/* a pulled-out quote: one accent rule on the left, no decoration */
.post blockquote{margin:26px 0;padding:2px 0 2px 20px;border-left:3px solid var(--pen);font-size:19px;line-height:1.55}
.post blockquote p:last-child{margin-bottom:0}
.post cite{font-style:normal;font-size:15px;color:var(--quiet)}

/* the eyebrow above the title (34 of 37 posts carry one) */
.post .eyebrow{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--quiet);margin:0 0 14px}

/* ============================================================ 3. the meta strip
   One status-bar cell: date in mono, then the reading time, exactly the text the post already had.
   It replaces the hero image — the same og-image.jpg sat on top of all 37 posts and said nothing. */
.post .post-meta,.post .meta,.post .byline,.post .lede{
  display:inline-block;margin:0 0 36px;padding:6px 11px 5px;
  background:var(--g-face);color:var(--ink);
  box-shadow:inset -1px -1px 0 var(--g-hi),inset 1px 1px 0 var(--g-sh2);
  font-size:13px;line-height:1.35;font-weight:500}
.post .post-meta time,.post .meta time,.post .byline time,.post .lede time{
  font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums}

/* the source line at the foot of an article (11 posts): quiet, one size down */
.post .src,.post .footnote{font-size:14px;line-height:1.6;color:var(--quiet);margin:26px 0 0}
.post .src a,.post .footnote a{color:var(--pen)}

/* ============================================================ 4. tables inside a post */
.post table,.post .data-table{width:100%;border-collapse:collapse;margin:22px 0 26px;font-size:15px;line-height:1.45}
.post th,.post td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.post th{font-size:13px;letter-spacing:.04em;text-transform:uppercase;font-weight:700;color:var(--quiet);border-bottom:1px solid var(--g-sh2)}
.post td{font-variant-numeric:tabular-nums}
.post tr.highlight td{background:var(--band);font-weight:600}
.post .table-wrap{overflow-x:auto}

/* ============================================================ 5. the CTA window at the end
   The one window in a post. Its title bar carries no DOM text on purpose: the caption is CSS, so
   the content freeze stays at zero and a screen reader is not read a decoration. */
.post .cta-box{margin:52px 0 0}
.cta-box .tbar::before{content:"Free check";flex:1;min-width:0;font-family:var(--sans);font-size:13px;font-weight:700;line-height:1;letter-spacing:.01em;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.post .cta-box .pane{padding:24px 26px 26px}
.post .cta-box h3{margin:0 0 10px;font-size:20px}
.post .cta-box p{margin:0 0 14px;font-size:17px}
.post .cta-box .btn{margin:6px 0 2px}
.post .cta-box .cta-more{margin:18px 0 0;font-size:15px;line-height:1.55;color:var(--quiet)}
.post .cta-box .cta-more a{color:var(--pen)}

/* ============================================================ 6. Read next
   A list view: white sunken box from ui.css (.listbox), rows in the page grotesk because these are
   headlines, not data. Hover and keyboard focus select a row the way Win95 selects one. */
.read-next{margin:56px 0 0;padding:28px 0 0;border-top:1px solid var(--rule)}
.read-next h2{font-size:20px;line-height:1.3;letter-spacing:-.015em;font-weight:700;margin:0 0 14px}
.listbox.rn{padding:2px;font-family:var(--sans);font-size:16px;font-weight:500}
.listbox.rn li{min-height:0;padding:0;align-items:stretch}
.listbox.rn a{display:block;width:100%;padding:12px 12px;color:var(--ink);text-decoration:none;font-weight:600;line-height:1.4}
.listbox.rn a:focus-visible{outline:2px solid var(--pen);outline-offset:-2px}
@media (hover:hover) and (pointer:fine){
  .listbox.rn a:hover{background:var(--pen);color:#fff;outline:1px dotted #fff;outline-offset:-4px}
}

/* ============================================================ 7. the index: a list view with columns
   Columns are Date and Title. The headers are CSS on an empty aria-hidden strip, so the index text
   stays byte-for-byte what it was — only the date gained a <time datetime> wrapper. */
.blog-list{margin:0}
.blog-list h1{font-size:40px;line-height:1.05;letter-spacing:-.03em;font-weight:800;margin:0 0 18px}
.blog-list .eyebrow{font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--quiet);margin:0 0 14px}
.blog-list .lede{font-size:20px;line-height:1.5;margin:0 0 44px;max-width:680px}

.posts-head{display:grid;grid-template-columns:168px minmax(0,1fr);gap:3px;margin:0 0 3px}
.posts-head::before{content:"Date"}
.posts-head::after{content:"Title"}
.posts-head::before,.posts-head::after{padding:6px 11px 5px;background:var(--g-face);box-shadow:var(--raised);
  font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--quiet);line-height:1.35}

.posts{list-style:none;margin:0;padding:2px;background:#fff;box-shadow:var(--sunken)}
.posts > li{display:grid;grid-template-columns:168px minmax(0,1fr);gap:0 14px;
  padding:16px 12px;border-top:1px solid var(--rule)}
.posts > li:first-child{border-top:0}
.posts .date{font-family:var(--mono);font-size:14px;font-weight:600;line-height:1.5;color:var(--quiet);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.posts .t{min-width:0}
.posts h2{font-size:20px;line-height:1.3;letter-spacing:-.015em;font-weight:700;margin:0 0 6px;text-wrap:balance}
.posts h2 a{color:var(--ink);text-decoration:none}
.posts p{font-size:15px;line-height:1.55;color:var(--quiet);margin:0;max-width:66ch}
@media (hover:hover) and (pointer:fine){
  .posts h2 a:hover{color:var(--pen);text-decoration:underline;text-underline-offset:2px}
}
.posts h2 a:focus-visible{outline:2px solid var(--pen);outline-offset:3px}

/* ============================================================ 8. mobile (section 7 of the plan)
   The list stops being a table and becomes a stack of rows: date on its own line above the title.
   The column headers disappear with the columns — a header for one column is noise. */
@media (max-width:900px){
  .post-main,.blog-main{padding:32px 0 64px}
  .post h1,.post .post-title{font-size:30px}
  .post h2{font-size:24px;margin-top:36px}
  .post h3{font-size:18px;margin-top:26px}
  .post blockquote{font-size:17px;padding-left:16px}
  .post .post-meta,.post .meta,.post .byline,.post .lede{margin-bottom:28px}
  .post .cta-box{margin-top:40px}
  .post .cta-box .pane{padding:18px 16px 20px}
  .post .cta-box .btn{width:100%}
  .post table{font-size:14px}
  .post th,.post td{padding:8px 9px}

  .blog-list h1{font-size:32px}
  .blog-list .lede{font-size:17px;margin-bottom:32px}
  .posts-head{display:none}
  .posts > li{grid-template-columns:minmax(0,1fr);gap:0;padding:14px 10px}
  .posts .date{font-size:13px;margin:0 0 6px}
  .posts h2{font-size:17px}
  .read-next{margin-top:40px}
  .listbox.rn a{padding:12px 10px;font-size:15px}
}

/* a long unbroken url or brand name must not push the column wider than the screen */
@media (max-width:480px){
  .post p,.post li,.post h1,.post .post-title,.post h2{overflow-wrap:anywhere}
  .posts h2,.posts p{overflow-wrap:anywhere}
}

@media (prefers-reduced-motion:reduce){
  .listbox.rn a{transition:none}
}