/* THE READER POST PAGE (BLOGPOST1005, 2026-10-05): the look of every blog post and city page. Dmitry's pick from three
   real looks ("A. for your reader looks fantastic"), then the slop and copy pass he asked for; the two other looks of
   that board are not in this file. Loaded by blog_post.html after og-blog.css (the home's cards, rows, chips, guide
   band, and the tables' copy feature) and og-help.css (the smooth question toggle). Every value is a brand sheet token
   (og-brand.css :root): no new colour, radius or font. The page's own class is .og-k; .og-k-a is the Reader's frame
   (the name is its letter on the board he picked from).

   HIS LAWS, AND HOW THIS SHEET KEEPS THEM:
   - one line per heading at EVERY width: a heading is sized in its own box's units from a width measured in the
     site's font (--k, --kd, --kp written by app/blog_kit.py), so it shrinks before it could wrap; a title that would
     shrink too far has a shorter form for that regime (.og-k-w3 from 1140, .og-k-w2 from 768, .og-s on a phone).
   - no line holds one word: every block's last two words are tied by the server (blog_kit.tie).
   - cards are the home's own card (og-bl-card): one line of title, two full lines of text, sized in the card's units.
   - a drawn picture is a DEVICE (data-demo): its small UI type is outside the type ladder, everything else is on it.
   - ONE motion clock: 280ms cubic-bezier(.25,.8,.25,1) (--kc, --ke). Nothing moves on the first screen at load.
   State classes are prefixed (is-); text rules are scoped to their text block, never to a bare element beside a disc. */

