`
* holding the repo path. The names are founder material and resolve the
* lede's referent; the path is an internal filesystem location and is the part
* that was genuinely wrong to show a visitor.
*
* default heading · lede · list · document names VISIBLE
* `.src-path`, `.photo-avoid` hidden
* body.cites everything, byte-identical to pre-T-1
*
* The hide is scoped `.src-list .src-path` rather than `.src-path`, and that
* is not tidiness: `styleguide.html` reuses `.src-path` for 75 token names
* (`crimson`, `paper`, `#F5B324`). A bare `.src-path { display: none }` would
* blank the token reference and survive only because that page happens to
* author `` — a page rendering correctly by coincidence.
*
* `display: none`, not deletion. `site/tests/test_site.py` requires the
* `.sources` block in the markup of every page, `site/assets/site.js` reads
* `.src-list li` to label search results, and `querySelectorAll` sees a hidden
* element — all three keep working. The one `#sources` referrer on the site is
* the `.cite` chip; the section it points at is now always on screen, so that
* anchor resolves in both states rather than only in one.
*
* What does NOT move: `.photo-frame`, `.photo-tag` and `.photo-subject` — the
* dashed PHOTOGRAPH TO BE COMMISSIONED reservation and its subject brief are
* the page's own content and stay visible in both states.
*/
body.cites .photo-avoid { display: block; }
.src-list .src-path { display: none; }
body.cites .src-list .src-path { display: inline; }
.sources { background: var(--paper-2); border-top: 1px solid var(--rule); padding: clamp(2rem, 4vw, 3rem) 0; }
.sources h2 { font-size: var(--step-1); margin-bottom: .7rem; }
.sources-lede { max-width: 68ch; color: var(--ink-2); font-size: .95rem; }
.src-list { list-style: none; display: grid; gap: .4rem; margin-top: 1rem; }
.src-list li { display: flex; flex-wrap: wrap; gap: .6rem; align-items: baseline; }
.src-label { font-weight: 800; font-size: .88rem; min-width: 15rem; }
.src-path { font-size: .78rem; color: var(--ink-3); background: var(--paper); border: 1px solid var(--rule); border-radius: 6px; padding: .1rem .4rem; }
/* ----------------------------------------------------------------- search */
.search-label { display: block; font-weight: 800; margin-bottom: .5rem; }
.search-input {
width: 100%; font: 600 var(--step-1) var(--sans); padding: .9rem 1.1rem;
border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--ink);
}
.search-count { margin-top: .8rem; font-size: .85rem; color: var(--ink-3); font-weight: 700; }
.search-results { display: grid; gap: .8rem; margin-top: .6rem; }
.result { border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 1rem 1.2rem; background: var(--paper); }
.result-kicker { font-size: var(--micro); font-weight: 800; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--crimson); margin: 0 0 .3rem; }
.result-text { margin: 0 0 .5rem; color: var(--ink-2); }
.result mark { background: var(--blush); color: var(--ink); border-radius: 3px; padding: 0 .15em; }
.result-src { font-size: .76rem; color: var(--ink-3); margin: 0; }
/* ------------------------------------------------- the Academy library stages
*
* Added 2026-09-07 (h024). These four words were `.eyebrow` paragraphs until
* the courses gained the stage membership her 2026 Courses template supplies;
* they are controls now, so they look like controls. Three things are load
* bearing rather than decorative:
*
* - the size is `--step--1`, not `--micro`. `--micro` is a caption token and
* paints at 11.5px, which `test_qa_sweep.py` already documents as the size
* that reads as 13 in review. A control a reader has to hit is not a
* caption. (That check reads `.btn` and `.card-go` and would not have
* caught this one, which is exactly why the size is chosen here and not
* left to it.)
* - `:focus-visible` is a visible ring. The whole keyboard claim in the run's
* gates rests on a reader being able to see which chip they are on.
* - `aria-pressed="true"` is what paints the selection, so the state a
* screen reader announces and the state an eye sees are the same attribute
* and cannot drift apart.
*/
.stage-row { margin-bottom: .9rem; }
.stage-chip {
font: 800 var(--step--1) var(--sans);
letter-spacing: var(--track-caps); text-transform: uppercase;
color: var(--crimson); background: var(--paper);
border: 1px solid var(--rule); border-radius: var(--r-pill);
padding: .45rem 1rem; cursor: pointer;
}
.stage-chip:hover { border-color: var(--crimson); }
.stage-chip:focus-visible { outline: 3px solid var(--gold-deep); outline-offset: 2px; }
.stage-chip[aria-pressed="true"] {
background: var(--crimson); border-color: var(--crimson); color: var(--paper);
}
/* Ours, not hers, and it reads as the way out rather than as a fifth stage. */
.stage-chip-all { color: var(--ink-2); text-transform: none; letter-spacing: 0; }
.stage-chip-all[aria-pressed="true"] {
background: var(--paper-2); border-color: var(--ink-2); color: var(--ink);
}
/* Built by `site.js`, never shipped in the markup: with scripting off no card
is ever hidden, so a count on disk would be a sentence that can only lie. */
.library-status { margin: 0 0 1.1rem; font-weight: 700; color: var(--ink-2); }
/* ----------------------------------------------------------- three questions */
/* The three-question band is the brief's acceptance test, printed on every page.
* It has to stand apart from the page it judges without going dark — the brief
* prohibits dark by name — so it separates itself with a stone band, rules and
* gold labels instead of an inverted surface. It was a peach-over-cream
* gradient until 2026-09-14: the "creamsicle coloring at the bottom" Regina
* named. */
.three-q {
background: var(--paper-2);
border-block: 1px solid var(--rule);
padding: clamp(2.4rem, 5vw, 3.6rem) 0;
}
/* The band's heading is `.sr-only`, so it sets no font-size of its own and
inherited the UA's `h2 { font-size: 1.5em }` — 26.16px at 1440, which is on
no step of the ramp (14.24 / 17.44 / 22.72 / 32 / 48 / 68.64). It paints
nothing: measured at 1x1 and clipped on all twelve pages, so this is not a
visible defect and is not being reported as one. It is put on `--step-1`
anyway because "every h2 on this site is on the ramp" is a sentence worth
being able to say, and the alternative is one h2 that only a reader using
a screen-reader's heading list ever meets, at a size nobody chose. */
.three-q h2 { font-size: var(--step-1); }
.q-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.6rem; }
.q { border-top: 2px solid var(--crimson); padding-top: 1rem; }
.q-label {
font-size: var(--micro); font-weight: 800; letter-spacing: var(--track-caps); text-transform: uppercase;
color: var(--crimson); margin-bottom: .6rem;
}
.q-body, .q-list li { color: var(--ink-2); font-size: .96rem; }
.q-list { list-style: none; display: grid; gap: .5rem; }
.q-list li { padding-left: 1.2rem; position: relative; }
.q-list li::before { content: "→"; position: absolute; left: 0; color: var(--gold-deep); font-weight: 800; }
.q-why { margin-top: .8rem; font-size: .88rem; color: var(--ink-3); }
/* ----------------------------------------------------------------- footer */
.site-footer { background: var(--paper-2); border-top: 1px solid var(--rule); padding: clamp(2.4rem, 5vw, 3.6rem) 0 1.6rem; }
/* 2026-09-14: once the three-question band became flat stone it was the same
colour as the footer under it, two bands reading as one. The footer goes
white so the band keeps standing apart, as its own rule above says it must. */
.site-footer { background: var(--paper); }
/* FIVE CHILDREN, FOUR TRACKS. `.fgrid` holds `.fbrand` plus one `.fcol` per
entry in `content.FOOTER_COLUMNS`, and that list became HER FOUR columns
(canon 12) while this rule still declared the three the old footer had. Grid
does not shrink to fit: the fifth child took an implicit second row, so STAY
IN THE LOOP — the newsletter capture — rendered underneath the wordmark
instead of beside ABOUT. Her render has the brand and four columns on one
line. `test_footer.py` now derives the track count from `FOOTER_COLUMNS`, so
a fifth column added to the data goes red here rather than silently
wrapping. */
.fgrid { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: 1.8rem; }
.fbrand .brand-mark { font-size: 1.6rem; }
.fbrand .brand-logo-frame { width: 210px; height: 40px; }
.fnote { display: block; font-size: .86rem; color: var(--ink-2); margin: .8rem 0 1rem; max-width: 34ch; }
.fcol h3 { font-size: var(--micro); font-weight: 800; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--ink-3); margin-bottom: .7rem; }
.fcol ul { list-style: none; display: grid; gap: .35rem; }
.fcol a { font-size: .9rem; color: var(--ink-2); text-decoration: none; font-weight: 600; }
.fcol a:hover { color: var(--crimson); text-decoration: underline; }
.legal { border-top: 2px solid var(--rule); margin-top: 2rem; padding-top: 1.2rem; }
.legal p { margin: 0; font-size: .84rem; color: var(--ink-3); }
.disclaimer { color: var(--crimson); font-weight: 800; }
@media (max-width: 860px) { .fgrid { grid-template-columns: 1fr 1fr; } }
/* The uppercase kicker band — `--micro` + `--track-caps`, set on each rule
above rather than overridden from here. Before this there were 13 sizes
inside a 0.2rem band and four trackings doing one job: a difference nobody
can see, multiplied across nine selectors. Overriding them from a later
block would have left every dead literal in the file, and the drift test
counts what is in the file. It was right to fail. */
/* 8 · one rule weight at every seam. Two bordered bands adjoining painted a
4px rule where every other rule on the site is 1px — which reads as a
rendering error rather than a heavier division. */
.band-closer + .three-q,
.three-q + .sources { border-top: 0; }
/* ── The navigation Regina specified — canon 06 "The navigation system" ─────
Every value here is in that canon section, measured off regina-spec-1.png.
If this block and that table disagree, the canon is right. */
.masthead-in{min-height:98px}
.brand-sub{line-height:1.15;font-weight:700}
.primary>ul{display:flex;gap:34px;align-items:center;margin:0;padding:0;list-style:none}
.primary li{position:relative}
.navtop{font:700 var(--step-0)/1.2 var(--sans);color:var(--ink);background:none;border:0;
padding:0;cursor:pointer;display:inline-flex;
align-items:center;gap:7px;text-decoration:none}
.navtop:hover,.navtop[aria-expanded="true"],.navtop[aria-current="page"]{color:var(--crimson)}
.caret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
border-top:5px solid currentColor;display:inline-block}
/* The panel floats on a 1px rule and NO shadow. P5 (not generic startup)
forbids the elevation, and the border is the separation cue that replaces
it — canon 06's elevation ruling, carried forward deliberately over
fidelity to her screenshot, which appears to carry a faint one. */
.navpanel{position:absolute;top:calc(100% + 14px);left:-30px;z-index:60;
display:none;gap:90px;background:var(--paper);
border:1px solid var(--rule);box-shadow:none;padding:26px 30px}
.has-panel:hover .navpanel,
.has-panel:focus-within .navpanel{display:flex}
/* Every panel after the first opens from its item's right edge, so an open
panel stays on a 1085px screen: in the build container's fonts "Get
Involved" ran 45px past it (Cloud Build 8ecbcde6, 2026-09-14). */
.has-panel:not(:first-child) .navpanel{left:auto;right:-30px}
/* Menu intent (site.js §5): a panel the pointer just left stays open for a
moment, and while it does, a neighbour's hover does not open another over
it. Keyboard focus is never suppressed. */
.has-panel.is-held .navpanel{display:flex}
.primary.holding .has-panel:not(.is-held):not(:focus-within) .navpanel{display:none}
/* THE 14px THE POINTER HAD TO CROSS AND COULD NOT. The panel opens at
`top: calc(100% + 14px)`, so between the bottom of the menu item and the
top of the panel there is a 14px band belonging to NEITHER. Moving the
cursor from the button down toward the panel left `.has-panel:hover`,
the panel returned to `display:none`, and the links to the individual
pages could not be reached at all. Reported from outside 2026-09-10:
"Not able to view the individual pages as the menus disappears".
This bridges the band with a transparent extension of the item's own
hover area. It changes no pixel: the panel still floats 14px clear on
its 1px rule with no shadow, which is canon 06's elevation ruling. */
.has-panel::after{content:"";position:absolute;left:0;right:0;top:100%;
height:14px}
/* The item's bridge above is only as wide as its button; this band gives the
open panel its full width over the 14px gap. A pointer leaving diagonally
through the gap BESIDE the button is handled by site.js §5 (menu intent),
which holds the panel for a moment. */
.navpanel::before{content:"";position:absolute;left:-1px;right:-1px;bottom:100%;
height:16px}
/* 210px: 'Strategic Advisory Network' and 'Startup World Cup' both wrapped
at 170 and her render has neither on two lines. */
.megacol{min-width:210px}
.megacol-h{font-size:var(--micro);font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase;
color:var(--ink-40,#8a8a8a);margin:0 0 16px}
.megacol ul{list-style:none;margin:0;padding:0}
/* Her rows sit close. 22px was the measured gap BETWEEN BASELINES in a
1365-wide print; adding it as a margin on top of the theme's inherited
li padding doubled it. This is the gap, not the gap plus the padding. */
.megacol li{padding:0}
.megacol li+li{margin-top:11px}
.megacol a{font-size:var(--step-0);font-weight:400;line-height:1.35;color:var(--ink);text-decoration:none}
.megacol a:hover{color:var(--crimson);text-decoration:underline}
/* "The Academy course should be a subnav to Academy page" (Regina, 11 Sep).
The child list rendered at the same size and edge as its parent, so it
read as a sibling. Indented on a hairline, one step smaller. */
.megacol ul ul{margin:9px 0 0 9px;padding-left:12px;border-left:2px solid var(--rule)}
.megacol ul ul a{font-size:var(--step--1);color:var(--ink-2)}
/* She named it; nobody has written it. Visible, muted, not a link, and it
says so on hover — canon 11's open question rendered rather than hidden. */
.navlink-unwritten{font-size:var(--step-0);line-height:1.35;color:var(--ink-40,#8a8a8a);
cursor:not-allowed;border-bottom:1px dotted var(--ink-40,#8a8a8a)}
.btn-outline,.btn-filled{font-size:var(--step--1);font-weight:700;text-transform:uppercase;
padding:14px 26px;border-radius:3px;text-decoration:none;
display:inline-block;letter-spacing:var(--track-caps)}
.btn-outline{border:1px solid var(--ink);color:var(--ink);background:none}
.btn-outline:hover{background:var(--ink);color:var(--paper)}
.btn-filled{border:1px solid var(--crimson);background:var(--crimson);color:var(--paper)}
.btn-filled:hover{background:#8c1727;border-color:#8c1727}
/* No narrow screen was sent (canon 06, docked). A two-column mega panel has
to become something under ~900px, so it becomes the honest thing: the panel
stops floating and the columns stack in the mobile drawer. */
@media (max-width:900px){
.primary{display:none}
.has-panel::after{content:none}
.navpanel::before{content:none}
.navpanel{position:static;display:flex;flex-direction:column;gap:22px;
border:0;padding:14px 0 0}
.mobile-nav .primary{display:block}
}
/* ── Join page components — canon 06 "The Join page components" ───────────── */
.tier-flag{font-size:var(--micro);font-weight:700;letter-spacing:var(--track-caps);
text-transform:uppercase;color:var(--crimson);margin:0 0 .6rem}
.tier-featured{border-color:var(--crimson)}
/* P6: a price and its period are never the same size. The period is small and
muted so the number reads at a glance instead of being parsed. */
.tier-per{font-size:var(--step--1);font-weight:400;color:var(--ink-40,#8a8a8a);
letter-spacing:0;margin-left:.25rem}
.tier-list{list-style:none;margin:1rem 0 1.4rem;padding:0}
.tier-list li{position:relative;padding-left:1.5rem;line-height:1.35;margin-top:.7rem}
.tier-list li::before{content:"\2713";position:absolute;left:0;color:var(--crimson);font-weight:700}
.faq-list{border-top:1px solid var(--rule);max-width:52rem}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-q{font-weight:700;padding:1.15rem 2rem 1.15rem 0;cursor:pointer;list-style:none;position:relative}
.faq-q::-webkit-details-marker{display:none}
.faq-q::after{content:"+";position:absolute;right:0;color:var(--ink-40,#8a8a8a);font-weight:400}
.faq-item[open] .faq-q::after{content:"\2212"}
.faq-a{padding:0 0 1.3rem;max-width:44rem}
.faq-outstanding{color:var(--ink-40,#8a8a8a);font-style:italic}
/* The chapter directory — slide 3 and slide 4 of her chapters deck, which are
one object on a page: twenty-two names that open in place, and no individual
chapter pages ("No separate chapter pages", her words, twice).
COLUMNS AND NOT A GRID. Her slide sets the names in three columns read down
rather than across, and CSS multicolumn is the only layout that gives that
back without reordering the DOM: a three-track grid would put Africa, Denver
and Oceania on one row and hand a keyboard the same order. `break-inside`
keeps an open chapter whole rather than splitting its leadership across a
column edge. The phone gets one column, so the reading order is hers there
too.
The `+` is drawn here rather than written into the markup, exactly as
`.faq-q::after` draws the FAQ's, so the affordance she marks beside every
name is visible to a reader and is not part of the cited text a checker
reads back against her file. `` brings its own keyboard behaviour
and the sheet's global `:focus-visible` ring; nothing here needs script. */
.dir-list{margin-top:1.6rem;border-top:1px solid var(--rule)}
.dir-item{break-inside:avoid;border-bottom:1px solid var(--rule);background:#FFFFFF}
.dir-q{font-weight:700;padding:.85rem 2rem .85rem 0;cursor:pointer;list-style:none;position:relative}
.dir-q::-webkit-details-marker{display:none}
.dir-q::after{content:"+";position:absolute;right:0;color:var(--ink-3);font-weight:400}
.dir-item[open] .dir-q::after{content:"\2212"}
.dir-a{padding:0 0 1.1rem}
.dir-field{margin-top:.75rem}
.dir-field-h{font-size:var(--micro);font-weight:700;letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--ink-3)}
.dir-b{margin-top:.2rem}
.dir-people li{margin-top:.4rem}
.dir-person{display:block;font-weight:700}
.dir-role{display:block;color:var(--ink-3)}
.dir-act{margin-top:.3rem}
/* A field nobody has supplied. Muted and italic, the register
`.faq-outstanding` already uses for the answer that is not written yet —
visible, quiet, and never mistakable for content. */
.dir-unknown{margin-top:.2rem;color:var(--ink-3);font-style:italic}
@media (min-width: 900px){
.dir-list{column-count:3;column-gap:2.4rem}
}
/* Her bulleted lists inside a prose band — WHAT HAPPENS LOCALLY (slide 2) and
the four formation steps (slide 7). A square marker, not a disc: this sheet
spends its round shapes on nothing. */
.prose-list{margin-top:1.1rem;max-width:44rem}
.prose-list li{position:relative;padding-left:1.2rem;margin-top:.55rem}
.prose-list li::before{content:"";position:absolute;left:0;top:.6em;width:.4rem;height:.4rem;background:var(--crimson)}
.prose-foot{margin-top:1.2rem}
/* The utility bar — canon 06 "The Join page components". Tokens only. */
.utilbar{border-bottom:1px solid var(--rule);background:var(--paper)}
.utilbar-in{display:flex;justify-content:flex-end;gap:1.6rem;padding:.5rem 0}
.utilbar a{font-size:var(--micro);color:var(--ink-3);text-decoration:none}
.utilbar a:hover{color:var(--crimson);text-decoration:underline}
/* Her render has the logo, the five nav items and the two buttons on ONE row.
`.masthead-in` wraps on purpose — without it the row held a 528px floor and
pushed every page 138px wider than a 390px phone — so the wrap stays for
narrow screens and is switched off only where there is room for it.
Caught by a 1440 screenshot, not by a test: the buttons had dropped to a
second row and every assertion still passed. */
@media (min-width:1100px){
.masthead-in{flex-wrap:nowrap}
.primary{flex:0 1 auto;min-width:0}
.primary>ul{gap:clamp(18px,2.2vw,34px);flex-wrap:nowrap}
.utility{flex:0 0 auto}
}
/* Her footer's social row — three text marks, not icon files. She shows
"in · X · IG" and a wordmark needs no asset, no licence and no alt text. */
.fsocial{display:flex;gap:1rem;margin:.9rem 0 1.1rem}
.fsocial a{font-size:var(--micro);font-weight:700;letter-spacing:var(--track-caps);
color:var(--ink-3);text-decoration:none;text-transform:uppercase}
.fsocial a:hover{color:var(--crimson)}
/* Nothing in the masthead may break mid-word. The 1100px nowrap rule above
removed the row wrap and pushed the squeeze into the words themselves —
the wordmark rendered "ENTREPRENEUR / S" and three nav items sat on two
lines each. Her render has every one of them on a single line.
The brand gets its natural width; the nav items refuse to break; the gap
is what gives when the row is tight. */
@media (min-width:1100px){
.brand{flex:0 0 auto}
.brand-sub{white-space:nowrap}
.navtop{white-space:nowrap}
.primary>ul{gap:clamp(14px,1.8vw,34px)}
}
/* The row is over-full at 1440 and nowrap turned wrapping into COLLISION —
the nav ran under the wordmark and under LOG IN. Her render fits because
it carries no Sources button; ours does, and that is a reviewer affordance
we keep. So the nav takes the smaller step here and the gaps tighten.
Verified by screenshot, not by querying the DOM: three checks of this
masthead have now passed while the rendered page was wrong. */
@media (min-width:1100px){
.navtop{font-size:var(--step--1)}
.primary{margin-inline:auto}
.primary>ul{gap:clamp(12px,1.4vw,22px)}
.utility{gap:.4rem}
.cite-toggle{font-size:var(--micro)}
}
/* Her programme-card meta line — "10 weeks · Equity-free · Open globally". */
.card-meta{font-size:var(--micro);color:var(--ink-3);margin:.6rem 0 .9rem}
/* h032, 2026-09-09 — the session date on an Academy short-course card.
Pages 2-3 of HAE Academy Courses _ Harvard Alumni Entrepreneurs.pdf put it top-RIGHT, level with the
stage badge, so the eyebrow becomes a row and the date is its second child.
Deliberately NOT .card-meta: that one sits under the body and carries the
flagship availability line ("Starts October 14"), and a bare date there
would read as availability. The type is --micro on --ink-3, the pair
.card-meta already ships, so canon 06's frozen ramp gains no literal and no
eleventh tracking value. The row only exists on cards that pass a `date`;
every other card emits the bare it always did. */
/* `wrap`, for the reason .progression-steps wraps: two uppercase runs on one
unbreakable line inside a 260px card is the 138px phone overflow of
2026-08-10 in a new component. */
.card-eyebrow-row{display:flex;flex-wrap:wrap;align-items:baseline;
justify-content:space-between;gap:.75rem;margin-bottom:.5rem}
.card-eyebrow-row .card-eyebrow{margin-bottom:0}
.card-date{font-size:var(--micro);color:var(--ink-3);white-space:nowrap;flex:0 0 auto}
/* Her events index — a date block left, the event right. The date is a block
because a reader scans dates first and titles second. From regina-events. */
.evt-list{display:flex;flex-direction:column;gap:0}
.evt{display:flex;gap:1.8rem;padding:1.6rem 0;border-bottom:1px solid var(--rule)}
.evt-date{flex:0 0 5.5rem;text-align:center;border:1px solid var(--rule);
padding:.7rem .4rem;align-self:flex-start}
.evt-mon{display:block;font-size:var(--micro);font-weight:700;
letter-spacing:var(--track-caps);text-transform:uppercase;color:var(--crimson)}
.evt-day{display:block;font-size:var(--step-2);font-weight:700;line-height:1.1}
.evt-yr{display:block;font-size:var(--micro);color:var(--ink-3)}
.evt-tags{display:flex;gap:.9rem;margin:0 0 .4rem;font-size:var(--micro);
letter-spacing:var(--track-caps);text-transform:uppercase}
.evt-kind{font-weight:700;color:var(--crimson)}
.evt-where{color:var(--ink-3)}
.evt-h{margin:0 0 .35rem}
.evt-b{margin:0 0 .4rem;max-width:52ch}
.evt-time{font-size:var(--micro);color:var(--ink-3);margin:0}
@media (max-width:640px){ .evt{flex-direction:column;gap:.8rem} }
/* ═══ HER VISUAL SYSTEM — canon 06 "Her visual system", 2026-08-18 ═══
The site had her information architecture and her content sitting on OUR
visual system. Everything below moves the last of it. Each rule cites the
canon line it implements; if they disagree, the canon is right. */
/* The ground is white. Not --paper, not --paper-2. */
body, .band, .band-cards, .band-stats, .band-events, .band-faq,
.band-tiers, .masthead { background: #FFFFFF; }
/* The utility bar is INVERTED and carries the tagline. */
.utilbar { background: var(--ink); border-bottom: 0; }
.utilbar-in { justify-content: space-between; padding: .55rem 0; }
.utilbar a { color: #FFFFFF; opacity: .82; }
.utilbar a:hover { color: #FFFFFF; opacity: 1; }
.utilbar-tag { font-size: var(--micro); font-weight: 700;
letter-spacing: var(--track-caps); text-transform: uppercase;
color: #FFFFFF; }
.utilbar-links { display: flex; gap: 1.6rem; }
/* P7 — the headline is ONE colour. Crimson marks the word HAE, nothing else. */
.hero-h, .hero-h * { color: var(--ink); }
.hero-h .accent { color: var(--ink); }
.hero-h::after, .hero-h .rule, .hero-accent-rule { display: none !important; }
.band-h .hae-mark { color: var(--crimson); }
/* Buttons are rectangles, uppercase, tight. */
.btn, .btn-primary, .btn-secondary, .btn-sm, .btn-outline, .btn-filled {
border-radius: 2px;
text-transform: uppercase;
font-size: var(--micro);
letter-spacing: var(--track-caps);
padding: 12px 22px;
}
.btn-primary { background: var(--crimson); color: #FFFFFF; border: 1px solid var(--crimson); }
.btn-secondary { background: #FFFFFF; color: var(--ink); border: 1px solid var(--ink); }
/* The logo has a mark. */
.brand { display: flex; align-items: center; gap: .8rem; }
.brand-mark { display: inline-flex; align-items: center; justify-content: center;
width: 44px; height: 44px; border-radius: 50%;
background: var(--crimson); color: #FFFFFF;
font-weight: 700; font-size: .82rem;
flex: 0 0 44px; }
.brand-sub { font-size: .92rem; font-weight: 700; line-height: 1.15;
letter-spacing: 0; text-transform: none; color: var(--ink);
max-width: 8.5rem; }
/* The stat band is dividers, not a box. */
.stats, .band-stats .stats {
border: 0; border-radius: 0; background: #FFFFFF;
display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.stats .stat { border: 0; border-left: 1px solid var(--rule);
padding: 2rem 1.4rem; background: transparent; }
.stats .stat:first-child { border-left: 0; }
.stat-fig { font-size: var(--step-3); font-weight: 700; color: var(--ink); }
.stat-label { font-size: var(--micro); color: var(--ink-3); }
/* The Sources control stays — it is how a reviewer sees provenance — but it is
not part of her design and stops competing with JOIN HAE. */
.cite-toggle { border-radius: 2px; font-size: var(--micro); opacity: .55;
border: 1px solid var(--rule); background: transparent; }
.cite-toggle:hover { opacity: 1; }
/* Three left, all measured against her page-1 render. */
/* 1 · The hero ground is WHITE. Her page has no tint anywhere; the warmth
comes from photography and the one dark bar. */
.hero { background: #FFFFFF; }
/* 2 · The gold accent underline is retired with the split headline. It left
an orphan swatch behind when the accent string went empty — an empty
element still painting its own decoration. */
.hero-accent, .hero-accent-line { background: none; display: inline; }
.hero-accent:empty, .hero-accent-line:empty { display: none; }
/* 3 · Crimson marks the word HAE, not a rule under a heading. Hers writes
"Neither does HAE." with HAE in crimson and no underline anywhere. */
.band-h::after, .band-h .rule { display: none; }
.band-h { border-bottom: 0; }
/* Her full-bleed photo strip — three landscapes edge to edge between the hero
and the stat band (HOMEPAGE-v2 page 2). No wrap, no caption, no radius.
This is where her design puts photography: AFTER the text lands, which is
why her hero is empty and why ours should not have had a picture in it. */
.band-strip { display: grid; grid-template-columns: repeat(3, 1fr);
gap: 2px; width: 100%; }
.strip-img { width: 100%; height: clamp(140px, 15vw, 210px);
object-fit: cover; display: block; }
@media (max-width: 640px){ .band-strip { grid-template-columns: 1fr 1fr; }
.band-strip img:nth-child(3){ display: none } }
/* A