/* ========================================================================== AMIN APAC - profile-blog.css "From their blog", the member's OWN published writing, on the profile. THIS IS NOT FIELD NOTES, AND THE DIFFERENCE IS THE WHOLE REASON IT EXISTS. Both bands are writing by the same agency and they sit on the same page, so if a reader cannot tell them apart at a glance the page has two of the same section: Field notes written FOR AMIN APAC, hosted HERE. Links go to insights-article.html, same tab, our masthead. From their blog written for THEMSELVES, on their own domain. Every link leaves this site, in a new tab, under their masthead. So this band names the domain in its intro, prints it in every byline, and puts an outbound arrow on every card. None of that is decoration - it is the only thing separating the two blocks. WHY NOT SIMPLY LOAD js/syndicated-feed.js, WHICH ALREADY RENDERS THESE RECORDS. profile.html carries a standing note explaining why that file is deliberately absent here: it INJECTS the syndicated records into POSTS, and POSTS is what js/member-profile.js draws Field notes from. Loading it would put the member's own blog posts inside the block headed "Field notes" - the exact collapse this band exists to prevent. So the cards are drawn locally from SYNDICATED instead, and this sheet owns their look end to end. SELF-CONTAINED ON PURPOSE. Every class is prefixed .pblog- and nothing here depends on css/insights.css or css/syndicated.css, both of which this page loads for other blocks. Borrowing .pcard would tie this band to markup that postCardHTML builds for a different context and a different card. DELETABLE SET: this file, js/profile-blog.js, the one
in profile.html, and its two tags in the head and foot. Nothing else references any of them. ========================================================================== */ /* -------------------------------------------------------------------------- 01. The band --sec top and bottom, the page system's ordinary section rhythm. This is not a tone change - the band sits on paper between the work block and the closer - so it pays --sec at both ends rather than the --sec-sm the system reserves for a band handing over to a different ground. -------------------------------------------------------------------------- */ /* THE TOP IS 88, THE BOTTOM IS --sec, AND THEY ARE DIFFERENT ON PURPOSE (2026-09-03). Both were --sec, which made this band sit further from Field notes than Field notes sits from the work grid - three blocks running the same pattern at two different rhythms. 88 is calc(--s14 + --s8), and it is not a new number: css/writing.css sets exactly that between the work block and Field notes, with the measurement that produced it. Field notes carries no margin of its own to add to it - base.css zeroes .profile-block:last-child - so this padding IS the whole gap and can simply be the same value. THE BOTTOM STAYS --sec because it is not spacing two blocks of one pattern. It hands over to the closer, which is a different kind of thing, and the band's own note above explains why it pays a full section step there. */ body.pf-v .pblog{ padding-block: calc(var(--s14) + var(--s8)) var(--sec); } /* AND THE COLUMN ABOVE STOPS PAYING, WHICH IS WHY THE BAND WAS STILL TOO FAR. Setting 88 here fixed half of it. The other half was above the seam: css/profile-v-system.css gives .wrap.profile-cols a --sec-sm bottom padding (40-64px), so the real distance from Field notes to this heading was 88 + 64 = 152 at 1440 - against the 88 between the work grid and Field notes. ONE SIDE PAYS A SEAM, WHICH IS THAT FILE'S OWN RULE, stated a few lines above the declaration this overrides. The band is the payer here because it is the one that has to match a number set inside the column. :not([hidden]) IS LOAD-BEARING. #blogSec ships hidden and js/profile-blog.js unhides it only for a member with three posts on file. Without that clause a member with no blog band - Connect and Span have none - would lose the column's bottom padding to a section that never appears, and Field notes would sit straight on the closer. */ body.pf-v .wrap.profile-cols:has(+ .pblog:not([hidden])){ padding-bottom:0 } /* THE ARROW RULE THAT WAS HERE IS GONE, and so is the arrow. This band hid .pcard-ext for itself on 2026-09-03 on the argument that the heading, the lede and the byline domain already said the card leaves; later the same day the badge was removed everywhere on the same call, so there is nothing left to hide and a display:none against a class no element carries is dead weight. The removal lives in js/syndicated-feed.js and css/syndicated.css - see the note at the head of that sheet. */ /* NO max-width HERE, AND THAT IS THE CORRECTION RATHER THAN AN OMISSION. This block was capped at 62ch so the intro held a reading measure. Once the way-out pill moved into .blk-head inside this block, that cap became a cage: the row is justified space-between, so the pill went to the right edge of a 62ch COLUMN rather than of the band, and landed in the middle of the page with half the grid's width empty beside it. The measure belongs to the prose, so it moved onto .pblog-intro where it was always doing the work. The heading row now spans the full band, which is what puts the pill opposite the heading the way Field notes has it. */ /* 24 UNDER THE LEDE, NOT 40. .mp-lede carries margin:0 0 var(--s6) in css/writing.css, so the two blocks above this one put 24px between their sentence and their cards. This put 40, which is the same mismatch as the heading size above and was visible in the same screenshot. The 12px gap between the heading row and the lede is already the shared value - .blk-head:has(+ .mp-lede) tightens to --s3 for exactly this. */ .pblog-head{ display:grid; gap: var(--s3); margin-bottom: var(--s6); } /* The H2 names the member, like "What does" and "Field notes from ". A heading that names its subject is what a buyer and an answer engine both search for; "Blog" is a label and answers nobody. */ /* ON .profile-block h2's OWN STEP, WHICH IS WHERE IT SHOULD ALWAYS HAVE BEEN (2026-09-03). It ran --pf-h3, the story band's size, which resolves to 34px from 1417px up while "Work from " and "Field notes from " both sit at --pf-h4's 26. Three headings, one job, two sizes - and the odd one out was the block furthest down the page, so it read as the most important of the three. THE TRACKING GOES WITH IT, and that is a rule rather than taste: base.css sets h1-h4 to letter-spacing:0 and css/profile-clients.css records a -0.02em here as the only breach of it on this page. This was the breach. The weight is stated rather than inherited - .profile-block h2 sets 500 and this element is not inside one, so leaving it off left the browser's bold. */ .pblog-h2{ font-size: var(--pf-h4); font-weight:500; line-height:34px; margin:0; } /* THE INTRO CARRIES THE DOMAIN, and that is load-bearing rather than informational: it is the sentence telling a reader that these links are about to take them off this site. */ .pblog-intro{ margin:0; max-width: 62ch; color: var(--ash); font-size:15px; line-height:1.5; } /* -------------------------------------------------------------------------- 02. The grid THE CARDS ARE BACK (client direction, 2026-09-03, reverting the three-row list shipped earlier the same day). That cut took the pictures off, arguing the member's blog illustration lost a comparison with the production photography two bands above. The decision here is the other way: the pictures are the member's own, they are what makes nine posts scannable rather than nine lines of similar-sounding headlines, and a profile that shows a member's work in pictures and their writing as a bare list ranks the second below the first without saying so. THREE UP, AND THE COUNT IS THE REASON. The band takes between three and nine posts, and three columns is the only track count that divides every total in that range without a short last row: 3 is one row, 6 is two, 9 is three. Four columns leaves a single orphan under a full row on a six-post member, which reads as a gap rather than a grid. -------------------------------------------------------------------------- */ .pblog-grid{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap: var(--s10) var(--s6); list-style:none; margin:0; padding:0; } @media (max-width:1024px){ .pblog-grid{grid-template-columns:repeat(2, minmax(0,1fr))} } @media (max-width:640px){ .pblog-grid{grid-template-columns:1fr; gap: var(--s8)} } /* -------------------------------------------------------------------------- 03. The card - THERE ISN'T ONE HERE ANY MORE (client direction, 2026-09-03) This sheet used to carry a whole card: .pblog-card / -link / -media / -ext / -eyebrow / -title / -dek / -meta, about 90 lines of it. All of it is deleted. js/profile-blog.js now emits css/insights.css's .pcard, class for class - the same component postCardHTML builds for the listing and for Field notes. The lookalike was close but not equal (--r-md against .pcard's --r-lg, no media shadow, no inset perimeter, an 18px title against 20/27), and three near-miss cards a screen below a row of real ones read worse than either a match or a clear difference. SO NOTHING ABOUT THE CARD IS SPECIFIED HERE ON PURPOSE. If .pcard's radius, shadow, hover or type moves in insights.css, this band moves with it. A value copied into this file would be the drift the change was made to remove. .pblog-ext WENT WITH THEM - the outbound arrow on the corner of the picture. It was landing on the artwork on image-led posts, and it was the fourth statement of one fact; the aria-label, the domain in the meta line and the band's own lede all still say the link leaves. The reasoning is in the script, next to the markup that no longer draws it. WHAT THIS SHEET STILL OWNS: the band's padding, the header block, the intro, the grid that holds the cards, and the .blk-head override below. Layout, not component. -------------------------------------------------------------------------- */ /* THE ONE COMPONENT RULE THIS SHEET DOES CARRY, and it is here because it is a consequence of what this band OMITS rather than a restyle of .pcard. insights.css sets .pcard-meta{margin-left:auto}. In the listing that is correct and load-bearing: the foot holds the author tile, .pcard-by and the meta, and the auto margin is what pushes the date to the far end so the byline sits left and the date sits right. It is a two-end row. This band emits neither the tile nor the byline - every card is by the member the heading has just named - so the meta is the foot's ONLY child, and margin-left:auto pushed it to the right-hand edge with nothing opposite it. A lone date hard against the right of a rule, under a left-set headline and a left-set dek, reads as a stray rather than as the foot of the card. SCOPED TO .pblog-grid, NOT FIXED IN insights.css, because the auto margin is right everywhere the foot has two ends - the listing, the hub, Field notes. Specificity (0,2,0) beats the (0,1,0) it overrides, and it agrees with what that sheet already does for itself below 520px, where the byline wraps and it sets margin-left:0 for exactly this reason. */ .pblog-grid .pcard-meta{margin-left:0} /* -------------------------------------------------------------------------- TWO LINES FOR THE TITLE, EVERYWHERE (client direction, 2026-09-03), REVERSING THE THREE-LINE OVERRIDE THIS RULE CARRIED FOR one afternoon. THAT OVERRIDE WAS RIGHT ABOUT THE FACTS AND WRONG ABOUT THE CALL. A member's own blog titles are SEO titles off their WordPress index - Unicom's longest runs 88 characters - and two lines does cut into the subject on the long ones ("...How to Use Customer Question..."). All true. The client's answer is that a clipped headline over a one-sentence dek is still the better card than a title running three or four lines deep and pushing every dek and foot in the row down with it - which is what insights.css's OWN three-line default does below 840px, on every card in this band, on every width, not only the long ones. SO THIS IS NOW UNCONDITIONAL: two lines under 840px too, where insights.css's default was three. Above 840px this simply restates what insights.css already does - the explicit value is here so the rule reads as one decision at every width rather than "override below 840, agree above it". THE FOOT STAYS LEVEL EITHER WAY. That is what the .pcard{height:100%} rule below actually fixes - a card that does not fill its cell - and it holds regardless of how many lines the title clamps to. -------------------------------------------------------------------------- */ .pblog-grid .pcard-t{-webkit-line-clamp:2} /* AND THE CARD HAS TO FILL ITS CELL FOR THAT TO BE FREE. .pcard-foot carries margin-top:auto, which pins it to the bottom of THE CARD - and the card was not the full height of the row. The
  • stretches (grid's default), the inside it did not, so a card with a short title stopped 27px above its cell floor and took its foot with it. Measured at 1440 on member-unicom.html: li 526/526/526, card 499/499/526, feet 4782/4782/4809. IT WAS ALREADY WRONG BEFORE THE THREE-LINE CLAMP ABOVE - the row only looked level because all three of Unicom's titles happened to wrap to two lines. Any member whose titles differ in length had the same 27px step; brandigo and custommedia both did, and both are level now. So this is the rule that makes "the feet all line up" actually true rather than incidental. height:100% rather than align-items:stretch on the grid, because the
  • is already stretching correctly - it is the anchor inside it that needs to be told to fill it. */ .pblog-grid .pcard{height:100%} /* -------------------------------------------------------------------------- 04. The way out THE FOOT LINK IS GONE (client direction, 2026-09-03). .pblog-all was a text link over a hairline at the very bottom of the band. It is now a pill in the heading row, reusing .blk-head and .blk-more out of css/writing.css so this band and the Field notes block above it are the same object rather than two designs for one job. That sheet makes the argument itself: one block whose "more" is a pill and another whose "more" is a text link read as two different kinds of block when they are the same kind twice. It also moves the control off the foot of a very long page, where the reader has stopped looking, to a position beside the heading. .blk-head CARRIES ITS OWN margin-bottom, WHICH IS WRONG INSIDE THIS HEADER. That value was set for a row sitting straight on top of a card grid. Here the row has the intro sentence under it and .pblog-head's own grid gap already spaces the two, so the margin would stack with that gap and open a hole between the heading and the line explaining it. Zeroed here rather than changed in writing.css, where the original value is right for the two blocks that use it. width:100% because the row is a flex container inside a grid whose other children are full-width text. Without it the track shrink-wraps and the pill sits tight against the heading instead of out at the far edge. -------------------------------------------------------------------------- */ .pblog-head .blk-head{margin-bottom:0; width:100%} /* -------------------------------------------------------------------------- 05. THE CAP AND ITS BUTTON ARE GONE (client direction, 2026-09-03) What stood here: .mp-posts.is-capped hiding .pcard.is-extra, and .pblog-more pushing a second pill to the end of the heading row. Both existed to show three of nine cards and reveal the other six in place. The band still shows three. The other six are now in the filtered listing, behind the single pill this block's siblings already use - so there is nothing to hide, nothing to reveal, and no second control to weight against the first. js/profile-blog.js renders three cards and stops. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .pblog-media img{transition:none} .pblog-link:hover .pblog-media img{transform:none} }