/* ==========================================================================================================
ELLIS STERLING v2, INSIGHTS LAB, DIRECTION C: "START FROM YOUR SITUATION". A prototype. Loaded only by the pages
in insights-lab/c/ (written by _plan/build_lab_hub.py, which runs insights-lab/c/_make.py), after site.css and
inner.css. Nothing live loads it. Plan: _plan/INSIGHTS-REDESIGN.md section 5, as revised after the design review of
2026-10-15; then the owner's brief of 2026-10-16 (hub v2 and the related-guides row, sections 7 and 9).
HUB v2 (2026-10-16), the owner's Tony Robbins reference in this system: a dark head with the title and a search
that filters the guides as you type (until the search moved to the library, below); the featured row (the four questions most visitors arrive with: one large
card, three stacked), which is the start-here entry; then on ivory a quiet topic row over the library grid. Every
card has a cover from one duotone series (assets/img/lab/covers), its topic and its reading time. At the end of
each guide, related guides as a row that scrolls sideways with arrow buttons. v1 of the hub (below) is kept at
insights-lab/c/index-v1.html for comparison, so its rules (sections 2 to 4) stay.
Second pass (the design and function reviews of 2026-10-16): "All guides" on the ivory, compact search results,
topic and time together in the meta line, a tighter head, a new cover series. Top redesign (2026-10-16, the
owner's notes): no example searches under the field, the start-here guides as white tiles with the photograph
inside the tile, a one-column head, and size that falls as you scroll (the start-here tiles largest, the library
one compact card of one size in every state, a part-empty last row allowed). Fix round (the reviews of that
redesign, 2026-10-16): the Robbins arrangement (one large tile, three stacked) is the default and the four equal
tiles the alternative (?top=a); the count line no longer moves the field; row tiles below 1200px in both; the ITIN
tile's lifted plate; "All insights" in the statement role; the library one column to 767px. Search moved
(2026-10-16, the owner): the field left the dark head for the head of the ivory library, beside "All insights",
with the topic row; the tiles no longer step aside while searching. Its review round (the same day): the stacked
questions stay a step over a library title on short laptops, a chosen topic gets a count, the count line takes
no room while it is empty, a link with a search arrives under the site's bar, and ?top=a fits the first screen.
The reasons are at the head of section 9 and in section 7.
The idea: a reader arrives with a situation and a question, and the section meets them in that order.
- The hub starts from the situation: for your company, or in your own name? The two overview guides are two
cards on the title band. Below, every other guide is listed by its TITLE and intro, stage by stage, each stage a
block with its name and sentence on the left. Insights lists no questions anywhere: the questions people ask
on every call moved to the services page (_partials/questions-block.html), and a list of question lines with
grey text under them is what that block looks like.
- A guide answers first. On the ivory, before any section: the one question the guide exists to answer and the
answer in two or three sentences, set in the site's lead role, then a hairline, then the explanation. That
opening is what makes C a direction of its own: B opens on its contents rail, A on its sheet of paper, C on the
answer. "In this guide" follows the answer: beside the sections from 1200px, and below that, on guides of
more than eight sections, as a closed row under the answer (section 6).
- Read next: three cards on forest, after the article and before the call. Each is led by the guide's title, the
same words the reader will see as the next page's title, with the question it answers for this reader under it.
What the review changed (2026-10-15), and why:
- Hub entries lead with the guide's title, not a question, and the per-guide question field is gone from the
data: twelve question lines on hairlines was the FAQ grammar the owner had just moved out, and five of them
repeated that block.
- Each stage is a block, its name and sentence on columns 1 to 4 and its guides in one column on 5 to 12, so the
stage labels its guides instead of sitting over a half-empty row, and no stage ends on an empty cell. The stage
name moved up to the statement size of the starting cards (31.7px at 1440), 1.61 times the guide titles.
- "In short" is gone. It printed the section headings a second time, word for word, as underlined links. Its
place is taken by the answer, and its links by "In this guide", which says what it is: from 1200px beside the
sections, where it fills the open left at no cost in height and marks where you are (the founders' guide had
no way around it once "In short" scrolled away); below 1200px a closed row, only on guides long enough to
need it.
- Read-next cards lead with the guide's title (the binding card spec, and the clicked words then match the next
page's h1); the question moved under it.
- The overviews' meta sentence no longer links to a stage that does not list them.
- The article head is back on the spine (x = 72 at 1440), so the logo, the trail and every page title share one
edge across the hub and the guides.
- The starting cards line up across the row (subgrid), and fill their width.
- Reading time rounds up, as in A and B.
Kept as it was, on purpose: the forest read-next band followed by the deep closing call (see section 7).
Built from site.css (tokens, grounds, the 12-column grid, .t-h2, .t-lede, .t-body, .t-small, .lnk, .btn-bronze)
and inner.css (the page head and breadcrumb trail, the prose role, the note, the guide link's type, the table, the
sources list, the closing call, the current page in the chrome). Nothing here adds a colour or a font: the card is
ivory-hi, every other colour is a ground token. Retired for C: the ledger article (.ar-sec, .ar-side, TRAVEL),
the read-next ledger (.rn) and the hub ledger (.ix-*). None of those classes appear in the lab pages.
Order: 1. tokens 2. the card (v1 hub) 3. v1 hub: head and starting cards 4. v1 hub: the stages
5. article head 6. article body: the column, the answer, In this guide, sections, margin, steps, table,
sources 7. related guides (the row at a guide's end) 8. states (hover, press, focus) 9. hub v2
10. print
Sizes in comments are at 390 / 1280 / 1440 unless they say otherwise.
========================================================================================================== */
/* 1. TOKENS
--fs-stmt the statement size: the starting cards' titles and the hub's stage names, 22 / 28.2 / 31.7px (the
homepage's engagement statement). The largest lines on the hub after the page title, because they are
the two things a reader picks first: where they start, and which stage they are in.
--fs-card a read-next card's title: 20 / 22.7 / 23.4px. A step over a name (--fs-sub, 17 / 19.3 / 19.7) and a
step under a statement (--fs-sec, 22 / 24.3 / 27.4), so a card reads as a heading of its own without
competing with "Read next" above it.
--pad-card the card's padding: 20 / 30.7 / 34.6px.
--toc-top where "In this guide" stops when it stays in view: the scroll-up bar's height plus 24px, so the bar
never covers it.
--fs-lead (hub v2) the large featured question: 24 / 32.4 / 36px at 390 / 1024 / 1440. The largest line on the hub
after the page title (53px at 1440), and a clear step over a card title (23.4px). */
:root{--fs-stmt:clamp(1.375rem,2.2vw,2.125rem);--fs-card:clamp(1.25rem,1.1rem + .4vw,1.5rem);--pad-card:clamp(20px,2.4vw,36px);
--toc-top:calc(var(--bar-h) + 24px);--fs-lead:clamp(1.5rem,1rem + 1.6vw,2.25rem)}
/* 2. THE CARD (li.c-card), v1 hub only since 2026-10-16: one link stretched over an ivory-hi panel. Used for the two
starting guides on the v1 hub's deep head (read next, its other use, is now the related-guides row, section 7). No border, shadow or radius: the change of ground is the edge (ivory-hi on deep 14.7:1, on
forest 13.0:1). The card sets the ink tones for what is inside it, but not --focus: the ring is drawn outside the
card, on the band, in the band's focus colour (section 8). A flex column, so "Read" sits at the foot and lines up
across a row of unequal texts. */
.c-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:var(--pad-card);background:var(--ivory-hi);
color:var(--ink);--fg:var(--ink);--fg2:rgba(7,23,17,.72);--mark:var(--bronze-dk)}
/* the link covers the card, so the whole panel is the target and a new tab opens from anywhere on it */
.c-card-link::after{content:"";position:absolute;inset:0}
/* "Read" with the bronze arrow: hidden from assistive tech (the link already says where it goes), the only sign on a
touch screen that a text panel is a link. 24px over it at least; the auto margin takes the rest. */
.c-card-go{display:flex;align-self:flex-start;gap:8px;margin-top:auto;padding-top:24px;font-family:var(--sans);font-weight:600;
font-size:.9375rem;line-height:1.3;letter-spacing:.01em;color:var(--fg)}
.c-card-go span{display:inline-block;color:var(--mark);transition:transform .2s var(--out)}
/* The underline that answers hover and press sits on its own span (.u), transparent at rest, so it never runs under
a space or an arrow. */
.u{text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:.2em}
/* 3. HUB HEAD (header.ph.g-deep.c-hubhead). "Insights" (.t-h2) and the map's line (.t-lede) on the spine, then the
first question the hub asks, as two doors: the founders' guide (for your company) and "in your own name". They sit
on the title band, before any list, because they are where a reader starts; the titles name the reader, so there
is no audience label. Side by side on columns 1 to 6 and 7 to 12, stacked below 960px with 12px between them. The
head's padding under the cards (--gap-group) comes from inner.css.
The two cards share three rows (a subgrid): title, intro, "Read". The founders' title takes two lines and the other
one, so without it the intros started 38px apart; now both intros start on one line and both "Read" sit on one
line. The intro fills the card (about 61 characters a line at 1440) instead of stopping at 48ch with a third of the
panel empty beside it. */
.c-starts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(3,auto);column-gap:var(--col-gap);
margin-top:var(--gap-head)}
.c-start{grid-row:span 3;display:grid;grid-template-rows:subgrid;row-gap:0}
/* The title is the statement size (22 / 28.2 / 31.7px), Light 300 like every serif line at this size on the site.
At most 14em, so both titles break the same way, into two balanced lines that end on the reader's situation
("to US banking and credit", "in your own name"), and neither card has a blank line under its title. */
.c-start-h{font-family:var(--serif);font-weight:300;font-size:var(--fs-stmt);line-height:1.2;letter-spacing:-.008em;
text-wrap:balance;max-width:14em;color:var(--fg)}
.c-start-x{margin-top:12px;max-width:62ch;font-family:var(--sans);font-weight:370;font-size:var(--fs-body);line-height:1.55;
color:var(--fg2);text-wrap:pretty}
.c-start .c-card-go{align-self:end}
@media (max-width:959px){
.c-starts{grid-template-columns:minmax(0,1fr);grid-template-rows:none;row-gap:12px}
.c-start{grid-row:auto;display:flex}
.c-start .c-card-go{align-self:flex-start}
}
/* 4. HUB STAGES (div.c-ix.g-ivory > section.c-stage#understand, #plan, #do). The other twelve guides in the three
stages of the path, --sec apart.
From 960px each stage is one block under a hairline that runs across the whole measure: on columns 1 to 4 the
stage's name (the statement size, Light 300) and its one sentence (.t-body, second tone), on columns 5 to 12 its
guides in one column. The stage is the label of its block, the way a report's index names a part beside its
chapters, so it reads as structure rather than as a heading over a list; nothing sits half empty beside it, and
an odd number of guides leaves no hole. The stage name's first line shares a baseline with the first guide's title.
It does not stay in view as you scroll: the largest stage is 5 guides, about 640px at 1440, less than a screen, so
its name is in view with its guides anyway.
A guide: its title in the name role (Source Serif 4 400 at the prose size, 17 / 19.3 / 19.7px, full colour) with
the bronze arrow every text link on the site carries, glued to the last word; 8px under it, its intro from the map
(Source Sans 3 370, 16px, second tone, at most 62ch). The stage name is 1.41 / 1.46 / 1.61 times the title at 390 /
1280 / 1440 (1.29 at 1024), so a stage always reads as the larger level; at the card-title size tried first, the
guide titles came out heavier than their stage names on phones and tablets. A hairline between guides, 20px over a title and 24px under an intro. The title
is the link and its name; the link stretches over the whole entry, so the entry is the target.
Below 960px: the stage name and sentence, --gap-head, then the guides, each with a hairline on top. */
.c-ix{padding-block:var(--sec)}
.c-stage{align-items:first baseline;border-top:1px solid var(--rule)}
.c-stage+.c-stage{margin-top:var(--sec)}
.c-stage-l{grid-column:1/5;min-width:0;padding-top:20px}
/* the statement size, held at 24px at least, since Light 300 needs the size to lead Regular titles under it */
.c-stage-h{font-family:var(--serif);font-weight:300;font-size:max(1.5rem,var(--fs-stmt));line-height:1.2;letter-spacing:-.008em;
text-wrap:balance;max-width:12em;color:var(--fg)}
.c-stage-h+.c-stage-x{margin-top:12px}
.c-stage-x{max-width:34ch}
.c-gl{grid-column:5/13;min-width:0}
.c-g{position:relative;padding-block:20px 24px;border-top:1px solid var(--rule)}
.c-g:first-child{border-top:0}
.c-g:last-child{padding-bottom:0}
/* the text block shrinks to its text, so the focus ring (section 8) fits the entry's words, not the whole row */
.c-g-in{width:fit-content;max-width:100%}
.c-g-h{font-family:var(--serif);font-weight:400;font-size:var(--fs-sub);line-height:1.3;max-width:30em;text-wrap:pretty;color:var(--fg)}
.c-g-link::after{content:"";position:absolute;inset:0}
.c-g-a{color:var(--mark)}
.c-g-x{margin-top:8px;max-width:62ch;font-family:var(--sans);font-weight:370;font-size:1rem;line-height:1.55;color:var(--fg2);
text-wrap:pretty}
@media (max-width:959px){
.c-stage{border-top:0}
.c-stage-l,.c-gl{grid-column:1/-1}
.c-stage-l{padding-top:0}
.c-stage-x{max-width:none}
.c-gl{margin-top:var(--gap-head)}
.c-g:first-child{border-top:1px solid var(--rule)}
}
/* 5. ARTICLE HEAD (header.ph.g-deep.c-arhead). The trail, the title, the intro and one meta sentence, on the spine as
on every page, so the logo, the trail, the title and the hub's title share one left edge. The meta sentence (v2):
"A 3 minute read on the ITIN and the EIN. Last reviewed October 15, 2026.", the topic linking to the hub with that
topic's search in the field (#q=, second pass: the topic row is off by default), so a reader who arrives from a
search engine can reach the other guides on the same subject; "getting started" links to the hub's start. The
minutes are the hub card's (_make.py meta_sentence, from _hub-data.json). */
.ph-meta a{display:inline-block;padding-block:12px;margin-block:-12px;text-decoration-line:underline;text-decoration-thickness:1px;
text-underline-offset:.2em;transition:color .18s ease,opacity .1s var(--out)}
.ph-meta a:active{opacity:.72}
/* 6. ARTICLE BODY (div.ar-main.c-body, ivory; the ar-main class is what insights-track.js measures).
ONE READING COLUMN on the middle of the grid: columns 4 to 9 from 1200px (403 to 1037px at 1440, a column start the
homepage's four steps already use), columns 3 to 10 from 960 to 1199px, the full measure below 960px. Prose keeps
its 59ch inside it (577px at 1440). Headings are in the column, so the page reads top to bottom on one edge.
THE MARGIN: notes and related-guide links sit in columns 10 to 12 from 1200px, level with the first line of the
text they belong to (first baselines aligned), the way a footnote sits beside its paragraph in a printed report;
below 1200px they follow that text in the column.
THE LEFT: list markers and step numerals hang into it, so every line of text starts on the column's edge, and
"In this guide" sits there beside the sections. */
.c-body{padding-top:var(--gap-group);padding-bottom:var(--sec)}
.c-lead-in,.c-h,.c-text,.c-src-in{grid-column:4/10;min-width:0}
.c-aside{grid-column:10/13;min-width:0}
.c-steps{grid-column:4/13}
.c-dt{grid-column:4/13}
@media (min-width:960px) and (max-width:1199px){
.c-lead-in,.c-h,.c-text,.c-src-in,.c-aside,.c-steps{grid-column:3/11}
.c-dt{grid-column:3/13}
}
@media (max-width:959px){.c-lead-in,.c-h,.c-text,.c-src-in,.c-aside,.c-steps,.c-dt{grid-column:1/-1}}
/* THE ANSWER (div.c-lead): the guide's question in the statement role (Source Serif 4 400 at --fs-sec, the size of
the section headings, because it is the heading of the first thing you read), then the answer in two or three
sentences in the site's lead role (.t-lede: Source Sans 3 300, 18 / 20.5 / 23px, full colour). The lead role is
one step above the prose (19.7px at 1440), so the answer reads as the guide's opening statement without a box
around it; a panel would need a ground the palette does not have (ivory-hi on ivory is 1.07:1). Then
--gap-head, a hairline across the column, and --gap-group: the larger space falls after the rule, so the rule ends
the answer, and what follows is the explanation. The question is written for this guide only and is never listed
(_lab-c.json). */
.c-lead-in{padding-bottom:var(--gap-head);border-bottom:1px solid var(--rule)}
.c-ask,.c-h{font-family:var(--serif);font-weight:400;font-size:var(--fs-sec);line-height:1.2;letter-spacing:-.005em;
text-wrap:balance;max-width:22em;color:var(--fg)}
.c-ask+.c-answer{margin-top:16px}
/* The lead role's own size drops under the prose size between about 960 and 1150px (18 against 18.6px at 1024), so
the answer is held at least 2px over the prose: 19 / 20.6 / 21.3 / 23px at 390 / 1024 / 1280 / 1440. */
.c-answer{max-width:56ch;font-size:min(1.4375rem,max(1.6vw,calc(var(--fs-prose) + 2px)))}
/* THE FLOW (div.c-flow): "In this guide" (nav.c-toc) and the sections (div.c-secs).
IN THIS GUIDE names the list, as "Contents" does in a book (Source Sans 3 600 14px); under it the section headings
as jump links, Source Sans 3 400 15px in the second tone, no markers, no underline at rest, the full stop outside
the link so an underline never runs under it.
From 1200px, on every guide: on columns 1 to 3 beside the sections, from the first section to Sources, staying in
view (sticky, --toc-top) while you read. There it costs no height and turns the open left into the guide's map. It
starts under the answer, not beside it, so the answer opens the page alone; that order is the difference from B,
whose rail starts at the top. insights-lab/c/lab-c.js marks the section you are reading: full colour and an
underline, the nav's own mark for "you are here", with aria-current="location". The list sits above the sections'
box (z-index), which spans the whole grid row so that the sections keep the page's column numbers. A list taller
than the window scrolls inside itself. Below 1200px it is not shown (the next block takes over). */
.c-flow{margin-top:var(--gap-group);align-items:start}
.c-secs{grid-column:1/-1;grid-row:1;min-width:0}
.c-secs>.c-sec:first-child{margin-top:0}
.c-toc{grid-column:1/4;grid-row:1;min-width:0;position:sticky;top:var(--toc-top);z-index:1;
max-height:calc(100vh - var(--toc-top) - 24px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
scrollbar-color:var(--rule) transparent;margin-left:-6px;padding:0 var(--col-gap) 6px 6px}
.c-toc-h{font-family:var(--sans);font-weight:600;font-size:.875rem;line-height:1.5;letter-spacing:.01em;color:var(--fg)}
.c-toc-list{margin-top:6px}
.c-toc-list li{padding-block:6px;font-family:var(--sans);font-weight:400;font-size:.9375rem;line-height:1.35;letter-spacing:.005em;
color:var(--fg2);text-wrap:pretty}
.c-toc-list a{text-decoration-line:underline;text-decoration-color:transparent;text-decoration-thickness:1px;
text-underline-offset:.2em;transition:color .16s var(--out),text-decoration-color .16s var(--out)}
.c-toc-list a[aria-current]{color:var(--fg);text-decoration-color:currentColor}
.c-toc-list li:has(>a[aria-current]){color:var(--fg)}
.c-toc-list a:active{color:var(--fg);text-decoration-color:var(--mark)}
@media (max-width:1199px){.c-toc{display:none}}
/* IN THIS GUIDE BELOW 1200px (nav.c-toc-m > details, inside the answer block): only on guides of more than eight
sections (the founders' guide has eleven; the ITIN guide's eight headings scan without help). Open, the founders'
list is 527px on a phone, which put the first section 1.7 screens down; closed, it is one 52px row. It takes the
place of the hairline that ends the answer: --gap-head, a hairline, the row, a hairline, so the answer still ends
on a rule and the sections follow --gap-group later. The row is the control: "In this guide" in the text-link
role (Source Sans 3 600 15px) with the questions block's own plus mark after it (inner.css .faq-mark), which turns
to a minus when open. Opening shows the same list at 16px with 38px rows for touch; nothing is marked. A native
details element, so it needs no script, works with JS off, and find-in-page opens it. */
.c-toc-m{display:none}
@media (max-width:1199px){
.c-lead-in:has(.c-toc-m){padding-bottom:0;border-bottom:0}
.c-toc-m{display:block;margin-top:var(--gap-head);border-block:1px solid var(--rule)}
.c-toc-m summary{display:flex;align-items:center;min-height:52px;cursor:pointer;list-style:none;font-family:var(--sans);
font-weight:600;font-size:.9375rem;letter-spacing:.01em;color:var(--fg);transition:opacity .1s var(--out)}
.c-toc-m summary::-webkit-details-marker{display:none}
.c-toc-m summary:active{opacity:.72}
.c-toc-m summary:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.c-toc-m details[open] .faq-mark::after{transform:rotate(90deg)}
.c-toc-m .c-toc-list{margin-top:0;padding-bottom:12px}
.c-toc-m .c-toc-list li{padding-block:8px;font-size:1rem;line-height:1.4}
.c-toc-m .c-toc-list a{padding-block:8px;margin-block:-8px}
}
/* SECTIONS (section.c-sec.grid): the statement as an h2 in the column, --gap-group above, 16px under; the prose
(inner.css .prose: Source Sans 3 370, --fs-prose, 1.65, 59ch, full colour); the margin item on the text's row;
steps or a table on a row of their own. A heading reached from "In this guide" stops 8px under the scroll-up bar's
clearance (site.css gives html 80px of scroll padding). */
.c-sec{align-items:start;margin-top:var(--gap-group)}
.c-h{grid-row:1;scroll-margin-top:8px}
.c-text{grid-row:2;margin-top:16px;align-self:first baseline}
.c-aside{grid-row:2;align-self:first baseline}
.c-steps,.c-dt{grid-row:3}
/* Lists in prose: at 960px and up the markers hang into the open left (inner.css already sets them outside with no
indent); on a phone a 1.1em indent keeps them inside the gutter (inner.css). */
/* The margin: a note (inner.css .note: body size, second tone) or a related guide (inner.css .ar-go: Source Sans 3
600 15px, the bronze arrow glued to the last word). Notes keep a reading measure. In the margin the note loses its
footnote hairline: the hairline was there to part it from the statement above it, and in the margin nothing is
above it, so it would only float level with the heading. Inline (below 1200px) it keeps the hairline.
The guide link is a block at its own width here: an inline-block's baseline is its LAST line, so a two-line title
pushed its paragraph 8px down when the two were baseline-aligned. */
.c-aside .note{max-width:44ch}
.c-aside>.ar-go{display:block;width:fit-content;max-width:100%}
@media (min-width:1200px){.c-aside .note{padding-top:0;border-top:0}}
@media (max-width:1199px){
.c-aside{grid-row:auto;align-self:auto;margin-top:24px}
.c-aside>.ar-go:first-child{margin-top:-12px}
}
/* STEPS (ol.c-steps): numbered rows in the column. Each row: a hairline across the column, the numeral in bronze,
the name in serif at the name size, the text under it. From 960px the numeral hangs in the open left, right
aligned .75em before the name, so names and text keep the column's edge; below 960px it sits inline and the text
is indented to the name. A step's related guide goes to the margin, level with the step's name (from 1200px), so
in the founders' guide the margin becomes the map of the guides beside the steps that need them.
From 1200px the list spans columns 4 to 12 as a subgrid: the step on columns 4 to 9, its guide on 10 to 12. */
.c-steps{margin-top:24px}
.c-steps>li+li{margin-top:0}
.c-step{position:relative;border-top:1px solid var(--rule);padding-block:20px 24px}
.c-steps>li:last-child .c-step{padding-bottom:0}
.c-step-name{position:relative;font-family:var(--serif);font-weight:400;font-size:var(--fs-sub);line-height:1.3;
text-wrap:balance;max-width:24em;color:var(--fg)}
.c-step-num{position:absolute;right:100%;top:0;margin-right:.75em;font-weight:300;color:var(--mark);font-variant-numeric:tabular-nums}
.c-step-text{margin-top:8px}
.c-step-go{justify-self:start}
@media (min-width:1200px){
.c-steps{display:grid;grid-template-columns:subgrid}
.c-steps>li{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:first baseline}
.c-step{grid-column:1/7}
.c-step-go{grid-column:7/10;align-self:first baseline}
}
/* Below 1200px the guide link follows the step's text: 16px under it and 24px over the next step's hairline (its own
12px padding counted), the same 24px a step without a link has; the last one ends the section at its text. */
@media (max-width:1199px){
.c-step-go{display:block;width:fit-content;margin:0 0 12px}
.c-steps>li:has(.c-step-go) .c-step{padding-bottom:4px}
.c-steps>li:last-child .c-step-go{margin-bottom:-12px}
}
@media (min-width:960px) and (max-width:1199px){.c-step-go{margin-left:0}}
@media (max-width:959px){
.c-step-name{padding-left:1.6em;text-indent:-1.6em}
.c-step-num{position:static;display:inline-block;min-width:1.6em;margin-right:0;text-indent:0}
.c-step-text,.c-step-go{margin-left:calc(var(--fs-sub) * 1.6)}
}
/* TABLE (div.dt.c-dt): a comparison you read across, so it may run from the column into the margin (columns 4 to 12
from 1200px: the row names on 4 to 6 under the text's edge, the two values on 7 to 9 and 10 to 12, the second
value on the margin's own column). inner.css keeps its type, rules and phone layout; only the columns change. */
.c-dt{margin-top:24px}
.c-dt tr{grid-template-columns:repeat(3,minmax(0,1fr))}
.c-dt .c1,.c-dt .c2,.c-dt .c3{grid-column:auto}
.c-dt .c2:last-child{grid-column:2/4}
/* SOURCES (section.c-src): the end of the article, after a hairline, in the column. "Sources" in the name role; the
list small and in the second tone (inner.css .src). Inside the flow, so "In this guide" stays beside the text to
the end. */
.c-src{margin-top:var(--gap-group)}
.c-src-in{border-top:1px solid var(--rule);padding-top:24px}
.c-src-h{font-family:var(--serif);font-weight:400;font-size:var(--fs-sub);line-height:1.3;color:var(--fg)}
.c-src-h+.src{margin-top:12px}
/* 7. RELATED GUIDES (section.c-rel.g-forest, written by _plan/build_lab_hub.py between the lab:related markers), the
owner's second Robbins reference (2026-10-16): "related posts", scrolling sideways with arrows. After Sources and
before the closing call, on its own ground (forest after the ivory article), so it reads as a separate block.
THE HEAD ROW, one line from 600px: "Related guides" in the h2 role (.t-h2, the size every section on the site opens
with), "All insights" beside it on the same baseline (a text link, .lnk, to the hub), and the two arrow buttons
pushed to the right edge of the measure. Below 600px the link drops under the heading and the arrows stay level
with it. Every row is at least 44px, so the arrows (shown by lab-c.js) never change the height.
THE ROW: a native scroller, full bleed, its cards starting on the spine. The first three cards are the map's three
next reads in slot order; the rest are guides on the same topic, then the same stage (6 to 8 in all, never this
guide). A card is as wide as a third of the measure from 960px (the hub's card), so the three picks sit exactly in
the measure and the fourth shows its edge in the right gutter; half the measure from 600 to 959px; 82% of the
screen below 600px, so the next card always shows. Scroll snap aligns a card to the spine after any swipe.
THE BUTTONS: 44px circles, a hairline in the ground's rule colour, the arrow in full colour; no fill, no shadow.
Each moves the row by one card. At either end the button stays in place, dimmed to 32% with aria-disabled (not
the disabled attribute, so focus is never dropped). Hidden when every card fits, and with JS off, when the row
still scrolls by swipe, trackpad and keys (the row is a focusable region).
A CARD: the hub's card (section 9): the cover, the topic and reading time on one line, the title as the link
(stretched over the card), then the guide's intro on every card (second pass: the three picks showed the map's
per-link question and the rest the intro, two voices in one row; the owner's read-next brief asks for a headline
and a short intro). The tracking hooks (data-rn-from, -to, -pos, -slot) are on the ; the href is clean.
SECOND PASS: the band ends --gap-group under the cards (it was --sec, so the forest row ran into the deep call as
one dark block of about 250px); once the row is scrolled, its left gutter fades out (lab-c.js sets .is-scrolled),
so the previous card's slice reads as the row going on, not as cut words. */
.c-rel{padding-block:var(--sec) var(--gap-group);container-type:inline-size}
.c-rel-head{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-areas:"h a . n";
grid-auto-rows:minmax(44px,auto);align-items:baseline;column-gap:clamp(20px,2.4vw,36px)}
.c-rel-h{grid-area:h;max-width:none}
.c-rel-all{grid-area:a}
.c-rel-nav{grid-area:n;align-self:center;display:flex;gap:12px}
.c-rel-nav[hidden]{display:none}
@media (max-width:599px){
.c-rel-head{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"h n" "a a";row-gap:0}
.c-rel-all{margin-top:4px}
}
.c-rel-btn{display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--rule);border-radius:50%;
background:none;color:var(--fg);cursor:pointer;transition:border-color .16s var(--out),opacity .16s var(--out),transform .16s var(--out)}
.c-rel-prev svg{transform:scaleX(-1)}
.c-rel-btn[aria-disabled="true"]{opacity:.32;cursor:default}
.c-rel-btn:not([aria-disabled="true"]):active{transform:scale(.94)}
.c-rel-scroll{margin-top:var(--gap-head);overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut-l) var(--gut-r);scrollbar-width:none}
.c-rel-scroll::-webkit-scrollbar{display:none}
.c-rel-scroll.is-scrolled{-webkit-mask-image:linear-gradient(to right,transparent 0,transparent calc(var(--gut-l) * .25),#000 var(--gut-l));
mask-image:linear-gradient(to right,transparent 0,transparent calc(var(--gut-l) * .25),#000 var(--gut-l))}
.c-rel-scroll:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
/* .c-rel .c-rel-list: two classes, so the padding beats site.css ol[class]{padding:0} (which put the first card on the
screen's edge instead of the spine) */
.c-rel .c-rel-list{display:flex;gap:var(--col-gap);width:max-content;margin:0;padding:6px var(--gut-r) 6px var(--gut-l);
--rc-w:calc((100cqi - var(--gut-l) - var(--gut-r) - 2 * var(--col-gap)) / 3)}
@media (max-width:959px){.c-rel .c-rel-list{--rc-w:calc((100cqi - var(--gut-l) - var(--gut-r) - var(--col-gap)) / 2)}}
@media (max-width:599px){.c-rel .c-rel-list{--rc-w:calc(100cqi * .82)}}
.c-rc{position:relative;flex:0 0 var(--rc-w);width:var(--rc-w);min-width:0;scroll-snap-align:start}
.c-rc-img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--deep)}
.c-rc .c-meta{margin-top:16px}
.c-rc-h{margin-top:8px;font-family:var(--serif);font-weight:400;font-size:var(--fs-card);line-height:1.25;letter-spacing:-.005em;
text-wrap:pretty;color:var(--fg)}
.c-rc-x{margin-top:8px;max-width:48ch;font-family:var(--sans);font-weight:370;font-size:1rem;line-height:1.55;color:var(--fg2);
text-wrap:pretty}
/* 8. STATES. Hover only on fine pointers; a press shows the same underline on every input (the tap highlight is off
in site.css). One answer per object: the title underlines in bronze, and on a card the arrow moves 3px.
Transitions name their properties; site.css stops them all under reduced motion.
Focus: on a card the ring goes round the whole card (2px, 3px out) in the band's focus colour, bronze-hi on deep
and forest (6.1 and 5.6:1). On a hub entry it goes round the entry's words (title and intro), 8px out, which keeps
it clear of the hairlines above and below (20 and 24px away), so the ring and a rule never run side by side.
Where :has() is missing, the link keeps its own ring instead. */
@media (hover:hover) and (pointer:fine){
.u{transition:text-decoration-color .16s var(--out)}
.c-card:hover .u,.c-g:hover .u{text-decoration-color:var(--mark)}
.c-card:hover .c-card-go span{transform:translateX(3px)}
.c-toc-list a:hover{color:var(--fg);text-decoration-color:var(--mark)}
.ph-meta a:hover{color:var(--fg)}
}
.c-card:active .u,.c-g:active .u{text-decoration-color:var(--mark)}
.c-card:active .c-card-go span{transform:translateX(3px)}
.c-card-link:focus-visible{outline-color:var(--bronze-dk)}
@supports selector(:has(*)){
.c-card-link:focus-visible,.c-g-link:focus-visible{outline:none}
.c-card:has(.c-card-link:focus-visible){outline:2px solid var(--focus);outline-offset:3px}
.c-g-in:has(.c-g-link:focus-visible){outline:2px solid var(--focus);outline-offset:8px}
}
@media (prefers-reduced-motion:reduce){.c-card:active .c-card-go span{transform:none}}
/* 9. HUB v2 (insights-lab/c/index.html), the owner's brief of 2026-10-16 and his Robbins reference, in the Ellis
Sterling system: a dark head with the title and the start-here guides on the same ground, then on ivory "All
insights" with the search and the topic row, the library. Every card carries its cover, its topic and its reading
time.
TOP REDESIGN (2026-10-16, after the owner's notes on the head), and why:
- The example searches under the field are gone (the owner struck them). The line under the field holds the
result count only, and says so in words when nothing matches.
- The start-here guides are white tiles: ivory-hi on deep (14.7:1), the photograph inside the tile and the text
on the tile in ink. Nothing is set over a photograph any more: on the green, the old featured card's text sat
on its photo and the three picks sat beside small thumbnails, and neither stood out.
- Size falls as you scroll. The start-here tiles are the largest cards on the page; the library under them is the
smaller, denser list (every guide as the compact card, the card search results already used), and every one of
its cards is the same size at a given width. A last row that is not full stays part empty: the old rule widened
the last cards so the row was full, which made the library's cards grow at the bottom for no reason.
FIX ROUND (2026-10-16, the design and function reviews of the redesign), and why:
- The Robbins arrangement is the default: one large tile and three stacked, the head in two columns over them.
It keeps the layout the owner liked, gives the founders' guide the lead (the first thing to read), and shows
all four guides in the first screen from 960 to 1440px. Four equal tiles under a one-column head are the
alternative, ?top=a (html.top-a, set by the head script; with JS off the default shows).
- (Until the search moved, below.) From 960px the field stood on the right, over the three stacked guides, its
bottom level with the line's last line, and the count line hung under it out of the flow.
- The row tile (cover on the left, the question beside it) serves the default's three at every width and the
alternative's four below 1200px, so neither layout puts a guide a screen down at tablet widths and no tile
changes size at a breakpoint for no reason. Its cover crops from the centre.
- The ITIN tile's cover is the plate's start-here version (covers/itin-explained-start): its ground lifted, so
the tile's edge stays clear of the deep page, and its numeral centred, so the row tile's narrow crop on a phone
keeps all of it. The library card keeps the dark plate, which reads on ivory.
- "All insights" is in the statement role (the library section below), so type falls as you scroll as the
covers do; the library is one column up to 767px, where two columns left a 122 to 190px title column.
SEARCH MOVED (2026-10-16, the owner: "the search should be ... when the white section starts"), and why:
- The dark head is the curated way in (the title, its line, the four start-here tiles); the ivory section is the
whole library. The field and the topic row are the tools for finding a guide in the library, so they sit
together at its head, over the list they filter, and the head above them never changes while they work.
- The tiles no longer step aside during a search or a topic. With the field under them, hiding them would pull
the field up under the reader's cursor or finger; now the list under the field filters in place and the field,
"All insights" and the topic row stay where they are (hub.js also holds the touched control in place).
- A search that starts low in the window, or under a phone's keyboard, scrolls the window once so the library
head sits under the top edge (hub.js, RESULTS IN VIEW); a link with a search or a topic opens there.
- The field leaving freed no height beside the title from 960px (it stood beside the title block), and 109 to
120px in the one-column heads (109 on a phone, 120 at 1440 with ?top=a), where the tiles now start that much
higher: on a phone the large tile's question and intro now end inside the first screen (744px of 844). From
960px the large tile's photo takes the height the first screen leaves, and with ?top=a the four covers do
(FIT THE FIRST SCREEN, the end of this file).
ITS REVIEW ROUND (2026-10-16, the design, function and edge reviews), and why:
- On laptops up to 900px tall the three stacked questions were 18px, under a library title (19.3 to 19.9px), so
type grew as you scrolled. They are now a step over it (max(20px, --fs-sub + 1px)); where a question then takes
a third line (1366x768), the large tile's photo takes the extra height instead of leaving ivory under its text.
- The count line takes no room while it is empty (it kept one line, 49px from the topic row to the first card in
the default view), and a chosen topic gets a count of its own ("5 insights in Banking."), so choosing a topic
low in the window still shows that something happened.
- The ivory opens at --gap-head, more than the gaps inside it, now that the field is the first thing on it.
- A link with a search or a topic arrives with the site's bar shown in the band over the library head (site.js
starts from that state), so a visitor sees where they are; the field holds the query at the first paint and
the list waits, hidden, until hub.js has filtered it, so the wrong list never shows.
- The topic row fades out at its right end and runs to the screen's edges wherever it is wider than its box (it
did only below 600px), and a chosen topic stops clear of the fade.
Order: the shared card parts (cover, meta line, link), the head, start here (the tile, the large tile, the row
tile, the default's grid, the alternative), the library head and the search, the topic row, the library, the
search's states. hub.js drives the states; with JS off (html without .js) the search, the topic row and the count
line are hidden and every guide shows (the start-here four in their tiles, the rest in the library). */
/* SHARED CARD PARTS. A cover is decorative (alt="", the title names the guide) and sits on a ground colour while it
loads. The meta line: the guide's main topic in full colour, then 16px, then "N min read" in the second tone, both
on the left, Source Sans 3 400 14px (the small-text role), sentence case. No separator: the gap parts them on
screen and a space parts them in copied text. One link per card: the title's stretches over the whole card
(::after), so the card is one target and one tab stop, and the link's name is the title (or the question, on a
start-here tile). */
.c-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);
clip-path:inset(50%);white-space:nowrap;border:0}
.c-meta{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:baseline;column-gap:16px;font-family:var(--sans);font-weight:400;
font-size:.875rem;line-height:1.5;letter-spacing:.01em;color:var(--fg2)}
.c-meta-t{color:var(--fg)}
.c-meta-m{font-variant-numeric:tabular-nums}
.c-link::after{content:"";position:absolute;inset:0}
/* THE HEAD (header.ph.g-deep.c-hub): "Insights" (.t-h2), 20px, the map's line (.t-lede, two lines at 52ch from
about 700px), --gap-head (the site's distance from a heading or its lede to what it introduces), then the
start-here tiles; all on the page's one left edge, in the order you read them: where you are, what is here, where
to start. One column at every width and in both arrangements since the search moved to the library (2026-10-16).
The open right beside the title and its line is the page head every inner page of the site has (the guides' heads,
the 404), one title block deep (about 150px at 1440) and closed from below by the tiles; it is not filled. The
band is as short as the nav and the type allow: its top space and the gap above the tiles follow the screen
height on laptops (FIT THE FIRST SCREEN), and the height the field used to take in the one-column heads (a phone,
?top=a) went to the tiles, which start that much higher. The head ends --gap-group under the tiles (the change to
ivory marks the edge). */
.c-hub{--pad-st:clamp(20px,1.8vw,28px)}
.ph.c-hub{padding-bottom:var(--gap-group)}
/* START HERE: div.c-entry > ol.c-sts > li.c-st, on the head's deep ground. The four questions most visitors arrive
with, each opening its guide: the two situations (a company run from abroad, or you in your own name), then the two
questions everyone asks next (the ITIN, the timeline). The list never filters and never steps aside: a search or a
topic filters the library under it (search moved, 2026-10-16), so nothing over the field moves.
A TILE: ivory-hi with ink text (the tile sets --fg, --fg2 and --mark for what is inside it; the focus ring is drawn
outside it, on the band, in the band's colour), no border, radius or shadow: the change of ground is the edge, and
every start-here cover is lighter than the ground at its edges, so each tile keeps its outline. From the top: the
cover, flush with the tile's edges; --pad-st (20 / 23 / 26px); the meta line; 8px; the question in serif at the card
size (--fs-card, 20 / 22.7 / 23.4px), balanced, so no question ends on one word; 12px; the guide's intro, Source Sans
3 370 16px in the second tone; --pad-st.
THE DEFAULT, the Robbins arrangement. From 960px the large tile (the founders' guide) on columns 1 to 7 and the
other three stacked on columns 8 to 12, sharing its height in three equal rows. The large tile: the cover across
its top, 16:7 from 1200px (744 by 326 at 1440, 661 by 289 at 1280, so the whole question is in the first screen at
1440x900 and 1280x800) and 2:1 from 960 to 1199px; the question at --fs-lead (24 / 34 / 36px, the largest line after
the page title); the intro at the body size. When the three need more height than the large tile (a long question),
the large tile is stretched to match and its cover takes the extra height (object-fit:cover), so it never ends on
an empty strip of ivory. The three are row tiles (below), 209px of cover at 1440, larger than any library
thumbnail; no intro (the question is the reason to click, and the row has no room for both); from 960 to 1199px
their questions are 20px, still one step over a library title, in a text column of about 200px.
Below 960px the large tile runs across the measure (cover 16:9 from 600px, 3:2 on a phone), the three under it,
12px apart.
THE ROW TILE: the cover on the left 40% of the tile at its full height (36% on a phone), the meta line and the
question on its right, no intro. The cover crops from the centre across and a little above it down (35%): on a
phone the tile is taller than wide and the crop is from the sides, where the start-here ITIN plate is centred for
it; from 600px it is wider than tall (2.3:1 at 768) and the crop is from the top and bottom, where 35% keeps the
traveller's head in the own-name cover and the numeral still sits whole on the plate.
On a phone its text is 16px in from the edges, so the question has about 192px (at 40% and 20px it had 170px, and
the founders' question broke into five lines of two words); the question is 19px there, two steps over a library
title on a phone (17px).
THE ALTERNATIVE (?top=a): four equal tiles from 1200px (302px at 1440, covers 302 by 268 at 1440x900: as tall as
the first screen allows, FIT THE FIRST SCREEN), four doors of the same kind with none set larger; below 1200px row tiles, two across from 960px and one column under that (the 2x2 of
16:9 tiles it had put two of the four a screen down at 1199px and shrank by half at 1200px).
SIZES DOWN THE PAGE (the default): at 1440x900 the large tile's cover is 744 by 310 (its height is what the first
screen leaves, FIT THE FIRST SCREEN), a stacked cover 209 by 161, a library thumbnail 158 by 106; the questions are
33.4 and 20.7px (36 and 23.4px on screens taller than 900px), "All insights" 27.4px, a library title 19.7px. On
laptops up to 900px tall the stacked questions are max(20px, --fs-sub + 1px), so they never drop under a library
title (review round, 2026-10-16: they were 18px, under the 19.3 to 19.9px titles). On a phone: the large cover
350 by 233, a row tile's 126 by 140 or more, a thumbnail 104 by 69. The tiles are the largest cards on the page and
the library the denser list under them, never the other way round. */
.c-entry{margin-top:var(--gap-head)}
.c-sts{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.c-st{position:relative;display:flex;flex-direction:column;min-width:0;background:var(--ivory-hi);
color:var(--ink);--fg:var(--ink);--fg2:rgba(7,23,17,.72);--mark:var(--bronze-dk)}
.c-st-img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--green)}
.c-st .c-meta{padding:var(--pad-st) var(--pad-st) 0}
.c-st-h{padding:8px var(--pad-st) 0;font-family:var(--serif);font-weight:400;font-size:var(--fs-card);line-height:1.25;
letter-spacing:-.005em;text-wrap:balance;color:var(--fg)}
.c-st-x{padding:12px var(--pad-st) var(--pad-st);font-family:var(--sans);font-weight:370;font-size:1rem;line-height:1.55;
color:var(--fg2);text-wrap:pretty}
@media (forced-colors:active){.c-st{border:1px solid CanvasText}}
/* the large tile (the default's first) */
html:not(.top-a) .c-st:first-child .c-st-h{padding-top:12px;font-size:var(--fs-lead);line-height:1.15;letter-spacing:-.01em;
max-width:calc(20em + 2 * var(--pad-st))}
html:not(.top-a) .c-st:first-child .c-st-x{max-width:calc(58ch + 2 * var(--pad-st));font-size:var(--fs-body)}
@media (min-width:600px) and (max-width:959px){html:not(.top-a) .c-st:first-child .c-st-img{aspect-ratio:16/9}}
/* the row tile: the default's three at every width; the alternative's four (undone from 1200px, below) */
html:not(.top-a) .c-st:not(:first-child),.top-a .c-st{display:block;min-height:112px;padding-left:40%}
html:not(.top-a) .c-st:not(:first-child) .c-st-img,.top-a .c-st-img{position:absolute;top:0;left:0;width:40%;height:100%;aspect-ratio:auto;
object-position:50% 35%}
html:not(.top-a) .c-st:not(:first-child) .c-st-h,.top-a .c-st-h{padding-bottom:var(--pad-st)}
html:not(.top-a) .c-st:not(:first-child) .c-st-x,.top-a .c-st-x{display:none}
@media (max-width:599px){
html:not(.top-a) .c-st:not(:first-child),.top-a .c-st{padding-left:36%}
html:not(.top-a) .c-st:not(:first-child) .c-st-img,.top-a .c-st-img{width:36%}
html:not(.top-a) .c-st:not(:first-child) .c-meta,.top-a .c-st .c-meta{padding-inline:16px}
html:not(.top-a) .c-st:not(:first-child) .c-st-h,.top-a .c-st .c-st-h{padding:8px 16px var(--pad-st);font-size:1.1875rem}
}
/* the default's grid from 960px */
@media (min-width:960px){
html:not(.top-a) .c-sts{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:repeat(3,1fr);gap:var(--col-gap)}
html:not(.top-a) .c-st:first-child{grid-column:1/8;grid-row:1/4}
html:not(.top-a) .c-st:nth-child(2){grid-column:8/13;grid-row:1}
html:not(.top-a) .c-st:nth-child(3){grid-column:8/13;grid-row:2}
html:not(.top-a) .c-st:nth-child(4){grid-column:8/13;grid-row:3}
html:not(.top-a) .c-st:first-child .c-st-img{aspect-ratio:2/1;flex-grow:1}
}
@media (min-width:960px) and (max-width:1199px){html:not(.top-a) .c-st:not(:first-child) .c-st-h{font-size:1.25rem}}
@media (min-width:1200px){html:not(.top-a) .c-st:first-child .c-st-img{aspect-ratio:16/7}}
/* the alternative (?top=a): row tiles two across from 960px, four equal tiles from 1200px */
@media (min-width:960px) and (max-width:1199px){.top-a .c-sts{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap)}}
@media (min-width:1200px){
.top-a .c-sts{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap)}
.top-a .c-st{display:flex;min-height:0;padding-left:0}
.top-a .c-st-img{position:static;width:100%;height:auto;aspect-ratio:3/2}
.top-a .c-st-h{padding-bottom:0}
.top-a .c-st-x{display:block}
}
/* THE LIBRARY HEAD AND THE SEARCH (div.c-lib-head at the top of section.c-lib: h2 "All insights" and form.c-find;
the search moved here from the dark head, 2026-10-16). The field filters the library, so it opens the library, and
the topic row follows it: the two tools for finding a guide sit together at the head of the list they filter,
under the start-here tiles, which are the curated way in and never change while the tools work.
FROM 960px ONE ROW, on the library grid's two columns: "All insights" in the left one, the field across the right
one, so the field's left edge is the edge of the cards' right column (it stands over the cards it filters) and its
right edge the measure's. Heading and field share a baseline (the heading's and the field's text), so the row
reads as one line; it is the field's height. BELOW 960px: the heading, 16px, the field across the measure.
Then the topic row, 12px under the field, and the count line under the topic row.
THE FIELD, on ivory: 56px tall (a comfortable target, and the height it had); an ivory-hi fill, the page's
lighter paper, so it reads as a place to write; an ink hairline at 50% (3.4:1 on ivory and on the fill: WCAG
1.4.11); the magnifier and the placeholder in the second ink tone (7.1:1 on the fill); the text in ink and the
caret in dark bronze, the ivory's mark (the site's bronze caret is 2.7:1 on the fill); type at 18px, 16px on a
phone so iOS does not zoom. Hover takes the hairline to the second tone. Focus in the text: the hairline turns
full ink and the site's focus ring (2px, 3px out, dark bronze on ivory) goes round the box; on the clear button
only the button's own ring shows (where :has() works), drawn 4px inside the button (review round: 3px out, it ran
within a pixel of the box's hairline on three sides, a ring and a rule side by side). The browser's own clear mark
is replaced by one button (44px) that appears once there is text.
THE COUNT LINE (p.c-find-count) is under the topic row, at the head of the list: 14px under the row's hairline
(14px text, 21px a line), 12px over the first card. It says what the list under it holds, and the field and the
topic row both filter that list; and anything that grows there (a second line, the "see the matches in all
topics" sentence on a phone) can only push the list, never the field or the topic row the reader is touching.
Directly under the field, that sentence took two lines on a phone and pushed the topic row down under the finger
that had just chosen a topic. It holds the count of a query, and of a chosen topic ("5 insights in Banking."), in
ink. Empty, it takes no room (review round: one line kept for it put the first card 49px under the topic row in
the default view, against 12 to 16px between the head's own parts), and the list starts 24 to 32px under the
row; it only appears or goes when the list under it changes anyway, so only the list moves, and nothing above
it. It is not a live region (it changes on every key); #c-find-said, visually hidden, speaks the count once
typing pauses.
ARRIVING FROM A LINK with a search or a topic (index.html, the script after the library): the field already
holds the query at the first paint, and the list waits, hidden (html.lib-wait, visibility only, so the page keeps
its height and the window its place), until hub.js has filtered it, at most 3s; the full list never shows first
and then shrinks to the matches.
With JS off (html without .js) the field, the topic row and the count line are hidden; "All insights" heads the
list. */
.c-lib-head{display:grid;grid-template-columns:minmax(0,1fr);row-gap:16px}
@media (min-width:960px){.c-lib-head{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);align-items:baseline}}
.c-find{position:relative;min-width:0;--find-line:rgba(7,23,17,.5)}
.c-find-box{position:relative;display:flex;align-items:center;height:56px;background:var(--ivory-hi);border:1px solid var(--find-line);
transition:border-color .16s var(--out)}
.c-find-box:focus-within{border-color:var(--fg);outline:2px solid var(--focus);outline-offset:3px}
@supports selector(:has(*)){.c-find-box:focus-within:not(:has(.c-find-q:focus)){border-color:var(--find-line);outline:none}}
.c-find-icon{position:absolute;left:18px;top:50%;margin-top:-10px;color:var(--fg2);pointer-events:none}
.c-find-q{flex:1;min-width:0;height:100%;margin:0;padding:0 52px 0 50px;border:0;border-radius:0;background:none;color:var(--fg);
font-family:var(--sans);font-weight:400;font-size:1.125rem;line-height:1.3;caret-color:var(--mark);-webkit-appearance:none;
appearance:none;outline:none}
.c-find-q::placeholder{color:var(--fg2);opacity:1}
.c-find-q::-webkit-search-cancel-button,.c-find-q::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.c-find-clear{position:absolute;right:6px;top:50%;display:grid;place-items:center;width:44px;height:44px;margin-top:-22px;padding:0;
border:0;background:none;color:var(--fg2);cursor:pointer;transition:color .16s var(--out)}
.c-find-clear[hidden]{display:none}
.c-find-clear:focus-visible{outline-offset:-4px}
.c-find-count{margin-top:14px;font-family:var(--sans);font-weight:400;font-size:.875rem;line-height:1.5;
letter-spacing:.01em;color:var(--fg);text-wrap:pretty}
.c-find-count:empty{display:none}
html.lib-wait .c-lib-list{visibility:hidden}
.c-none-all{display:inline;margin:0;padding:12px 0;margin-block:-12px;border:0;background:none;font:inherit;color:var(--fg);
cursor:pointer;text-decoration-line:underline;text-decoration-thickness:1px;text-underline-offset:.2em;
text-decoration-color:var(--fg2);transition:text-decoration-color .16s var(--out)}
html:not(.js) .c-find,html:not(.js) .c-topics,html:not(.js) .c-find-count{display:none}
@media (max-width:599px){.c-find-q{font-size:1rem}}
/* THE TOPIC ROW (div.c-topics), on by default (owner, 2026-10-16); ?topics=0 hides it. Unchanged by the top redesign:
one line of plain text under the field: All topics, then the topics in use, as buttons (aria-pressed) in Source
Sans 3 15px, the second tone; the chosen one in full colour at 600 with a 2px bronze bar on the row's hairline, under
the word, never through it. Each label reserves its 600 width (::before), so choosing a topic never moves the
others. A topic filters the library in place, as a search does: the library lists the topic's complete set (the
start-here guides among them) and the tiles above stay. 12px under the field, so with the buttons' own 12px the
labels start 24px under it. Wherever the row is wider than its box it runs to the screen's edges and scrolls
sideways, its right end fading out to show there is more: always below 600px (from the first paint), and at any
other width once hub.js finds it does not fit (.is-over: from 600 to about 820px, and with larger text at any
width; review round, 2026-10-16: there it was cut off with nothing to say more topics exist). The fade is 56px,
wider than the largest gap between labels (40px), so some label always runs into it, whatever the width (at 40px
a gap could fill it, and the row looked complete). hub.js scrolls the chosen topic into view, sideways only, on a
choice and on arrival, and stops it clear of the fade (the row's scroll padding, the gutter plus 56px on the
right; the chosen label and its bar used to end inside the fade). */
.c-topics{margin-top:12px;border-bottom:1px solid var(--rule)}
.c-topics-in{display:flex;gap:clamp(24px,2.6vw,40px);overflow-x:auto;scrollbar-width:none}
.c-topics-in::-webkit-scrollbar{display:none}
.c-topic{position:relative;display:inline-grid;flex-shrink:0;margin:0;padding:12px 0 14px;border:0;background:none;
font-family:var(--sans);font-weight:400;font-size:.9375rem;line-height:1.3;letter-spacing:.01em;color:var(--fg2);
white-space:nowrap;cursor:pointer;transition:color .16s var(--out)}
.c-topic::before{content:attr(data-name);grid-area:1/1;height:0;overflow:hidden;visibility:hidden;font-weight:600}
.c-topic>span{grid-area:1/1}
.c-topic::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--mark);transform:scaleX(0);
transform-origin:left;transition:transform .2s var(--out)}
.c-topic[aria-pressed="true"]{color:var(--fg);font-weight:600}
.c-topic[aria-pressed="true"]::after{transform:none}
.c-topic:focus-visible{outline-offset:-2px}
.no-topics .c-topics{display:none}
@media (max-width:599px){
.c-topics{margin-inline:calc(-1 * var(--gut-l)) calc(-1 * var(--gut-r))}
.c-topics-in{padding-inline:var(--gut-l) calc(var(--gut-r) + 48px);scroll-padding-inline:var(--gut-l) calc(var(--gut-r) + 56px);
-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
}
.c-topics.is-over{margin-inline:calc(-1 * var(--gut-l)) calc(-1 * var(--gut-r))}
.c-topics.is-over .c-topics-in{padding-inline:var(--gut-l) calc(var(--gut-r) + 48px);scroll-padding-inline:var(--gut-l) calc(var(--gut-r) + 56px);
-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(to right,#000 calc(100% - 56px),transparent)}
/* THE LIBRARY (section.c-lib: the library head, the topic row, the count line, then ul.c-lib-list): every guide as the
compact card,
in hub order. "All insights" is in the statement role (Source Serif 4 400 at --fs-sec, 22 / 24.3 / 27.4px, the role
of a hub stage title and "Read next"; TYPOGRAPHY.md), the heading of a list inside the page rather than a second page
title: at the section-heading size (.t-h2, 53px at 1440) it read like "Insights" again and set type larger at the
change of ground than any start-here question above it (fix round, 2026-10-16). Sizes now fall as you scroll: the
page title 53px, the large question 36px, the stacked 23.4px, "All insights" 27.4px, a library title 19.7px. It is
--gap-head (28 to 48px) under the ivory's top, with the field beside it from 960px and 16px under it below (THE
LIBRARY HEAD AND THE SEARCH): the field is the first thing on the ivory, so the section opens with more room than
the gaps inside it (review round, 2026-10-16: at 24 to 32px the field crowded the change of ground, against 40px
between card rows). The list starts 24 to 32px under the topic row, 12px under the count line when it shows (with
JS off, when there is neither, 20 to 28px under the heading).
THE COMPACT CARD, the same in every state (the first view, a topic, a search), so a search only filters and
reorders the list and nothing changes shape as you type: the cover as a 3:2 thumbnail (104px on a phone,
clamp(120px, 11vw, 160px) from 600px: 158 at 1440, 141 at 1280); beside it the meta line and, 4px under, the title
in serif at the name size (--fs-sub, 17 / 19.3 / 19.7px, one step under a start-here question); the intro from
the map in full, Source Sans 3 370 16px, second tone, at most 62ch, no clamp. Below 1200px the intro runs under
thumbnail and title (the text column beside a thumbnail is too narrow for it); from 1200px it sits in the text
column beside the thumbnail, so every line of a card's text starts on one edge and a card is about as tall as its
intro (134 to 160px at 1440).
THE GRID: one column below 768px, two from 768px (fix round: two columns from 600px left the title a 122px column
beside the thumbnail at 600 and 158px at 680, five lines of two words; at 768 it is 197px, at 1440 456px); every
card the same width at a given screen width, rows 32 to
40px apart, each card its own height (align-items:start: a card stretched to its row's height let its 1fr title
row push its intro 25px under its neighbour's at 768). When the guides shown do not fill the last row, its empty cell stays empty (the grid used to widen its
last cards to fill the row; that made the cards grow at the bottom of the list). The All view's 10 guides fill five
rows of two.
The four start-here guides are cards here too (data-start), hidden while no search is chosen (.c-lib without
.is-filtered), so the first view never shows a guide twice, and a search's results are complete. html.has-q (set
before the first paint when the address carries a search) shows them until hub.js has applied it; the list waits
hidden meanwhile (html.lib-wait), and shows them only if hub.js has not run within 3s.
overflow-anchor:none: the list changes under the reader when a search or a topic is chosen, so the browser must
not pick its scroll anchor inside it (Chrome did, and a topic chosen on a phone threw the page up by 591px).
hub.js holds the touched control in place itself (apply()). */
.c-lib{padding-block:var(--gap-head) var(--sec)}
.c-lib-h{font-family:var(--serif);font-weight:400;font-size:var(--fs-sec);line-height:1.2;letter-spacing:-.005em;color:var(--fg)}
.c-lib-list{display:grid;grid-template-columns:minmax(0,1fr);row-gap:32px;align-items:start;margin-top:clamp(24px,2.2vw,32px);overflow-anchor:none}
.c-find-count:not(:empty)+.c-lib-list{margin-top:12px}
html:not(.js) .c-lib-list{margin-top:clamp(20px,2vw,28px)}
@media (min-width:768px){.c-lib-list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--col-gap);row-gap:clamp(32px,2.8vw,40px)}}
.c-lc{position:relative;min-width:0;display:grid;grid-template-columns:104px minmax(0,1fr);grid-template-areas:"img meta" "img h" "x x" "c c";
grid-template-rows:auto 1fr auto auto;column-gap:16px;align-items:start}
@media (min-width:600px){.c-lc{grid-template-columns:clamp(120px,11vw,160px) minmax(0,1fr);column-gap:20px}}
@media (min-width:1200px){.c-lc{grid-template-areas:"img meta" "img h" "img x" "img c";grid-template-rows:auto auto auto 1fr}}
/* [hidden] wins over every layout rule (the card sets display:grid) */
.c-lc[hidden]{display:none!important}
html:not(.has-q) .c-lib:not(.is-filtered) .c-lc[data-start]{display:none}
.c-lc-img{grid-area:img;display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--deep)}
.c-lc-text{display:contents}
.c-lc .c-meta{grid-area:meta;margin-top:-2px}
.c-lc-h{grid-area:h;margin-top:4px;font-family:var(--serif);font-weight:400;font-size:var(--fs-sub);line-height:1.3;letter-spacing:0;
text-wrap:pretty;color:var(--fg)}
.c-lc-x{grid-area:x;margin-top:12px;max-width:62ch;font-family:var(--sans);font-weight:370;font-size:1rem;line-height:1.55;color:var(--fg2);
text-wrap:pretty}
@media (min-width:1200px){.c-lc-x{margin-top:8px}}
.c-lc-c[hidden]{display:none}
/* THE SEARCH'S STATES (classes set by hub.js on main and .c-lib).
main.is-q (a query with matches): the library under the field lists the matches in rank order, in its own cards
and columns; everything above the list stays as it was, so the field, "All insights" and the topic row never
move while you type, clear or choose a topic (search moved, 2026-10-16: the start-here tiles used to step aside so
the matches rose under a field in the dark head; with the field under the tiles that would pull the field up under
the cursor). The count shows in the line under the topic row (hub.js writes it; empty, it takes no room). "All
insights" stays on screen; for assistive tech the heading says "Results" (a visually hidden word, hub.js), which
moves nothing, and it takes focus after "see the matches in all topics" on touch. No padding or visibility
changes here. When the search starts low in the
window, hub.js scrolls once to bring the library head under the top edge (RESULTS IN VIEW in hub.js); otherwise
the switch has no animation: it happens on the first letters typed, and a moving layout would fight the typing.
main.is-topic (a topic chosen): the same, for the topic's guides, and the count line says how many.
main.is-none (a query with no match): the list stays as it was, and the count line says so.
Matched words in titles and intros: weight only, no colour or fill (serif 500 in a title, which is loaded to 500;
sans 600 in an intro). A card whose title and intro show none of the words gets one line under the intro
(p.c-lc-c, small text, second tone): "Covers:" and the section heading where the guide uses the word, or
"Answers:" and the question, with the matched word set heavier when it is there. Cards that come into view fade in
over 160ms (hub.js, opacity only, never under reduced motion); cards that leave go at once. */
.c-lc-c{grid-area:c;margin-top:8px;max-width:62ch;font-family:var(--sans);font-weight:400;font-size:.875rem;line-height:1.5;
letter-spacing:.01em;color:var(--fg2);text-wrap:pretty}
mark.c-hit{background:none;color:inherit;font-weight:500}
.c-lc-x mark.c-hit,.c-lc-c mark.c-hit{font-weight:600;color:var(--fg)}
/* STATES for the v2 parts. Hover on fine pointers only: a card's title underlines in bronze (the house answer; dark
bronze on a white tile and on ivory); a topic, a button or the clear mark goes to full colour, the field's
hairline to the second ink tone. A press shows the same. Focus: the ring goes round the whole card, 4px out, in the ground's focus colour (bronze-hi on deep, outside
a white tile; dark bronze on ivory); the link's own ring is removed so there is one. In Windows high-contrast mode a
tile's fill is dropped, so it gets a 1px border there (START HERE, above). */
@media (hover:hover) and (pointer:fine){
.c-st:hover .u,.c-lc:hover .u,.c-rc:hover .u{text-decoration-color:var(--mark)}
.c-topic:hover,.c-find-clear:hover{color:var(--fg)}
.c-none-all:hover{text-decoration-color:currentColor}
.c-find-box:hover:not(:focus-within){border-color:var(--fg2)}
.c-rel-btn:not([aria-disabled="true"]):hover{border-color:var(--fg2)}
}
.c-st:active .u,.c-lc:active .u,.c-rc:active .u{text-decoration-color:var(--mark)}
.c-lib-h:focus{outline:none}
@supports selector(:has(*)){
.c-entry .c-link:focus-visible,.c-lc .c-link:focus-visible,.c-rc .c-link:focus-visible{outline:none}
.c-st:has(.c-link:focus-visible),.c-lc:has(.c-link:focus-visible),.c-rc:has(.c-link:focus-visible){outline:2px solid var(--focus);outline-offset:4px}
}
@media (prefers-reduced-motion:reduce){.c-rel-btn:not([aria-disabled="true"]):active{transform:none}}
/* 10. PRINT. Accountants print guides: the head and the article print as ink on paper in one column (a portrait page
is narrower than 960px, so the phone layout applies), the answer prints first, margin items follow their text,
steps and notes stay whole on a page. "In this guide" (it only jumps), the related row, the call and the trail are
left out, and the answer keeps its closing rule. The hubs print their lists without panels, covers or controls:
v2 prints the four start-here questions with their intros, then the other guides with their topic, reading time
and intro. The tile rules are matched at the specificity of the row tile's (html .c-sts>.c-st:nth-child(n)), so
one set of print rules covers both layouts. */
@media print{
.c-rel,.s-co,.crumbs,.c-card-go,.c-toc,.c-toc-m,.c-find,.c-find-count,.c-topics,.c-lc-c,.c-st-img,.c-lc-img{display:none}
.c-lib:not(.is-filtered) .c-lc[data-start]{display:none}
.c-st-x,.c-lc-x{color:rgba(7,23,17,.72)}
.c-st-h,.c-lc-h,.c-meta-t{color:#071711}
.c-sts,.c-lib-list{display:block}
html .c-sts>.c-st:nth-child(n),.c-lc{display:block;margin-top:20px;padding:0;min-height:0;background:none;border:0;break-inside:avoid}
html .c-sts>.c-st:nth-child(n) .c-meta,html .c-sts>.c-st:nth-child(n) .c-st-h,html .c-sts>.c-st:nth-child(n) .c-st-x{padding:0}
html .c-sts>.c-st:nth-child(n) .c-st-x{display:block}
.c-st-h,.c-lc-h{margin-top:4px}
.c-st-x,.c-lc-x{margin-top:6px}
.c-lead-in:has(.c-toc-m){padding-bottom:var(--gap-head);border-bottom:1px solid var(--rule)}
.c-card{background:none;padding:0}
.c-starts{row-gap:24px}
.c-step,.note,.c-g{break-inside:avoid}
.c-lead-in,.c-h,.c-text,.c-src-in,.c-aside,.c-steps,.c-dt,.c-stage-l,.c-gl{grid-column:1/-1}
.c-aside{grid-row:auto}
.c-secs{grid-row:auto}
}
/* WE CAN HELP (div.c-help, inside the article body after Sources). The owner asked for a reassuring step after every
guide: the article ends, then a quiet ivory-hi panel on the reading column says the firm takes this off your hands,
with the one call to action. It replaces the separate closing call that used to sit under the related row, so a
guide has one call, at the moment the reader may feel the size of the task. */
.c-help{margin-top:var(--gap-group)}
.c-help-in{grid-column:4/10;min-width:0;background:var(--ivory-hi);padding:clamp(28px,3.4vw,48px);display:grid;gap:14px;justify-items:start}
@media (min-width:960px) and (max-width:1199px){.c-help-in{grid-column:3/11}}
@media (max-width:959px){.c-help-in{grid-column:1/-1}}
.c-help-h{margin:0;font-family:var(--serif);font-weight:400;font-size:var(--fs-h3);line-height:1.2;letter-spacing:-.005em;color:var(--fg);text-wrap:balance;max-width:24em}
.c-help-p{margin:0;font-family:var(--sans);font-weight:370;font-size:var(--fs-body);line-height:1.6;color:var(--fg2);max-width:58ch;text-wrap:pretty}
.c-help .ctas{margin-top:10px}
/* FIT THE FIRST SCREEN (owner, 2026-10-16: "the top section is too long, it cuts off the bottom, it should fit").
On laptop screens the head and all four start-here tiles end inside the first screen. Four moves, all only from
960px:
1. in both arrangements the head's top space and the gap above the tiles follow the screen height instead of the
width (?top=a since the review round of the search move; it kept the older, taller top space);
2. the large tile's photo takes the height that is left, between 180 and 440px, instead of a fixed 16:7 shape whose
height grew with the width;
3. on short screens (up to 900px tall) the three stacked tiles set their question smaller, so three fit beside it,
but never under a library title: max(20px, --fs-sub + 1px), 20 / 20.3 / 20.7px at 1024 / 1280 / 1440 (review
round, 2026-10-16: at 18px they were under the 18.6 to 19.9px library titles, so type grew as you scrolled).
At that size a question took a third line from 1200 to 1366px wide, and the three outgrew the large tile (by
14px at 1366x768, 57px at 1366x720). So up to 800px tall, where a stacked tile is at most 139px tall and over
2.3 times as wide, its cover takes 34% of the width instead of 40% (186 by 130 at 1366x768, still larger than
a library thumbnail) and its text 2px less padding: from 1280px every question keeps two lines, and the fit is
what it was before the change (1366x720 32px, 1280x700 32, 1200x700 15). Where the three still outgrow the
large tile (three lines at 1024 to 1200px on very short screens), its photo takes the extra height
(flex-grow), so the tile never ends on a strip of empty ivory;
4. with ?top=a, from 1200px, the four covers take the height that is left in the same way (below).
The height that is left (search moved, 2026-10-16): 100svh minus the head's top space and the gap (the same clamps
as here), minus the title, its line and the large tile's own text plus a margin, which grow with the width until
the type stops growing: 140px + 20vw, at most 450px. That ends the tiles 27 to 60px over the bottom of the screen
from 1024x768 to 1920x1080, on the head's own ground: its bottom padding (--gap-group) runs on to the fold or just
past it, so no sliver of ivory shows under the tiles and nothing of the library is cut in half there. The rule
before (100svh - 610px) stays as a floor through max(), so no screen gets a smaller photo than it had: it still
decides at 1512x982, 1680x1050 and 1920x1080, where the old room was already small or the photo at 440px. Measured
room under the tiles: 1024x768 30, 1280x800 51, 1366x768 50, 1440x900 50, 1470x956 47, 1512x982 44, 1536x864 60,
1680x1050 27, 1920x1080 52; the photo 277, 256, 208, 310, 350, 372, 261, 440, 440. The library head with the field
starts under the fold at these sizes; making room for it would take height from the tiles.
?top=a FROM 1200px (review round): the four covers drop their 3:2 shape for the height that is left, the same sum
with the tiles' own text in place of the large tile's (about 470px up to 1600px wide, falling to 410px by 1950px
as the intros take fewer lines), at least 140px, at most 1.15 times the tile's width: where the first screen is
short they are wider than 3:2 (287 by 152 at 1366x768, where the tiles ran 55px past the fold), where it is tall
they are a little taller than wide (420 by 472 at 1920x1080), so the height the field gave up goes to the
covers, not to a strip of ivory. Room under the tiles: 1280x800 37, 1366x768 28, 1440x900 43, 1536x864 34,
1680x1050 41, 1920x1080 30. From 960 to 1199px its row tiles keep the height of their text (stretching them would
only add ivory inside them), and the library head shows under them in the first screen. Both sums depend on the
placeholder copy's length: re-measure when the questions or intros change. */
@media (min-width:960px){
.ph.c-hub{padding-top:clamp(108px,13svh,140px)}
.c-hub .c-entry{margin-top:clamp(32px,5svh,56px)}
html:not(.top-a) .c-st:first-child .c-st-img{aspect-ratio:auto;flex-grow:1;object-fit:cover;
height:clamp(180px,max(100svh - 610px,100svh - clamp(108px,13svh,140px) - clamp(32px,5svh,56px) - min(140px + 20vw,450px)),440px)}
}
@media (min-width:960px) and (max-height:900px){
html:not(.top-a) .c-st:not(:first-child) .c-meta{padding-top:14px}
html:not(.top-a) .c-st:not(:first-child) .c-st-h{padding-top:6px;padding-bottom:14px;font-size:max(1.25rem,calc(var(--fs-sub) + 1px));
line-height:1.22}
html:not(.top-a) .c-st:first-child .c-st-h{font-size:clamp(1.75rem,2.1vw + .2rem,2.125rem)}
}
@media (min-width:960px) and (max-height:800px){
html:not(.top-a) .c-st:not(:first-child){padding-left:34%}
html:not(.top-a) .c-st:not(:first-child) .c-st-img{width:34%}
html:not(.top-a) .c-st:not(:first-child) .c-meta{padding-top:12px}
html:not(.top-a) .c-st:not(:first-child) .c-st-h{padding-top:4px;padding-bottom:12px}
}
@media (min-width:1200px){
.top-a .c-st-img{aspect-ratio:auto;object-fit:cover;
height:clamp(140px,100svh - clamp(108px,13svh,140px) - clamp(32px,5svh,56px) - clamp(410px,744px - 17.2vw,470px),
(100vw - var(--gut-l) - var(--gut-r) - 3 * var(--col-gap)) / 4 * 1.15)}
}