.og-k{--kc:280ms;--ke:cubic-bezier(.25,.8,.25,1)}
.og-k:before{content:"";position:absolute;z-index:-1;left:50%;top:0;width:100vw;height:520px;transform:translateX(-50%);background:linear-gradient(180deg,var(--b-wash) 0,#fff 100%)}   /* the blog's wash, as on the home */
.og-k ::selection{background:var(--b-wash);color:var(--b-ink)}
/* the first paint lands settled: what og-blog-kit.js paints while the page starts (a saved tick, the count, the rail's first mark)
   does not move on arrival. Only those parts: a press on anything else answers from the first frame. */
.og-k.is-still .og-k-disc,.og-k.is-still .og-k-disc>svg,.og-k.is-still .og-k-checks>.og-k-tick,.og-k.is-still .og-k-rail a,.og-k.is-still .og-k-note,.og-k.is-still .og-k-count>b{transition:none!important}

/* ---- the top: back, kind, the title on one line, who and when */
.og-k-head{container-type:inline-size}
.og-k-head>.og-cs-back{margin:0 0 18px}
.og-k-kind{margin:0 0 14px}
.og-k-h1{--k:var(--k3);font-size:min(var(--b-h1),calc(100cqw * var(--k)))}
.og-k-w2{display:none}
.og-k-by{display:flex;align-items:center;gap:12px;margin:20px 0 0}
.og-k-by>img{flex:0 0 36px;width:36px;height:36px;border-radius:50%;object-fit:cover;background:var(--b-tile)}
.og-k-byt{display:grid;gap:1px;font:400 var(--b-small)/1.45 var(--b-font);color:var(--b-mute)}
.og-k .og-k-byt a{font-weight:600;color:var(--b-ink)}
.og-k-byt>span{text-wrap:pretty}

/* ---- the frame (992 and up: the On this page rail beside the column; under it one column) */
.og-k-grid{margin-top:40px}
.og-k-col{min-width:0}
.og-k-rail{margin-top:6px}
.og-k .og-k-rail a{transition:color var(--kc) var(--ke)}
.og-k .og-k-rail a[aria-current="true"]{font-weight:600;color:var(--b-ink)}
@media(min-width:992px){
 .og-k-a .og-k-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 56px;align-items:start}
 .og-k-a .og-k-rail{grid-column:1;grid-row:1}
 .og-k-a .og-k-col{grid-column:2;grid-row:1}
}

/* ---- the lead: the answer first, the reel upright with our own play disc, the slim offer */
.og-k-lead.has-reel{display:grid;grid-template-columns:224px minmax(0,1fr);gap:40px;align-items:start}
.og-k-lead.has-media:not(.has-reel){display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:40px;align-items:center}
.og-k-lt{min-width:0}
.og-k-answer{font:400 var(--b-sub)/1.55 var(--b-font);color:var(--b-ink);text-wrap:pretty}
.og-k-reel{margin:0;min-width:0}
.og-k-player{aspect-ratio:9/16;width:100%}
.og-k-player .og-cs-play{width:60px}
.og-k-player .og-cs-play:after{animation:none}      /* nothing moves on the first screen: the case-study ring stays on its own page */
.og-k-fc{display:grid;gap:2px;margin-top:10px;font:400 var(--b-micro)/var(--b-micro-lh) var(--b-font);color:var(--b-mute)}
.og-k-fc>b{font-weight:600;color:var(--b-ink)}
.og-k-chap{margin:18px 0 0}
.og-k .og-k-chap{grid-template-columns:minmax(0,1fr);grid-auto-flow:row}      /* the case-study page lays its chapters in a row on a tablet; here they are a list at every width */
.og-k .og-k-chap>li{min-width:0}
.og-k-hero{margin:0}
.og-k-hero>img{display:block;width:100%;height:auto;border:1px solid var(--b-line);border-radius:var(--b-card-r);background:#fff}
.og-k-offer{margin-top:20px}
.og-k .og-bl-vrow.og-k-offer{--bt:var(--btl);--bg:var(--bgl)}      /* the row's own measured widths, over the home's (0,2,0) pair */
.og-k-stats{margin-top:28px}

/* ---- a section of the column, its one-line header */
.og-k-sec{margin-top:64px;container-type:inline-size;scroll-margin-top:calc(var(--og-bar-h,60px) + 28px)}
.og-k-h2{margin:0;font:700 var(--b-h3)/var(--b-h3-lh) var(--b-font);font-size:min(var(--b-h3),calc(100cqw * var(--k,1)));letter-spacing:var(--b-h3-ls);color:var(--b-ink);white-space:nowrap}
.og-k-sh{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.og-k-count{margin:0;font:400 var(--b-small)/var(--b-small-lh) var(--b-font);color:var(--b-mute);white-space:nowrap}
.og-k-count>b{font-weight:600;color:var(--b-ink)}
/* the site's numeral disc (brand sheet DISC.numeral): white, a blue ring, a blue numeral */
.og-k-n{display:inline-grid;place-items:center;flex:0 0 24px;box-sizing:border-box;width:24px;height:24px;border:2px solid var(--b-blue);border-radius:50%;background:#fff;color:var(--b-blue);font:700 12px/1 var(--b-font);font-style:normal;letter-spacing:0}

/* ---- how reach works: three rows, a plate */
.og-k-flow{margin-top:18px;border-top:1px solid var(--b-line)}
.og-k-fl{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 24px;align-items:start;padding:16px 0;border-bottom:1px solid var(--b-line)}
.og-k-fl>b{display:flex;align-items:center;gap:10px;font:700 var(--b-title)/var(--b-title-lh) var(--b-font);letter-spacing:var(--b-title-ls);color:var(--b-ink)}
.og-k-fl>span{font:400 var(--b-prose)/1.6 var(--b-font);color:var(--b-body)}
.og-k-plate{margin-top:16px;padding:14px 18px;border-radius:var(--b-inner-r);background:var(--b-wash);font:600 var(--b-card)/1.5 var(--b-font);color:var(--b-ink)}

/* ---- a step: the numeral and the title on one line, where to tap, why, what to do, its picture */
.og-k-list{margin-top:6px}
.og-k-step{container-type:inline-size;padding:28px 0;border-bottom:1px solid var(--b-line);scroll-margin-top:calc(var(--og-bar-h,60px) + 28px)}
.og-k-step:last-child{border-bottom:0;padding-bottom:0}
.og-k-st{display:flex;align-items:center;gap:12px;margin:0;font:700 22px/1.25 var(--b-font);font-size:min(22px,calc((100cqw - 36px) * var(--kd,1)));letter-spacing:var(--b-h3-ls);color:var(--b-ink);white-space:nowrap}
.og-k-sb{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:40px;align-items:start;margin-top:16px;padding-left:36px}
.og-k-stx{min-width:0}
.og-k-where{display:flex;align-items:flex-start;gap:8px;padding:10px 14px;border-radius:var(--b-inner-r);background:var(--b-tile);font:600 var(--b-card)/1.4 var(--b-font);color:var(--b-ink)}
.og-k-pin{flex:0 0 16px;width:16px;height:16px;margin-top:2px;fill:none;stroke:var(--b-mute2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.og-k-why{margin:14px 0 0;font:400 var(--b-prose)/1.65 var(--b-font);color:var(--b-body);text-wrap:pretty}
.og-k-do{display:flex;align-items:flex-start;gap:10px;margin:12px 0 0;font:600 var(--b-prose)/1.5 var(--b-font);color:var(--b-ink)}
.og-k-go{flex:0 0 18px;width:18px;height:18px;margin-top:4px;fill:none;stroke:var(--b-blue);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---- a tick: a real checkbox drawn as a round disc; the tick draws on the one clock */
.og-k-tick{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.og-k-tick>input{position:absolute;left:0;top:50%;width:24px;height:24px;margin:-12px 0 0;opacity:0;cursor:pointer}
.og-k-disc{display:grid;place-items:center;flex:0 0 24px;box-sizing:border-box;width:24px;height:24px;border:1.5px solid var(--b-mute2);border-radius:50%;background:#fff;transition:background-color var(--kc) var(--ke),border-color var(--kc) var(--ke)}
.og-k-disc>svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:14;stroke-dashoffset:14;transition:stroke-dashoffset var(--kc) var(--ke),stroke var(--kc) var(--ke)}
.og-k-tick>input:checked+.og-k-disc{border-color:var(--b-blue);background:var(--b-blue)}
.og-k-tick>input:checked+.og-k-disc>svg{stroke-dashoffset:0}
.og-k-tick>input:focus-visible+.og-k-disc{outline:2px solid var(--b-blue);outline-offset:2px}
.og-k-tl{font:600 var(--b-card)/1.35 var(--b-font);color:var(--b-ink)}
.og-k-note{margin-top:14px;font:400 var(--b-small)/var(--b-small-lh) var(--b-font);color:var(--b-mute)}
.og-k-note.is-done{font-weight:600;color:var(--b-ink)}

/* ---- the list to tick, beside the same list as the guide prints it */
.og-k-ug{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:40px;align-items:start;margin-top:18px}
.og-k-checks{display:grid;gap:8px}
.og-k-checks>.og-k-tick{display:flex;padding:9px 14px;border:1px solid var(--b-line);border-radius:var(--b-inner-r);background:#fff;transition:background-color var(--kc) var(--ke),border-color var(--kc) var(--ke)}
.og-k-checks>.og-k-tick>input{left:14px}
.og-k-checks>.og-k-tick:has(>input:checked){border-color:var(--b-blue);background:var(--b-wash)}
@media(hover:hover) and (pointer:fine){.og-k-checks>.og-k-tick:not(:has(>input:checked)):hover{background:var(--b-tile)}}
.og-k-checks>.og-k-note{margin-top:6px}
.og-k-page{margin:0}
.og-k-page>img{display:block;width:100%;height:auto;border:1px solid var(--b-line);border-radius:var(--b-inner-r);background:#fff;box-shadow:0 8px 24px rgba(1,30,60,.10)}
.og-k-page>figcaption{margin-top:10px;text-align:center;font:400 var(--b-micro)/var(--b-micro-lh) var(--b-font);color:var(--b-mute)}

/* ---- the drawn pictures (a device: data-demo). Everything inside is sized in the picture's own width. */
.og-k-pic{container-type:inline-size;display:grid;place-items:center;min-width:0;margin:0;aspect-ratio:8/5;border-radius:var(--b-inner-r);background:var(--b-wash);overflow:hidden}
.og-k-pic p{margin:0}
.og-k-pic u,.og-k-pic s{text-decoration:none}
.og-k-ui{box-sizing:border-box;width:80%;padding:.75em .95em .7em;border:1px solid var(--b-line);border-radius:1.05em;background:#fff;box-shadow:0 .5em 1.5em rgba(1,30,60,.10);font:400 min(4.3cqw,15px)/1.25 var(--b-font);color:var(--b-ink)}
.og-k-pic-status .og-k-ui{font-size:min(3.75cqw,13.5px)}
.og-k-pic-caption .og-k-ui{width:84%;font-size:min(3.85cqw,14px)}
.og-k-uh{display:flex;align-items:center;gap:.55em;font-weight:700;font-size:1.06em}
.og-k-pic .og-k-uh{margin-bottom:.5em}
.og-k-uh>s{box-sizing:border-box;flex:0 0 .55em;width:.55em;height:.55em;margin-left:.15em;border-left:.15em solid currentColor;border-bottom:.15em solid currentColor;transform:rotate(45deg)}
.og-k-uh>s.is-av{flex-basis:1.5em;width:1.5em;height:1.5em;margin:0;border:0;border-radius:50%;background:var(--b-wash);box-shadow:inset 0 0 0 1px #bfe3fb;transform:none}
.og-k-find{display:flex;align-items:center;gap:.5em;padding:.45em .7em;border-radius:.7em;background:var(--b-tile);font-size:.95em;color:var(--b-body)}
.og-k-pic .og-k-find{margin-bottom:.15em}
.og-k-find>s{box-sizing:border-box;flex:0 0 .7em;width:.7em;height:.7em;border:.13em solid var(--b-mute2);border-radius:50%}
.og-k-row{display:flex;align-items:center;gap:.5em;padding:.52em 0;border-top:1px solid var(--b-line);white-space:nowrap}
.og-k-row>:first-child{margin-left:auto}
.og-k-row>em{font-style:normal;font-size:.92em;color:var(--b-mute2)}
.og-k-row.is-hl{margin:0 -.45em;padding:.52em .45em;border-top-color:transparent;border-radius:.6em;background:var(--b-wash)}
.og-k-row.is-hl+.og-k-row{border-top-color:transparent}
.og-k-row.is-foot{border-top:0;padding-bottom:0;font-weight:600}
.og-k-ok{display:grid;place-items:center;flex:0 0 1.3em;width:1.3em;height:1.3em;border-radius:50%;background:#12a150}
.og-k-ok>svg{width:72%;height:72%;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.og-k-sw{position:relative;flex:0 0 2.3em;width:2.3em;height:1.35em;border-radius:1em;background:#d3dae1}
.og-k-sw:after{content:"";position:absolute;left:.14em;top:.14em;width:1.07em;height:1.07em;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(1,30,60,.25)}
.og-k-sw.is-on{background:var(--b-blue)}
.og-k-sw.is-on:after{left:1.09em}
.og-k-pair{display:flex;gap:9%;width:66%;font:400 min(4.3cqw,15px)/1.2 var(--b-font)}
.og-k-clip{display:grid;grid-template-columns:minmax(0,1fr);flex:1 1 0;gap:.55em;justify-items:center;min-width:0}
.og-k-clip>b{position:relative;display:block;width:100%;aspect-ratio:10/12;border:1px solid var(--b-line);border-radius:.8em;background:linear-gradient(165deg,#e6edf3,#b9c6d2)}
.og-k-clip>b:after{content:"";position:absolute;left:50%;top:50%;border-left:.9em solid rgba(255,255,255,.9);border-top:.55em solid transparent;border-bottom:.55em solid transparent;transform:translate(-35%,-50%)}
.og-k-clip.is-bad>b>i{position:absolute;right:7%;top:6%;width:27%;aspect-ratio:1;border-radius:24%;background:#0b0f14;box-shadow:0 0 0 .14em #fff}
.og-k-clip.is-bad>b>i:after{content:"";position:absolute;inset:27%;border:.14em solid #fff;border-radius:22%}
.og-k-clip>span{display:flex;align-items:center;gap:.4em;font-weight:600;font-size:.72em;color:var(--b-ink);white-space:nowrap}
.og-k-clip .og-k-ok{flex-basis:1.15em;width:1.15em;height:1.15em}
.og-k-no{flex:0 0 .8em;width:.8em;height:.8em;border-radius:50%;background:#dc2626}
.og-k-tiles{display:grid;grid-template-columns:repeat(8,1fr);gap:.4em}
.og-k-pic .og-k-tiles{margin:.1em 0 .7em}
.og-k-tiles>b{display:block;aspect-ratio:9/14;border:1px solid #bfe3fb;border-radius:.35em;background:var(--b-wash)}
.og-k-tiles>b.is-re{border:1px dashed var(--b-mute2);background:#fff}
.og-k-shot{display:flex;align-items:center;justify-content:center;gap:7%;font:400 min(4.3cqw,15px)/1.2 var(--b-font)}
.og-k-shot>img{display:block;width:27cqw;height:auto;aspect-ratio:9/16;border:1px solid var(--b-line);border-radius:.8em;object-fit:cover;box-shadow:0 .5em 1.5em rgba(1,30,60,.14)}
.og-k-shot>p{display:grid;gap:.25em}
.og-k-shot>p>b{font:700 1.7em/1 var(--b-font);letter-spacing:-.03em;color:var(--b-blue)}
.og-k-shot>p>span{font-size:.95em;color:var(--b-mute)}
.og-k-capt{font-size:.92em;line-height:1.4;color:var(--b-body)}
.og-k-capt>b{font-weight:600;color:var(--b-link)}
.og-k-tags{font-size:.84em;line-height:1.35;color:var(--b-link)}
.og-k-pic .og-k-tags{margin-top:.45em}
.og-k-pic .og-k-chipline{margin-top:.55em}
.og-k-chipline>span{display:inline-block;padding:.28em .75em;border-radius:1em;background:var(--b-blue);font-weight:600;font-size:.8em;color:#fff}

/* ---- our numbers as a chart (a device), beside what they mean */
.og-k-sg{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px;align-items:center;margin-top:18px}
.og-k-chart{container-type:inline-size;display:grid;grid-template-columns:repeat(var(--bars,6),minmax(0,1fr));gap:2.4cqw;align-items:end;box-sizing:border-box;margin:0;padding:20px 18px 14px;border:1px solid var(--b-line);border-radius:var(--b-card-r);background:#fff}
.og-k-chart>p{display:grid;justify-items:stretch;margin:0;text-align:center}
.og-k-chart>p>b{font:700 min(13px,3.6cqw)/1 var(--b-font);color:var(--b-mute2)}
.og-k-chart>p>i{display:block;height:calc(var(--h) * .36cqw);margin-top:8px;border-radius:8px 8px 0 0;background:#dfe5ea}
.og-k-chart>p>span{padding-top:8px;border-top:1px solid var(--b-line);font:400 clamp(8px,2.9cqw,11px)/1.2 var(--b-font);color:var(--b-mute);white-space:nowrap}
.og-k-chart>p.is-win>b{font-size:min(17px,4.6cqw);color:var(--b-blue)}
.og-k-chart>p.is-win>i{background:var(--b-blue)}
.og-k-chart>p.is-win>span{font-weight:600;color:var(--b-ink)}

/* ---- proof: the home's own video card, by reference */
.og-k-proof{display:grid;grid-template-columns:minmax(0,1fr) 353px;gap:40px;align-items:center}
.og-k-pt{min-width:0}
.og-k-pline{margin-top:12px;font:400 var(--b-prose)/1.6 var(--b-font);color:var(--b-body)}

/* ---- questions: the Help center's toggle (og-help.css: the 280ms grid-rows device), each question on one line */
.og-k-qs{display:grid;gap:10px;margin-top:18px}
.og-k-q{container-type:inline-size;border:1px solid var(--b-line);border-radius:var(--b-card-r);background:#fff}
.og-k .og-k-q{padding:0}      /* og-public.css pads a question tile; the button is the tile here, as on the Help center */
.og-k-qh{margin:0;font:700 var(--b-title)/var(--b-title-lh) var(--b-font);font-size:min(var(--b-title),calc((100cqw - 64px) * var(--kd,1)));letter-spacing:var(--b-title-ls);color:var(--b-ink)}
.og-k-qh .og-faq-btn>span{font-size:inherit;white-space:nowrap}      /* og-help.css sets 16px under 360: the fitted size stands */
.og-k-qa{font:400 var(--b-body)/var(--b-body-lh) var(--b-font);color:var(--b-body)}
html:not(.og-k-js) .og-k-q .og-faq-panel{display:block;visibility:visible}      /* without the script every answer is open and no dead control is shown */
html:not(.og-k-js) .og-k-q .og-faq-a{opacity:1}
html:not(.og-k-js) .og-k-q .og-faq-chev{display:none}
@media(hover:hover) and (pointer:fine){.og-k-q:not(.og-faq-open):hover{border-color:#d3dbe3}}

/* ---- sources, source marks, who wrote it */
.og-k-src{margin:14px 0 0;padding-left:20px}
.og-k-src>li{margin:6px 0 0;font:400 var(--b-small)/var(--b-small-lh) var(--b-font);color:var(--b-mute)}
.og-k .og-k-src a{color:var(--b-mute);text-decoration:underline;text-underline-offset:2px}
.og-k-src>li:target{color:var(--b-ink)}
.og-k .og-b-src{margin-left:1px;font-size:12px;line-height:0;vertical-align:super}
.og-k .og-b-src a{padding:0 1px;font-weight:600;color:var(--b-link);text-decoration:none}
.og-k .og-b-src.is-next:before{content:",";margin-right:1px;font-weight:600;color:var(--b-link)}      /* only a mark that directly follows a mark (blog_kit.marks): "sup + sup" also caught two marks with words between them */
.og-k-author{display:flex;align-items:center;gap:14px;margin-top:56px;padding-top:24px;border-top:1px solid var(--b-line)}
.og-k-author>img{flex:0 0 48px;width:48px;height:48px;border-radius:50%;object-fit:cover;background:var(--b-tile)}
.og-k-at{display:grid;gap:2px;min-width:0}
.og-k-at>b{font:600 var(--b-body)/1.4 var(--b-font);color:var(--b-ink)}
.og-k-at>span{font:400 var(--b-small)/var(--b-small-lh) var(--b-font);color:var(--b-mute)}
.og-k-legal{margin-top:16px}
.og-k .og-k-legal a{text-decoration:underline;text-underline-offset:2px}

/* ---- an older piece's own text: the sheet's prose container (its headings may wrap, brand sheet WRAP_OK) */
.og-k .og-k-prose{max-width:760px;margin-top:56px}
.og-k-prose>:first-child{margin-top:0}
.og-k-prose h3{letter-spacing:var(--b-title-ls)}
.og-k .og-k-prose a{color:var(--b-ink);text-decoration:underline;text-underline-offset:2px}

/* ---- the reel's parts: the case-study pill, with a 44px place to press */
.og-k .og-cs-ch{position:relative;-webkit-tap-highlight-color:transparent}
.og-k .og-cs-ch:before{content:"";position:absolute;left:0;right:0;top:-2px;bottom:-2px}      /* the 40px pill answers a 44px press */

/* ---- read next: the home's cards, the home's rows on a phone */
.og-k-next{margin-top:var(--b-section);container-type:inline-size}
.og-k-next .og-bl-grid{margin-top:28px}

/* ---- 768 to 1139: the title's card form */
@media(max-width:1139px){
 .og-k-h1{--k:var(--k2)}
 .og-k-w3{display:none}
 .og-k-w2{display:inline}
}
/* ---- under 992: one column (768 to 991 is the home's 726px column) */
@media(max-width:991px){
 .og-k-offer .og-l{display:none}
 .og-k-offer .og-s{display:inline}
 .og-k .og-bl-vrow.og-k-offer{--bt:var(--bts);--bg:var(--bgs)}
 .og-k-rail{display:none}
 .og-k-sb{grid-template-columns:minmax(0,1fr) 280px;gap:28px}
}
@media(min-width:768px) and (max-width:991px){.og-k-next:not(.og-k-studies) .og-bl-grid>:nth-child(3){display:none}}
/* ---- under 768: the phone. Short forms of the titles, the picture above its words, rows for Read next. */
@media(max-width:767px){
 .og-k:before{height:440px}
 .og-k-h1{--k:var(--k1)}
 .og-k-w2{display:none}
 .og-k-grid{margin-top:24px}
 .og-k-lead.has-reel,.og-k-lead.has-media:not(.has-reel){grid-template-columns:minmax(0,1fr);gap:18px}
 .og-k-lead .og-k-reel{width:100%;max-width:232px;margin:0 auto}
 .og-k-a .og-k-lead.has-reel>.og-k-lt{display:contents}      /* the answer stays first, the reel follows it */
 .og-k-a .og-k-lead.has-reel .og-k-answer{order:1}
 .og-k-a .og-k-lead.has-reel .og-k-reel{order:2}
 .og-k-a .og-k-lead.has-reel .og-k-chap{order:3;margin-top:0}
 .og-k-a .og-k-lead.has-reel .og-k-offer{order:4;margin-top:0}
 .og-k .og-bl-vrow.og-k-offer{--bt:var(--bts);--bg:var(--bgs);padding:14px 0;border:0;border-top:1px solid var(--b-line);border-bottom:1px solid var(--b-line);border-radius:0;background:none}      /* a row on a phone, as the home's rows are */
 .og-k-sec{margin-top:44px}
 .og-k-fl{grid-template-columns:minmax(0,1fr);gap:6px}
 .og-k-plate>span{display:block}
 .og-k-step{padding:24px 0}
 .og-k-st{font-size:min(18px,calc((100cqw - 36px) * var(--kp,1)))}
 .og-k-sb{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:14px;padding-left:0}
 .og-k-sb>.og-k-pic{order:-1}
 .og-k-ug,.og-k-sg,.og-k-proof{grid-template-columns:minmax(0,1fr);gap:18px}
 .og-k-page{width:100%;max-width:220px;margin:6px auto 0}
 .og-k-qh{font-size:min(var(--b-title),calc((100cqw - 54px) * var(--kp,1)))}
 .og-k-qh.is-wrap .og-faq-btn>span{white-space:normal}
 .og-k-author{margin-top:44px}
 .og-k-chart{padding:16px 12px 12px;gap:1.6cqw}
}
@media(prefers-reduced-motion:reduce){
 .og-k .og-k-rail a,.og-k-disc,.og-k-disc>svg,.og-k-checks>.og-k-tick{transition:none}
}

/* ==== PKG BLOGPOST1005 / POLISH1005 (2026-10-05): the slop and copy pass on the Reader, the look he approved
   ("A. for your reader looks fantastic please double check on ai slope"). Every rule is scoped to the Reader's frame
   (.og-k-a). Nothing here changes the layout, the palette, the fonts or the order of blocks. Each rule answers one
   measured finding; the record with the numbers is
   [C] Blog system (2026-10-05)/board-post/polish/[C] SLOP AND COPY PASS - Look A (2026-10-05).md ==== */

/* -- alignment: the lead's two halves end on one line. The words' half ended above the reel's lower edge; now the slim
      PDF row closes on the reel's own edge and the spare room is shared between the three blocks. */
@media(min-width:768px){
 .og-k-a .og-k-lead.has-reel>.og-k-lt{display:flex;flex-direction:column;justify-content:space-between;min-height:calc(224px * 16 / 9)}
}
/* -- alignment: the proof's heading starts its section where every other heading does (it sat at the card's middle) */
.og-k-a .og-k-proof{align-items:start}
/* -- rhythm: an older piece's own text keeps the column's ONE separation (it had 56 where every section has 64 and 44) */
.og-k-a .og-k-prose{margin-top:64px}
@media(max-width:767px){.og-k-a .og-k-prose{margin-top:44px}}
/* -- fit: the slim PDF row takes its short words when its OWN box is narrow, not only when the screen is. Beside a
      chart at 1024 its second line was fitted down to 9.3px (brand_gate R6). */
@container (max-width:339px){
 .og-k-a .og-k-offer>.og-bl-txt{--bt:var(--bts);--bg:var(--bgs)}
 .og-k-a .og-k-offer .og-l{display:none}
 .og-k-a .og-k-offer .og-s{display:inline}
}
/* -- the chart says what its bars are (the words come from the piece: kit.study.cap) */
.og-k-chart>.og-k-cap{grid-column:1/-1;margin:0 0 10px;font:600 var(--b-micro)/var(--b-micro-lh) var(--b-font);text-align:left;color:var(--b-ink)}

/* -- motion (the spec is in the record). Every transition of this page runs on the ONE clock, 280ms
      cubic-bezier(.25,.8,.25,1). Three were off it: the play disc (200ms ease), the reel's parts (160ms, and their
      words flipped at once while the ground faded) and the question tile (160ms under a 280ms answer). Each is the
      answer to a press or a pointer; nothing starts by itself; a key press still lands settled; reduced motion gets none. */
@media(prefers-reduced-motion:no-preference){
 .og-k-a .og-k-player .og-cs-play{transition:opacity var(--kc) var(--ke)}
 .og-k-a .og-cs-ch{transition:border-color var(--kc) var(--ke),background-color var(--kc) var(--ke),color var(--kc) var(--ke),transform var(--kc) var(--ke)}
 .og-k-a .og-cs-ch span{transition:color var(--kc) var(--ke)}
 .og-k-a .og-k-q:not(.og-faq-still){transition:background-color var(--kc) var(--ke),border-color var(--kc) var(--ke)}
 .og-k-a .og-k-q:not(.og-faq-still) .og-faq-chev{transition:transform var(--kc) var(--ke),stroke var(--kc) var(--ke)}
 .og-k-a .og-k-offer,.og-k-a .og-k-offer>u{transition:border-color var(--kc) var(--ke)}
 .og-k-a .og-k-offer>u>svg{transition:transform var(--kc) var(--ke)}
 .og-k-a .og-k-note,.og-k-a .og-k-count>b{transition:color var(--kc) var(--ke)}
 .og-k-a .og-b-table tr.og-b-pick td,.og-k-a .og-b-tag::before{transition-duration:var(--kc);transition-timing-function:var(--ke)}      /* the tag rows went live at 180ms; on this page they keep the page's clock */
}
@media(prefers-reduced-motion:reduce){
 .og-k-a .og-k-player .og-cs-play,.og-k-a .og-cs-ch,.og-k-a .og-k-q{transition:none}
}
/* the slim PDF row answers a pointer (it had no hover at all): the site's waking hairline, and its arrow leans the way the page goes */
@media(hover:hover) and (pointer:fine){
 .og-k-a .og-k-offer:hover{border-color:#d3dbe3}
 .og-k-a .og-k-offer:hover>u{border-color:var(--b-blue)}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 .og-k-a .og-k-offer:hover>u>svg{transform:translateY(2px)}
}
/* -- type: ONE reading size in the column (the answers were 16px under 17px steps). And the reading text is INK, as he
      approved it: the sheet asks for var(--b-body), a name og-brand.css declares twice (a colour, then 16px), so that
      colour never applied. Written here as what renders, so a later fix of the name cannot turn this page grey. */
.og-k-a .og-k-qa{font:400 var(--b-prose)/var(--b-prose-lh) var(--b-font)}
.og-k-a .og-k-why,.og-k-a .og-k-fl>span,.og-k-a .og-k-pline,.og-k-a .og-k-qa{color:var(--b-ink)}
/* -- rhythm: 18px from every section heading to its first block (the checks had 34); 64 above the author as above every section */
.og-k-a .og-k-step:first-child{padding-top:12px}
@media(min-width:768px){.og-k-a .og-k-author{margin-top:64px}}
/* -- fit: under 768 the proof card keeps the home's card width, so its two lines stay two (stretched to the column it
      ended on one word at 640 and 660: headline_gate S1) */
@media(max-width:767px){.og-k-a .og-k-proof>.og-bl-card{max-width:353px}}
/* -- the rail marks where you are without moving a letter: the semibold face made the label wider the moment it
      became current (a jump while scrolling, a new line break in a long title). The current link keeps the regular
      face and is drawn heavier in place (a stroke in its own colour), in ink. Its labels are the sections' own titles. */
.og-k-a .og-k-rail a[aria-current="true"]{font-weight:400;-webkit-text-stroke:.5px currentColor}
/* -- fit: a tablet's narrow words column takes the short "where" line too (the long one ended on two words there) */
@media(max-width:991px){.og-k-a .og-k-where .og-l{display:none}.og-k-a .og-k-where .og-s{display:inline}}
/* -- measure: an older piece's paragraphs read at about 80 characters a line (they ran 93 to 98 at 760px); its tables keep the full 760 */
.og-k-a .og-k-prose>p,.og-k-a .og-k-prose>ul,.og-k-a .og-k-prose>ol{max-width:640px}
/* -- one reading voice: an older piece's paragraphs are ink like the reel post's (they were the old sheet's grey), and
      its source marks are the same small blue numbers as everywhere else on the page (they were underlined ink) */
.og-k-a .og-k-prose p,.og-k-a .og-k-prose li{color:var(--b-ink)}
.og-k-a .og-k-prose .og-b-src a{color:var(--b-link);text-decoration:none}
/* ==== end of POLISH1005 ==== */

/* ==== PKG BLOGPOST1005 / BUILD (2026-10-05): what the production build adds so EVERY piece fits the Reader, the six
   written before it included. No rule here reaches the reel post he approved: each one is behind a class that only a
   piece with other material carries. ==== */
/* -- a title too long for one line at the sheet's size takes its card form on a desktop too (brand_gate R2: a header
      may shrink 8 percent before it must change form; blog_kit.view sets is-mid from the measured width) */
@media(min-width:1140px){
 .og-k-h1.is-mid{--k:var(--k2)}
 .og-k-h1.is-mid .og-k-w3{display:none}
 .og-k-h1.is-mid .og-k-w2{display:inline}
}
/* -- a step or a list with no picture takes the column */
.og-k-sb.no-pic,.og-k-ug.no-page{grid-template-columns:minmax(0,1fr)}
/* -- a step's picture that is a file of the piece's own */
.og-k-pic.is-photo>img{display:block;width:100%;height:100%;object-fit:cover}
/* -- a piece with several case studies: the home's cards in a row under the column, the home's rows where three cards
      would leave one alone (768 to 991) */
.og-k-studies{scroll-margin-top:calc(var(--og-bar-h,60px) + 28px)}
@media(min-width:768px) and (max-width:991px){
 .og-k-studies .og-bl-grid{display:none}
 .og-k-studies .og-bl-list{display:block;margin-top:10px}
 .og-k-studies .og-bl-list>.og-bl-vrow{padding:14px 0;border-bottom:1px solid var(--b-line)}
 .og-k-studies .og-bl-list>.og-bl-vrow:last-child{border-bottom:0;padding-bottom:0}
}
/* -- a chart draws as many bars as the piece gives it (--bars; six when it does not say) */
/* -- a question with no phone form of its own (the pieces written before the kit): on a phone it stays ONE line while it
      fits at the sheet's size less the 8 percent a header may shrink (23 percent under 375: brand_gate R2), and only
      then takes a second line, at that same floor. It wrapped at the first pixel it missed before. */
@media(max-width:767px){.og-k-qh.is-wrap{font-size:clamp(16.6px,calc((100cqw - 54px) * var(--kp,1)),var(--b-title))}}
@media(max-width:374px){.og-k-qh.is-wrap{font-size:clamp(13.9px,calc((100cqw - 54px) * var(--kp,1)),var(--b-title))}}
/* -- the stats row on the smallest phones: one tile across. Two across leave a label 98px there, and a label's last
      two words are tied (blog_kit.STAT_BOX): a tied pair wider than its tile would stick out of it. */
@media(max-width:359px){.og-k .og-k-stats{grid-template-columns:minmax(0,1fr)}}
/* ==== end of BUILD ==== */