/* ========================================================================== content-hub.css - the field-notes band on index.html. ADDITIVE. This sheet plus js/content-hub.js and the
in the markup are one deletable unit. It loads AFTER css/insights.css, which supplies the note card itself: the band declares its own three-column shell and nothing else about how a card looks, so the card on the landing page and the card on insights.html cannot drift. WHY THE BAND IS HERE, between the constellation and the closer. The page already argues in order: who they are (the directory), what they add up to (the constellation), and then this - what they know. Intelligence is the last piece of evidence before the ask, and the ask immediately follows it. It is NOT above the constellation: the constellation is the directory's own abstraction and splitting the two breaks that argument. The one thing this costs, handled below: network-graph.css declares `.netsec + .closer .wrap{padding-top:var(--s14)}`, and the band now sits between them, so that adjacency no longer matches. The rule is re-made for `.hub + .closer` at the foot of this file rather than edited in the shared sheet. THE THIRD COLUMN. The reference layouts put a live trending rail here. This site cannot honestly show search volumes it does not measure, so the rail shows the one live thing it genuinely has: the working day, right now, across all ten cities, computed from the reader's own clock. It is the page's headline claim - one continuous day from Karachi to Auckland - stated as a fact that is true at the moment it is read rather than as a sentence in a footer. ========================================================================== */ /* WHITE, and the border is gone with the tint. The band sat on --offwhite directly below .netsec, which is also --offwhite - the two ran together, so a 1px --line rule was drawn across the top to separate them. Flipping the band to --surface separates them with a tone change instead, which is the job a surface is for. */ .hub{background:var(--surface)} .hub{padding:var(--sec) 0} .hub .wrap{padding-top:0;padding-bottom:0} /* --- head ---------------------------------------------------------------- */ /* CENTRED, to match the page rather than to decorate the band. Measured across index.html at 1440: .directory-head, the constellation head and .closer-box all compute text-align:center, and this was the only content section still ranged left - so left was the exception here, not the convention. Block and not flex. The head used to be a flex row because it held the market select and the way-out link on its right edge; with the select gone there is one action left, and a two-item space-between holding a heading block against a single button is what made the ranged-left version necessary. The button drops below the deck instead, which is also the stronger place for it - it reads as the section's next step rather than as a utility parked in the corner. Same shape .directory-head uses two sections above. */ .hub-head{display:block;text-align:center;margin-bottom:var(--s10)} /* The head is two blocks: what this band is on the left, the way out of it on the right, sharing one baseline via align-items:flex-end above. A "Reading from" market select used to sit beside that link inside a .hub-head-acts flex wrapper, with a visually-hidden .hub-status announcing the reorder to screen readers. Both are gone with the control - see the note in index.html. The wrapper went too: two children is what justify-content :space-between already does, and a flex box around a single link is a container that exists only to be read in a stylesheet. */ .hub-head .eyebrow{margin-bottom:var(--s3)} /* The measures stay - centring a heading is not licence to let it run the full 1360px grid. auto margins rather than text-align alone, so the CAP is what centres the block and the ragged edge stays symmetrical. */ .hub-head h2{max-width:22ch;margin-inline:auto} .hub-deck{ margin:var(--s4) auto 0;max-width:52ch; color:var(--gray);font-size:17px;line-height:26px; } .hub-head .btn{margin-top:var(--s6)} /* The way out is .btn.btn-fill.btn-primary from base.css - the shared button, not a local one. There is no .hub-all rule here any more and there should not be one again. What was here was a hand-drawn text link: colour var(--purple), 16px/500, a 2px bottom pad and an inset box-shadow underline on hover. Every one of those values already existed as .btn-ghost in base.css, down to an identical hover line - so the band was carrying a second copy of a component the system already shipped, free to drift the moment either was touched. Deleted rather than re-pointed: the fix for a duplicate is one definition, not two that agree today. */ /* --- the three columns --------------------------------------------------- Measured, not chosen. The rail needs 300 to hold "New Zealand" beside a time without wrapping; the list needs about 360 before its two-line titles start breaking after one word; the lead takes what is left and stops being a lead below about 420. Those three floors add up to 1080 plus two 40px gutters, which is the width the first collapse happens at. */ .hub-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 320px; gap:var(--s10);align-items:start; } /* Set by content-hub.js when every dated signal has passed and the rail has removed itself. Two columns, and the lead keeps its lead. */ .hub-grid.is-no-rail{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)} @media (max-width:1180px){ /* The rail drops under the two content columns first. It is the supporting act of the three and it is the one that reads fine at full width. */ .hub-grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);} .hub-rail{grid-column:1 / -1} /* Full width, so the five signals lay out across the track instead of stacking down a column that is no longer narrow. The rule that removes the last row's border is switched off here - in a grid, "last child" is one cell of the bottom row, not the whole row - and every cell takes a top border instead, which is the one edge that is correct in both layouts. */ .hub-rail-list{ display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:0 var(--s8); } .hub-watch{border-bottom:0;border-top:1px solid var(--line);padding:var(--s5) 0} .hub-watch:last-child{padding-bottom:var(--s5)} } @media (max-width:820px){ .hub-grid{grid-template-columns:1fr;gap:var(--s10)} } /* --- column 1: the lead -------------------------------------------------- The note card from insights.css at its wide crop. No second template. */ .hub-lead .pcard-t{font-size:24px;line-height:32px} .hub-lead .pcard-dek{font-size:16px;line-height:25px;-webkit-line-clamp:4} .hub-lead .pcard-body{padding:var(--s7)} /* --- column 2: the recent list ------------------------------------------- */ .hub-list{display:flex;flex-direction:column} .hub-row{ display:grid;grid-template-columns:minmax(0,1fr) 96px; gap:var(--s5);align-items:start; padding:var(--s5) 0; border-top:1px solid var(--line); text-decoration:none; } /* The first row's rule is the one that would sit directly under the section head, where it reads as a divider the section did not ask for. */ .hub-row:first-child{border-top:0;padding-top:0} .hub-row-k{ display:block;margin-bottom:var(--s2); color:var(--ac,var(--purple));font-size:11px;font-weight:500; letter-spacing:.14em;text-transform:uppercase; } .hub-row-t{ display:block;color:var(--black);font-size:18px;font-weight:500;line-height:26px; text-wrap:balance; transition:color 180ms ease-in-out; } .hub-row:hover .hub-row-t{color:var(--plum)} .hub-row-m{display:block;margin-top:var(--s2);color:var(--ash);font-size:13px} /* The thumbnail is the same untreated photograph as the card, at a size where the city is a texture rather than a picture. It is square because at 96px a 16:10 crop is an indistinct stripe. The ground comes from insights.css, which is loaded first and already names .hub-row-media in that rule. Only the size, the crop and the hover belong here. It used to be the duotone that came from there; that was removed on 2026-08-31 and the note in insights.css records what went with it. */ .hub-row-media{ position:relative;overflow:hidden; width:96px;aspect-ratio:1;border-radius:var(--r-md); } .hub-row-media img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform 600ms cubic-bezier(.2,.7,.3,1); } .hub-row:hover .hub-row-media img{transform:scale(1.06)} @media (max-width:560px){ .hub-row{grid-template-columns:minmax(0,1fr) 72px;gap:var(--s4)} .hub-row-media{width:72px} } /* --- column 3: the watchlist -------------------------------------------- Replaced a live clock rail. That rail proved the network's GEOGRAPHY inside a band whose job is to prove its EXPERTISE, which is why it went; the clock itself was good and belongs beside the statbar, where "one continuous day from Karachi to Auckland" is the claim being made. ------------------------------------------------------------------------ */ /* --haze, the same fill .pcard uses, now that the band beneath is white. This also settles an inconsistency that predates the flip: the lead card was already --haze while the rail beside it was --white, so the two panels in one three-column band sat on different surfaces for no stated reason. They agree now, and the keyline goes - a filled panel on a white ground does not need an outline as well, and .pcard has never had one. */ .hub-rail{ background:var(--haze);border:0;border-radius:var(--r-lg); padding:var(--s6); } .hub-rail-head{ display:flex;align-items:baseline;gap:var(--s3); padding-bottom:var(--s5);border-bottom:1px solid var(--line); } .hub-rail-head h3{font-size:17px;font-weight:500;line-height:24px} .hub-rail-n{margin-left:auto;color:var(--ash);font-size:12px;white-space:nowrap} /* The pulsing green dot went with the clock. It said "this is changing while you look at it", which was true of a wall clock and is not true of a dated watchlist - keeping it would have been a live-data signal over content that changes when somebody edits a file. */ .hub-rail-list{margin-top:var(--s2)} .hub-watch{ display:block;padding:var(--s4) 0; border-bottom:1px solid var(--line); text-decoration:none; } .hub-watch:last-child{border-bottom:0;padding-bottom:0} /* The market takes its own ramp colour, so the rail reads west to east in the same sequence as the map, the cards and the list beside it. */ .hub-watch-top{display:flex;align-items:baseline;gap:var(--s3);margin-bottom:var(--s2)} .hub-watch-m{ color:var(--ac,var(--purple));font-size:11px;font-weight:500; letter-spacing:.14em;text-transform:uppercase; } /* Tabular, and ranged right: five dates in a column are a schedule, and a schedule that does not line up reads as a list of unrelated facts. */ .hub-watch-w{ margin-left:auto;color:var(--ash);font-family:var(--mono);font-size:11px; letter-spacing:.04em;text-transform:uppercase;font-variant-numeric:tabular-nums; white-space:nowrap; } /* 14/21, a step below the list column beside it. The signals are the shortest text in the band and the most numerous; at the list's own size four of them read as a fifth, sixth, seventh and eighth headline competing with the four real ones. A step down makes the rail supporting material, which is what it is. */ .hub-watch-what{ display:block;color:var(--slate);font-size:14px;line-height:21px; text-wrap:pretty; } .hub-watch.is-linked:hover .hub-watch-what{color:var(--plum)} .hub-watch-by{ display:block;margin-top:var(--s2); color:var(--ash);font-size:12px;line-height:19px; } /* The link affordance lives here rather than on the whole row, because half these rows are not links. A row with no note still earns its place - it says the market is being watched and nothing is written yet - and it must not look clickable while it says so. */ .hub-watch-go{ display:block;margin-top:2px; color:var(--purple);font-weight:500; transition:color 180ms ease-in-out; } .hub-watch.is-linked:hover .hub-watch-go{color:var(--purple-deep)} /* THE BALANCE RULE, and it is a rule rather than a pixel budget on purpose. The previous note here recorded that four signals "lands the rail at roughly 660 and the three columns finish together". Measured at 1440 the columns were lead 604, list 683, rail 777 - so the budget had gone stale and nothing in the file could tell. Absolute targets rot the moment the copy changes. The rule instead: NO COLUMN MAY END MORE THAN ONE ROW-HEIGHT ABOVE THE TALLEST. A row is ~120-170px here, so the band reads as three columns that stop at slightly different points rather than one column left hanging. It survives a copy edit, because it is measured against the band's own rows. Removing .hub-rail-note took the rail from 777 to 679. Measured after: 1440 lead 604 list 683 rail 679 worst gap 79 INSIDE (row 120) 1280 lead 587 list 735 rail 679 worst gap 148 over by 28 1024 stacked - the rail goes grid-column 1/-1 and the rule does not apply 1280 is the one that misses, and it misses because the LIST grows there, not because the rail does: narrower columns wrap the row titles onto a third line and the middle column runs to 735 while the lead card only reaches 587. The fix, if it is worth one, is in the lead card or the row titles at that width - taking a fourth signal out would shorten the column that is already the shortest of the three and make the gap worse, not better. Re-probe before changing anything here; do not trust this paragraph's numbers either. */ /* --- the adjacency the band displaced ----------------------------------- `.hub + .closer .wrap{padding-top:var(--s14)}` stood here, re-making the top padding network-graph.css gave the closer when the constellation was its neighbour. Both rules are gone: .closer now carries symmetric --sec-lg padding of its own and is indifferent to what precedes it, so deleting this band no longer breaks the spacing of the section after it. */ @media (prefers-reduced-motion: reduce){ .hub-row:hover .hub-row-media img{transform:none} }