/* ==========================================================================
Huda Academy — Board of Directors (/about/board/)
Loaded ONLY by about/board/index.html, after site.css and never instead of
it.
WHAT THIS IS. A port of the client's concept page,
.
THE SPEC MOVED ON 2026-09-19. The client supplied a fresh export of the
whole About family (`lab/concept-2026-09-19/`) and asked for it applied. For
this page that was not a copy edit: five of the seven sections were
redesigned. Section 02 lost its sticky outlined numeral for a full-height
photograph with the question laid over it; section 03 lost the portrait
plates the school has no portraits for; section 04 became the dark band and
gained a photograph; section 05 went light and became a stage rather than a
table; section 06 became a 2x2 photo grid rather than a list of rows.
`lab/concept-2026-09-19/about-board-ref.html` is the fixture
`tools/verify-board.mjs` measures this file against, rule by rule and
property by property. The 2026-09-18 capture is kept at
`lab/about-board-ref.html` as the record of what the page was built from
first; nothing here is measured against it any more.
EVERY DECLARATION BELOW IS THE CONCEPT'S OWN unless it carries a DEVIATION
marker. Each one is numbered where it happens and listed in the index below.
The numbers are not renumbered when one retires — a deviation number is a
reference into the git history and into the verifier's allowlist, and
shuffling them would silently repoint both.
EVERYTHING IS NAMESPACED `brd-`, AND THAT IS LOAD-BEARING, NOT TIDINESS.
The concept ships bare class names that site.css already owns for the home
page and — worse — for the shell that renders above and below this content:
`.nav`, `.notice`, `.skip`, `.brand`, `.btn`, `.eyebrow`, `.person`,
`.visit`, `.people`. Unprefixed, this page would restyle the real nav and be
restyled by it. The sibling ports `about.css`, `about-mission.css` and
`accreditation.css` each reached the same conclusion, and `about.css`
records the sharpest version of the risk: site.js block 3 runs
`querySelectorAll('.stat')` and reads `.stat__num` off every hit, so one bare
collision throws and takes the drawer, the lightbox and every reveal with it.
TOKENS ARE DECLARED ON `.brd`, NEVER `:root`. `:root` belongs to site.css;
this file is a guest on one page. The concept's own `:root` block would have
redefined --ink, --paper, --gold, --line and --shadow out from under the
shell rendering in this same document.
DEVIATION INDEX
1 the two reds are the site's tokens, not the concept's near-identical ones
2 RETIRED 2026-09-19 — `.brd-relationship` was the flat dark band and had
to become a gradient. The concept made that section paper and moved the
dark to section 04, so the fix moved with it and is now 15.
3 `.brd-visit`'s flat dark ground becomes a two-stop gradient + noise
4 `body{overflow-x:hidden}` is not copied
5 the concept's unscoped `img`/`a` rules are scoped to `.brd`
6 `html{scroll-behavior:smooth}` is not copied
7 the reveal is gated on `html.js` and has a working failsafe
8 the shell's own rules (nav, banner, footer, skip) are not ported
9 `:root` becomes `.brd`
10 RETIRED 2026-09-19 — the even-child offset was a `transform` and is a
`margin-top` in the new concept, so there is nothing left to annotate.
11 RETIRED 2026-09-19 — the portrait plate it moved a transition off no
longer exists.
12 RETIRED 2026-09-19 — the "Portrait pending" label went with the plates.
13 the body ink is the site's token, not the concept's near-identical one
14 `line-height:normal` is declared, to restore the concept's own default
15 `.brd-oversight`'s flat dark band becomes a two-stop gradient + noise
A RETIRED NUMBER IS NOT REUSED. 2, 10, 11 and 12 stay listed and stay empty;
the git history and this repo's notes refer to them by number.
========================================================================== */
/* DEVIATION 9 — the concept's `:root` block becomes this `.brd` block, and the
token names gain the namespace with it. Two consequences worth stating:
nothing here can reach the shell rendering above and below this content, and
`--sage: #596A52` is dropped outright — the concept declares it and never
uses it once, which tools/verify-board.mjs asserts against the fixture rather
than taking on trust. */
.brd {
/* Straight from the concept, kept as authored. Each is far enough from its
site.css neighbour to be a real choice rather than a rounding error: the
concept's paper is near-white where site.css's is a warm cream, and its
gold is deeper than the hero's. Mirrored from the sibling ports so the
four About pages are one design family — tools/verify-board.mjs asserts
these against about-mission.css so they cannot drift apart silently. */
--brd-cream: #F4EEE4; /* site --paper-2 is #EEE7DC — visibly deeper */
--brd-paper: #F8F4EE; /* site --paper is #F8F4EE — visibly warmer */
--brd-gold: #CFAF82; /* site --gold is #F2A33A — visibly lighter */
--brd-sand: #ECE5DA; /* the directory band, as the concept authored it */
--brd-shell: #F2EADF; /* the resources band, likewise */
/* DEVIATION 13 — the body ink is the site's token, not the concept's.
concept #23160C (36,21,15), site --ink #34231A (42,26,17). About 2.6 dE
apart: both read as the same warm near-black, and neither is the other.
The site token wins for the same reason the red does — this text sits in a
document whose nav, drawer and footer are all painted from site.css, and
the three sibling ports made this call first. */
--brd-ink: var(--ink);
--brd-line: rgba(35,22,12,.18);
--brd-soft-line: rgba(35,22,12,.1);
--brd-shadow: 0 24px 60px rgba(64,30,14,.14);
/* DEVIATION 1 — the two reds are the site's, not the concept's.
concept --rust #A72820 --rust2 #7D261B
site --terracotta #A83226 --terracotta-deep #86251B
Under 3 ΔE apart, so nothing about the concept's look changes. The reason
to move is that this page renders under the real nav, which is painted
--terracotta: two reds that close together on one screen read as a mistake
rather than as a choice. `about.css` DEVIATION 1 made the same call first
and the three sibling pages already ship it. */
--brd-rust: var(--terracotta);
/* DEVIATION 15 — the concept paints `.oversight` a flat `#2A1912` across the
full viewport width, 860px tall. A perfectly flat dark solid is what the
display pipeline spatial-dithers, and the dither shows as a diagonal
hairline at slope ~0.13 across the whole band, in screenshots too. Global
rule in ~/.claude/CLAUDE.md, restated in this repo's CLAUDE.md, and it is
not a preference.
The stops bracket the concept's colour exactly: #34241B is (53,35,28) and
#201006 is (33,15,8), which average to (43,25,18) — #2A1912 to the
integer. The band therefore reads as the same colour and is not flat.
THIS IS DEVIATION 2 MOVED, NOT A NEW IDEA. Until the 2026-09-19 concept,
`.relationship` was the flat dark band and DEVIATION 2 was this same fix
applied there. That section is paper now, so 2 is retired and the fix
followed the dark to section 04. tools/verify-board.mjs computes the
average of these two stops and compares it to the concept's flat value, so
the arithmetic above is checked rather than believed. */
--brd-band-hi: #34241B;
--brd-band-lo: #201006;
/* DEVIATION 3 — same treatment for `.visit`'s flat `#2D1B14`.
#35261D is (55,37,30) and #211208 is (35,17,10): average (45,27,20), which
is #2D1B14 exactly. */
--brd-visit-hi: #35261D;
--brd-visit-lo: #211208;
background: var(--brd-paper);
color: var(--brd-ink);
font-family: "DM Sans", sans-serif;
/* DEVIATION 14 — AN ADDED DECLARATION THAT EXISTS TO RESTORE THE CONCEPT'S
OWN DEFAULT, and it was found by measurement, not by reading.
The concept's `body` sets no line-height, so every element without one of
its own inherits `normal` — about 1.2 in DM Sans. This page renders inside
a document where site.css sets `body{line-height:1.6}`, which `.brd`
inherited: every row, card and button that relies on the default came out
taller. Measured against the 2026-09-18 pairing at 1920: the oversight
list ran 604px against 541, each row 121 against 108, the resource rows
115 against 100, the button 56 against 52, and the page finished 208px
longer. Those were that design's numbers and the design has since changed;
the finding has not, because it is about inheritance and not about layout.
`normal` is the value the concept computes to. Copying its stylesheet was
not enough on its own, because half of what a page looks like is what it
inherits. */
line-height: normal;
/* DEVIATION 4 — the concept's `body{overflow-x:hidden}` is NOT copied.
site.css already sets `html,body{overflow-x:clip}`, and CLAUDE.md is
explicit that `hidden` must never be used here: it makes a scroll
container, which re-parents every `position:sticky` on the page.
THE THING IT PROTECTS IS NO LONGER ON THIS PAGE BUT IS STILL OVER IT. The
2026-09-18 concept had a sticky numeral in section 02 and the 2026-09-19
one replaced it with a photograph, so this stylesheet declares no sticky
of its own any more. This page still renders inside site.css's
`.topstack{position:sticky}`, and `overflow-x:hidden` anywhere in here
would re-parent that element to the page instead of the viewport. Several
rules below use `overflow:hidden` on a band, which is a different thing:
it clips that box and creates no scroll container for a sticky ancestor
that lives outside it. */
}
/* DEVIATION 5 — the concept's global element rules are scoped.
It ships `img{display:block;width:100%;height:100%;object-fit:cover}` and
`a{color:inherit;text-decoration:none}` unscoped. Unscoped here they would
stretch the nav's logo lockup and the footer mark to fill their boxes and
strip the underline off every shell link on the page.
DEVIATION 6 — `html{scroll-behavior:smooth}` is not copied either. Nothing
on this page links to an in-page anchor except the skip link, and a skip
link that scrolls smoothly is worse for the reader who needs it. A page
stylesheet has no business setting a document-level behaviour in any case.
SCOPING THEM RAISED THEIR SPECIFICITY, AND THAT IS A REAL DANGER, NOT A
TECHNICALITY. The concept's `a{color:inherit}` is (0,0,1) and loses to any
class; `.brd a` is (0,1,1) and BEATS one. The first build of this file did
exactly that and the CTA in the closing band rendered cream-on-cream:
`.brd-btn{color:#391E11}` is (0,1,0), so `.brd a{color:inherit}` won and the
button inherited `.brd-visit__copy`'s `#FDF4E9`. Measured, not spotted —
background rgb(240,231,209) under text rgb(253,244,233), which is a button
with no visible label.
`:where()` contributes no specificity, so these land back at (0,1,0) and a
class beats them again, exactly as in the concept. */
.brd :where(img) { display: block; width: 100%; height: 100%; object-fit: cover; }
.brd :where(a) { color: inherit; text-decoration: none; }
/* ---------- reveals -------------------------------------------------------
DEVIATION 7 — the concept hides content with a bare
`[data-reveal]{opacity:0}` plus an IntersectionObserver and nothing else. If
its script 404s, throws, or is never reached, the page body stays invisible
forever. That is exactly what CLAUDE.md's "content visibility must never
depend on JS or an animation firing" rule exists to prevent, and this repo
has shipped that bug once already.
Three guards, the same shape the three sibling ports use:
1. gated on `html.js`, set by the shell's inline script — with
scripting off nothing is ever hidden in the first place;
2. revealed per element by `.is-in`, added by this page's own script as
each one scrolls in, which is what preserves the concept's stagger;
3. revealed wholesale by `html.brd-revealed`, set by a 6s timer in this
page's inline script if the page script never armed.
IT CANNOT REUSE site.css's `.rv` / `html.in` PAIR: site.js block 3 adds `in`
immediately on any page with no `.stat` elements, and this page has none by
design, so everything would reveal on load and the fade would be gone.
Only content carries these, never a control. */
html.js .brd [data-rv] {
opacity: 0;
transform: translateY(30px);
transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
}
html.js .brd [data-rv].is-in { opacity: 1; transform: none; }
/* THE FAILSAFE RULE CANCELS THE TRANSITION, AND THAT IS THE WHOLE RULE.
A running CSS transition is a higher cascade origin than author
`!important` — CLAUDE.md records it as the thing that made the burger vanish
intermittently. So an element whose `opacity 0 -> 1` transition has started
and never finished (a backgrounded tab, a bfcache restore, throttled timers)
is pinned at its START value, and a failsafe that only sets `opacity:1`
loses to it. Measured on the sibling pages in a backgrounded tab: with the
transition left alive, the failsafe fired, the class was present, and 19 of
19 elements were still invisible. Cancelling the transition makes the
element jump to the end value instead of racing toward it, so the failsafe
cannot lose. `visibility` is belt and braces for the same reason. */
html.brd-revealed .brd [data-rv] {
opacity: 1;
visibility: visible;
transform: none;
transition: none;
}
.brd .delay-1 { transition-delay: .1s; }
.brd .delay-2 { transition-delay: .2s; }
.brd .delay-3 { transition-delay: .3s; }
/* The noise film that pays for every gradient below. Identical turbulence and
opacity to site.css's `.mission7__noise` and to the sibling ports — the
standing fix, not a new effect. */
.brd-noise {
position: absolute;
inset: 0;
pointer-events: none;
opacity: .035;
mix-blend-mode: overlay;
background-image: url("data:image/svg+xml;utf8,");
}
/* ---------- 01 · hero: MOVED TO THE MASTER, 2026-09-27 --------------------
The concept's board hero - the split grid, the "Board of Directors" title
with its indented em, the table photograph and its entrance, the arch line,
the index card and the crumbs - is gone. The client decided that every
interior page opens with the one master hero, and assets/css/page-hero.css
owns it. Do not restyle the hero here: a rule in this file that reaches
into .page-hero makes this page the odd one out, which is exactly what the
decision was made to end. Its parallax went to assets/js/page-hero.js.
The eyebrow stays: five sections below still use it. */
.brd-eyebrow {
color: var(--brd-rust);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .2em;
margin-bottom: 20px;
}
/* ---------- 02 · the board's role -----------------------------------------
REBUILT BY THE 2026-09-19 CONCEPT. It used to be an outlined "02" in a
sticky left rail with the question set as a rule-bounded pull quote. It is
now a two-column band: a photograph running the full height of the left
column, and the question laid over its bottom-right corner as a rust card
that overhangs the picture. Ported as authored. */
.brd-mandate {
padding: clamp(100px, 11vw, 170px) clamp(28px, 8vw, 145px);
display: grid;
grid-template-columns: minmax(360px, .94fr) minmax(430px, 1.06fr);
gap: clamp(55px, 8vw, 125px);
align-items: center;
overflow: hidden;
}
/* The visual is the positioning context for both the photograph and the card,
and it is what gives the band its height: the picture inside it is absolute,
so nothing else would. */
.brd-mandate__visual { min-height: 670px; position: relative; }
.brd-mandate__photo {
position: absolute;
inset: 0 12% 0 0;
overflow: hidden;
background: #3A2316;
}
.brd-mandate__photo img { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.brd-mandate__visual:hover img { transform: scale(1.035); }
.brd-question {
position: absolute;
right: 0;
bottom: 48px;
width: min(455px, 88%);
background: var(--brd-rust);
color: #FCF7EE;
padding: 38px 42px;
font-family: "Libre Caslon Display", serif;
font-size: clamp(25px, 2.7vw, 39px);
line-height: 1.2;
box-shadow: 0 20px 50px rgba(75,29,14,.2);
}
.brd-mandate h2,
.brd-directory h2,
.brd-oversight h2,
.brd-relationship h2,
.brd-resources h2 {
font-family: "Libre Caslon Display", serif;
font-size: clamp(43px, 5.2vw, 76px);
line-height: 1.02;
letter-spacing: -.03em;
margin: 0;
}
.brd-mandate__copy { margin-top: 43px; columns: 2; column-gap: 38px; }
.brd-mandate__copy p {
font-size: 17px;
line-height: 1.8;
color: #62514C;
margin: 0 0 24px;
break-inside: avoid;
}
.brd-note {
margin-top: 40px;
margin-left: 10%;
max-width: 520px;
padding-left: 24px;
border-left: 3px solid var(--brd-gold);
font-size: 14px;
line-height: 1.7;
color: #715E56;
}
.brd-note strong {
display: block;
color: var(--brd-ink);
text-transform: uppercase;
letter-spacing: .12em;
font-size: 11px;
margin-bottom: 8px;
}
/* ---------- 03 · the directory --------------------------------------------
ALSO REBUILT BY THE 2026-09-19 CONCEPT, and the change is a judgement rather
than a restyle: the portrait plates are gone. The school has no portraits,
so the concept stopped designing a hole for them and gave each member an
initial in a disc over a large serif name instead. The band now carries an
outsized "BOARD" watermark bled off its bottom-left corner.
Three deviations retired with those plates — the old 10 (the even-child
offset, which is a `margin-top` now and not a `transform`), the old 11 (the
hover transition the concept declared on the hovered state) and the old 12
(the "Portrait pending" label, which was content living in a stylesheet). */
.brd-directory {
background: var(--brd-sand);
padding: clamp(100px, 11vw, 170px) clamp(26px, 7vw, 125px);
position: relative;
overflow: hidden;
}
/* Decorative in the strict sense: it repeats the word that is already in the
beside it and in the breadcrumb above it, so a reader who never
receives it has lost nothing. The band's own `overflow:hidden` is what keeps
it from widening the document — not the same thing as `overflow-x:hidden`,
see DEVIATION 4. */
.brd-directory:before {
content: "BOARD";
position: absolute;
left: -.04em;
bottom: -.2em;
font-family: "Libre Caslon Display", serif;
font-size: clamp(180px, 27vw, 430px);
line-height: 1;
color: rgba(125,38,27,.055);
letter-spacing: -.08em;
}
.brd-directory__head {
display: grid;
grid-template-columns: 1fr .82fr;
gap: 70px;
align-items: end;
margin-bottom: clamp(85px, 10vw, 140px);
position: relative;
}
.brd-directory__head p {
margin: 0;
color: #64524C;
line-height: 1.75;
font-size: 17px;
max-width: 560px;
}
.brd-people {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(75px, 9vw, 130px) clamp(55px, 11vw, 170px);
max-width: 1180px;
margin: 0 auto;
position: relative;
}
.brd-person { position: relative; max-width: 470px; }
.brd-person:nth-child(even) { margin-top: clamp(65px, 8vw, 110px); }
.brd-person__role {
font-size: 11px;
color: var(--brd-rust);
text-transform: uppercase;
letter-spacing: .2em;
font-weight: 700;
}
.brd-person h3 {
font-family: "Libre Caslon Display", serif;
font-size: clamp(38px, 4.5vw, 64px);
font-weight: 400;
line-height: .98;
margin: 15px 0 21px;
}
.brd-person p {
font-size: 15px;
line-height: 1.75;
color: #68564F;
margin: 0;
max-width: 420px;
}
.brd-person__mark {
width: 64px;
height: 64px;
border-radius: 50%;
background: var(--brd-rust);
color: #FCF4E6;
display: grid;
place-items: center;
font-family: "Libre Caslon Display", serif;
font-size: 24px;
margin-bottom: 28px;
}
.brd-person:nth-child(even) .brd-person__mark {
background: var(--brd-gold);
color: var(--brd-ink);
}
/* ---------- 04 · what the board holds in view -----------------------------
THE 2026-09-19 CONCEPT MADE THIS THE DARK BAND OF THE PAGE and turned
section 05, which used to be the dark one, to paper. It is a two-column band
860px tall: a 760px photograph with the statement laid over its foot, and a
column carrying the heading, the lede and the five responsibilities as a
two-up grid whose first row spans both columns. */
.brd-oversight {
/* DEVIATION 15, sited. The concept: `background:#2A1912`. */
background: linear-gradient(160deg, var(--brd-band-hi), var(--brd-band-lo));
color: #FCF6EE;
display: grid;
grid-template-columns: minmax(360px, .9fr) minmax(520px, 1.1fr);
min-height: 860px;
overflow: hidden;
/* DEVIATION 15, second half: the band has to be the containing block for the
noise film, which is `position:absolute;inset:0`, and the concept's rule
sets no position. A grid container going `relative` moves none of its
tracks, and an absolutely positioned child of a grid container is not a
grid item — it lays out against the padding box and takes no track. */
position: relative;
}
.brd-oversight__visual { position: relative; min-height: 760px; }
.brd-oversight__visual img { position: absolute; inset: 0; filter: saturate(.78); }
.brd-oversight__visual:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(42,25,18,.02), rgba(42,25,18,.58));
}
.brd-oversight__statement {
position: absolute;
z-index: 2;
left: clamp(28px, 5vw, 78px);
right: clamp(28px, 5vw, 78px);
bottom: clamp(45px, 6vw, 90px);
}
.brd-oversight__statement .brd-eyebrow { color: #FFC663; }
.brd-oversight__statement strong {
display: block;
font-family: "Libre Caslon Display", serif;
font-size: clamp(50px, 6vw, 88px);
line-height: .95;
font-weight: 400;
}
.brd-oversight__content {
padding: clamp(95px, 10vw, 150px) clamp(32px, 7vw, 110px);
display: flex;
flex-direction: column;
justify-content: center;
}
/* No space either side of the `>`. The concept writes `.oversight-content>p`
and tools/verify-board.mjs compares selector text, not parsed selectors. */
.brd-oversight__content>p {
font-size: 17px;
line-height: 1.75;
color: #D6C6BD;
max-width: 580px;
margin: 28px 0 55px;
}
.brd-oversight__list { display: grid; grid-template-columns: 1fr 1fr; gap: 42px 52px; }
.brd-row:first-child { grid-column: 1/3; }
.brd-row h3 {
font-family: "Libre Caslon Display", serif;
font-size: clamp(25px, 2.4vw, 36px);
font-weight: 400;
line-height: 1.05;
margin: 0 0 11px;
color: #FFC567;
}
.brd-row p {
max-width: 380px;
color: #CDBBB3;
font-size: 14px;
line-height: 1.65;
margin: 0;
}
/* ---------- 05 · governance and leadership --------------------------------
THE 2026-09-19 CONCEPT TURNED THIS BAND LIGHT. It was the page's flat rust
field, which DEVIATION 2 had to convert into a gradient; it is now
`var(--paper)` on `var(--ink)`. There is no flat dark fill here any more, so
DEVIATION 2 retires with it and the noise film leaves the markup — the same
fix now lives on section 04 as DEVIATION 15, which is where the dark went.
The two roles are no longer a bordered three-column table with a disc
between them. They are two blocks on a stage, the second dropped well below
the first, an oversized ampersand behind both, and the bridge line set as a
small caption pinned to the foot of the stage. */
.brd-relationship {
background: var(--brd-paper);
color: var(--brd-ink);
padding: clamp(105px, 11vw, 170px) clamp(28px, 8vw, 145px);
position: relative;
overflow: hidden;
}
.brd-relationship__head { max-width: 960px; }
.brd-relationship__head p {
font-size: 18px;
line-height: 1.75;
color: #68554E;
margin: 30px 0 0;
max-width: 720px;
}
.brd-system {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(70px, 12vw, 190px);
margin-top: clamp(85px, 10vw, 145px);
padding: 30px 0 65px;
}
/* The ampersand, and it is a mark rather than a word: the sentence it sits
behind is already complete in the markup. */
.brd-system:before {
content: "&";
position: absolute;
left: 50%;
top: 42%;
transform: translate(-50%, -50%);
font-family: "Libre Caslon Display", serif;
font-size: clamp(160px, 20vw, 300px);
color: rgba(167,40,32,.09);
}
.brd-role { position: relative; z-index: 2; }
.brd-role.brd-role--admin { margin-top: clamp(105px, 12vw, 180px); }
.brd-role__kicker {
color: var(--brd-rust);
font-size: 11px;
text-transform: uppercase;
letter-spacing: .2em;
font-weight: 700;
}
.brd-role h3 {
font-family: "Libre Caslon Display", serif;
font-size: clamp(43px, 5vw, 73px);
font-weight: 400;
line-height: .98;
margin: 18px 0 25px;
}
.brd-role p {
font-size: 16px;
line-height: 1.78;
color: #69564F;
max-width: 470px;
margin: 0;
}
/* The bridge is a caption pinned to the foot of the stage, not a lozenge sat
between the two blocks. `white-space:nowrap` is the concept's, and the band
above clips, so at narrow widths the line reaches into the band's side
padding rather than widening the document. */
.brd-bridge {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
font-size: 11px;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--brd-rust);
font-weight: 700;
white-space: nowrap;
}
/* ---------- 06 · continue exploring ---------------------------------------
THE 2026-09-19 CONCEPT REPLACED THE FOUR-ROW LIST WITH A 2x2 PHOTO GRID: a
tall tile down the left of both rows, two stacked beside it, and a wide one
across the foot. Every tile is a full-bleed photograph under a bottom-up
scrim, with its label, its title and a circled arrow over the top. */
.brd-resources {
padding: clamp(105px, 11vw, 165px) clamp(27px, 8vw, 145px);
background: var(--brd-shell);
}
.brd-resources__head {
display: flex;
justify-content: space-between;
gap: 50px;
align-items: end;
margin-bottom: 65px;
}
.brd-resources__head p { max-width: 440px; color: #69564F; line-height: 1.7; margin: 0; }
.brd-resource-list {
display: grid;
grid-template-columns: 1.18fr .82fr;
grid-template-rows: repeat(2, 285px);
gap: 18px;
}
/* The flat `#7A1E14` is the concept's and it stays flat, which is not a breach
of the no-flat-dark rule: every tile carries a photograph at `inset:0` over
the whole of it, so the colour is what shows for the few hundred ms before
the picture decodes and nowhere else. The rule is about large flat fields a
dither can organise itself across; this is a fallback. */
.brd-resource {
position: relative;
overflow: hidden;
padding: 34px;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: #7A1E14;
color: #FFFFFF;
}
.brd-resource:first-child { grid-row: 1/3; }
.brd-resource img {
position: absolute;
inset: 0;
transition: transform .8s cubic-bezier(.2, .7, .2, 1);
}
.brd-resource:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(0deg, rgba(28,12,4,.9), rgba(28,12,4,.08) 72%);
}
.brd-resource small,
.brd-resource strong,
.brd-resource__arrow { position: relative; z-index: 2; }
.brd-resource small {
color: #FFCF71;
font-size: 11px;
letter-spacing: .17em;
text-transform: uppercase;
margin-bottom: 10px;
}
.brd-resource strong {
font-family: "Libre Caslon Display", serif;
font-size: clamp(28px, 3.1vw, 45px);
font-weight: 400;
line-height: 1.05;
max-width: 85%;
}
/* ORDER IS LOAD-BEARING. This rule takes the arrow back out of the flow that
the three-way rule above put it in, and the two have the same specificity —
move it above and the arrow sits in the flex column instead of the corner. */
.brd-resource__arrow {
position: absolute;
right: 30px;
bottom: 31px;
width: 46px;
height: 46px;
border: 1px solid rgba(255,255,255,.6);
border-radius: 50%;
display: grid;
place-items: center;
transition: .35s;
}
.brd-resource:hover img { transform: scale(1.05); }
.brd-resource:hover .brd-resource__arrow {
background: #FFFFFF;
color: var(--brd-rust);
transform: rotate(-35deg);
}
.brd-resource:last-child { grid-column: 1/3; height: 245px; }
.brd-resource:last-child strong { max-width: 70%; }
/* ---------- 07 · visit ---------------------------------------------------- */
.brd-visit {
min-height: 650px;
display: grid;
grid-template-columns: 1.15fr .85fr;
position: relative;
/* DEVIATION 3, sited. The concept: `background:#2D1B14`. */
background: linear-gradient(160deg, var(--brd-visit-hi), var(--brd-visit-lo));
}
.brd-visit__image { min-height: 570px; overflow: hidden; position: relative; }
.brd-visit__image img {
filter: saturate(.8);
transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}
.brd-visit:hover .brd-visit__image img { transform: scale(1.035); }
.brd-visit__image:after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 55%, rgba(45,27,20,.4));
}
.brd-visit__copy {
color: #FDF4E9;
padding: clamp(68px, 7vw, 115px) clamp(30px, 6vw, 95px);
display: flex;
flex-direction: column;
justify-content: center;
/* Holds the noise film for DEVIATION 3. A grid item going `relative` moves
nothing: it is still the same track, the same size, the same place. */
position: relative;
}
.brd-visit__copy .brd-eyebrow { color: #FFC460; }
.brd-visit h2 {
font-family: "Libre Caslon Display", serif;
font-size: clamp(46px, 5.5vw, 79px);
line-height: .98;
letter-spacing: -.03em;
margin: 0 0 25px;
}
.brd-visit p { font-size: 17px; line-height: 1.75; color: #D5C8C1; margin: 0 0 34px; }
.brd-btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 28px;
background: #F0E7D1;
color: #391E11;
padding: 17px 20px;
width: max-content;
min-width: 220px;
border-radius: 3px;
font-size: 14px;
font-weight: 700;
transition: .3s;
}
.brd-btn:hover { background: white; transform: translateY(-3px); }
/* ==========================================================================
The concept's three breakpoints, ported verbatim minus the shell rules.
DEVIATION 8, sited: each of these blocks also carried `.nav`, `.nav-side`,
`.notice`, `.brand-name`, `.brand-mark`, `.donate`, `.mobile-toggle` and
`.footer-*` rules. Those styled the concept's own bar and footer, which this
page does not have — it renders the site's real banner, three-level nav,
drawer and footer, which bring their own responsive rules from site.css.
Porting them would have been styling markup that is not there.
========================================================================== */
@media (max-width: 1100px) {
.brd-mandate { grid-template-columns: minmax(300px, .82fr) minmax(390px, 1.18fr); gap: 55px; }
.brd-mandate__copy { columns: 1; }
.brd-people { gap: 85px 65px; }
.brd-oversight { grid-template-columns: .82fr 1.18fr; }
.brd-oversight__list { grid-template-columns: 1fr; }
.brd-row:first-child { grid-column: auto; }
}
@media (max-width: 760px) {
.brd-mandate { display: block; padding: 95px 24px; }
.brd-mandate__visual { min-height: 540px; }
.brd-mandate__photo { inset: 0 10% 0 0; }
.brd-question { right: 0; bottom: 30px; width: 86%; padding: 27px 28px; }
.brd-mandate__body { margin-top: 65px; }
.brd-mandate__copy { columns: 1; }
.brd-note { margin: 36px 0 0 8%; max-width: 90%; }
.brd-directory { padding: 95px 24px 125px; }
.brd-directory__head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 75px; }
.brd-people { grid-template-columns: 1fr; gap: 65px; }
.brd-person,
.brd-person:nth-child(even) { margin: 0; max-width: 92%; }
.brd-person:nth-child(even) { margin-left: 8%; }
.brd-person h3 { font-size: 46px; }
.brd-oversight { grid-template-columns: 1fr; min-height: auto; }
.brd-oversight__visual { min-height: 560px; }
.brd-oversight__content { padding: 85px 24px 100px; }
.brd-oversight__content>p { margin-bottom: 48px; }
.brd-oversight__list { gap: 38px; }
.brd-relationship { padding: 95px 24px; }
.brd-system { grid-template-columns: 1fr; gap: 68px; margin-top: 70px; padding-bottom: 75px; }
.brd-system:before { top: 48%; font-size: 210px; }
.brd-role { max-width: 92%; }
.brd-role.brd-role--admin { margin: 0 0 0 8%; text-align: right; }
.brd-bridge { bottom: 0; }
.brd-resources { padding: 95px 18px; }
.brd-resources__head { display: block; }
.brd-resources__head p { margin-top: 22px; }
.brd-resource-list { display: block; }
.brd-resource,
.brd-resource:first-child,
.brd-resource:last-child { height: 330px; margin-top: 14px; }
.brd-resource:first-child { height: 470px; }
.brd-resource strong,
.brd-resource:last-child strong { max-width: 84%; }
.brd-visit { display: flex; flex-direction: column; }
.brd-visit__image { min-height: 420px; }
.brd-visit__copy { padding: 70px 24px 85px; }
}
@media (max-width: 430px) {
.brd-mandate__visual { min-height: 470px; }
.brd-mandate__photo { inset: 0 4% 0 0; }
.brd-question { width: 92%; font-size: 24px; }
.brd-person h3 { font-size: 40px; }
.brd-oversight__visual { min-height: 490px; }
.brd-system:before { font-size: 175px; }
.brd-resource strong { font-size: 29px; }
.brd-resource__arrow { right: 22px; bottom: 25px; }
}
/* The concept's own reduced-motion block, scoped to this page. `html` keeps
its own rule out of it — see DEVIATION 6; nothing here sets scroll-behavior,
so there is nothing to put back. The `[data-rv]` line is the reveal's fourth
guard: reduced motion means everything is simply visible. */
@media (prefers-reduced-motion: reduce) {
.brd *,
.brd *:before,
.brd *:after {
animation: none !important;
transition: none !important;
}
html.js .brd [data-rv] { opacity: 1; transform: none; }
}
/* ==========================================================================
2026-09-19 client-directed editorial pass
The previous composition leaned on staggered empty space in three adjacent
sections. This pass gives each section a job: the directory is a compact
governance ledger, oversight is a sticky scroll chapter, and the two roles
meet in one connected system. The original class names remain so the page
stays isolated from the shared shell and continues to degrade cleanly.
========================================================================== */
/* Hero - this pass's calm copy/image rhythm moved to the master hero with the
rest of the hero on 2026-09-27 (assets/css/page-hero.css). */
/* The role introduction stays photographic, but no longer spends a full
screen on negative space before the directory begins. */
.brd-mandate {
padding-block: clamp(92px, 9vw, 135px);
gap: clamp(48px, 7vw, 105px);
}
.brd-mandate__visual { min-height: 590px; }
.brd-mandate__copy { columns: 1; max-width: 650px; }
.brd-note { margin-left: 0; }
/* Directory — a single typographic ledger instead of offset profile islands. */
.brd-directory {
padding: clamp(92px, 9vw, 135px) clamp(26px, 7vw, 125px);
background:
radial-gradient(circle at 8% 14%, rgba(207,175,130,.15), transparent 26%),
var(--brd-sand);
}
.brd-directory:before {
content: "";
left: auto;
right: clamp(26px, 7vw, 125px);
top: 0;
bottom: 0;
width: 1px;
background: rgba(125,38,27,.08);
}
.brd-directory__head {
grid-template-columns: minmax(0, 1fr) minmax(300px, .72fr);
margin-bottom: clamp(52px, 6vw, 78px);
}
.brd-people {
display: block;
max-width: 1280px;
border-bottom: 1px solid rgba(35,22,12,.2);
}
.brd-person,
.brd-person:nth-child(even) {
max-width: none;
margin: 0;
}
.brd-person {
isolation: isolate;
display: grid;
grid-template-columns: 82px minmax(220px, .9fr) minmax(300px, 1.1fr);
gap: clamp(22px, 4vw, 62px);
align-items: center;
min-height: 150px;
padding: 27px clamp(18px, 2.2vw, 34px) 29px 0;
border-top: 1px solid rgba(35,22,12,.2);
transition: background-color 240ms ease, transform 240ms cubic-bezier(.23, 1, .32, 1);
}
.brd-person:before {
content: "";
position: absolute;
z-index: -1;
inset: 0;
background: rgba(248,244,238,.55);
transform: scaleX(0);
transform-origin: left;
transition: transform 360ms cubic-bezier(.23, 1, .32, 1);
}
.brd-person__mark {
width: auto;
height: auto;
margin: 0;
border-radius: 0;
background: transparent !important;
color: rgba(125,38,27,.46) !important;
display: block;
font-size: 32px;
line-height: 1;
}
.brd-person__identity { min-width: 0; }
.brd-person h3 {
margin: 8px 0 0;
font-size: clamp(35px, 3.5vw, 50px);
line-height: 1;
}
.brd-person p {
max-width: 510px;
font-size: 15px;
line-height: 1.7;
}
/* Oversight — the photograph holds its ground while each responsibility
crosses the reading line. JS only changes emphasis and the visible index;
every word remains available without it. */
.brd-oversight {
min-height: 0;
overflow: visible;
grid-template-columns: minmax(340px, .86fr) minmax(480px, 1.14fr);
gap: clamp(55px, 8vw, 130px);
align-items: start;
padding: clamp(92px, 9vw, 138px) clamp(28px, 8vw, 145px);
}
.brd-oversight__visual {
position: sticky;
top: 96px;
align-self: start;
min-height: min(690px, calc(100vh - 128px));
overflow: hidden;
box-shadow: 0 24px 70px rgba(0,0,0,.22);
}
.brd-oversight__visual img {
transform: scale(1.025);
transition: transform 900ms cubic-bezier(.23, 1, .32, 1),
filter 500ms ease;
}
.brd-oversight__visual:after {
background: linear-gradient(180deg, rgba(25,10,2,.06) 22%, rgba(25,10,2,.9) 100%);
}
.brd-oversight__statement {
left: clamp(28px, 4vw, 60px);
right: clamp(28px, 4vw, 60px);
bottom: clamp(34px, 4vw, 58px);
}
.brd-oversight__statement strong {
max-width: 620px;
font-size: clamp(45px, 5vw, 72px);
}
.brd-oversight__progress {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
margin-top: 32px;
color: #FFD174;
font-size: 11px;
font-weight: 700;
letter-spacing: .18em;
}
.brd-oversight__progress i {
display: block;
height: 1px;
background: rgba(255,255,255,.36);
}
.brd-oversight__content {
display: block;
padding: 12px 0 0;
}
.brd-oversight__content>p {
margin: 28px 0 56px;
font-size: 18px;
}
.brd-oversight__list { display: block; }
.brd-row,
.brd-row:first-child {
grid-column: auto;
display: grid;
grid-template-columns: 64px minmax(0, 1fr);
gap: clamp(20px, 3vw, 42px);
align-items: center;
min-height: 205px;
padding: 42px clamp(0px, 1vw, 16px);
border-top: 1px solid rgba(252,246,238,.18);
opacity: .62;
transform: translateX(8px);
transition: opacity 420ms ease, transform 520ms cubic-bezier(.23, 1, .32, 1),
border-color 420ms ease;
}
.brd-row:last-child { border-bottom: 1px solid rgba(252,246,238,.18); }
.brd-row.is-active {
opacity: 1;
transform: none;
border-color: rgba(255,197,103,.68);
}
.brd-row__no {
align-self: start;
padding-top: 5px;
color: #FFC567;
font-family: "Libre Caslon Display", serif;
font-size: 24px;
line-height: 1;
}
.brd-row h3 {
margin-bottom: 14px;
font-size: clamp(31px, 3vw, 44px);
}
.brd-row p { max-width: 500px; font-size: 15px; line-height: 1.7; }
/* Governance relationship — one joined diagram, with no floating islands. */
.brd-relationship {
padding: clamp(92px, 9vw, 132px) clamp(28px, 8vw, 145px);
}
.brd-relationship__head {
display: grid;
grid-template-columns: minmax(0, 1.12fr) minmax(300px, .72fr);
gap: clamp(40px, 8vw, 120px);
align-items: end;
max-width: 1280px;
}
.brd-relationship__head .brd-eyebrow { grid-column: 1 / -1; margin-bottom: -12px; }
.brd-relationship__head p { margin: 0 0 8px; }
.brd-system {
grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr);
gap: 0;
align-items: stretch;
margin-top: clamp(52px, 6vw, 76px);
padding: 0;
border: 1px solid var(--brd-line);
background: #F8F4EE;
box-shadow: 0 20px 55px rgba(64,30,14,.08);
}
.brd-system:before { content: none; }
.brd-role {
min-width: 0;
padding: clamp(42px, 5vw, 72px);
}
.brd-role.brd-role--board {
grid-column: 1;
grid-row: 1;
background: var(--brd-rust);
color: #FCF7EE;
}
.brd-role.brd-role--admin {
grid-column: 3;
grid-row: 1;
margin: 0;
}
.brd-role__no {
display: block;
margin-bottom: clamp(48px, 6vw, 78px);
font-family: "Libre Caslon Display", serif;
font-size: 25px;
line-height: 1;
opacity: .62;
}
.brd-role--board .brd-role__kicker { color: #FFCF71; }
.brd-role h3 {
margin: 16px 0 20px;
font-size: clamp(40px, 4.3vw, 62px);
}
.brd-role p { max-width: 500px; }
.brd-role--board p { color: #E8D9D3; }
.brd-bridge {
grid-column: 2;
grid-row: 1;
position: relative;
inset: auto;
transform: none;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 24px 12px;
background: var(--brd-gold);
color: var(--brd-ink);
text-align: center;
white-space: normal;
}
.brd-bridge span {
font-size: 9px;
letter-spacing: .17em;
line-height: 1.5;
}
.brd-bridge strong {
font-family: "Libre Caslon Display", serif;
font-size: 56px;
font-weight: 400;
line-height: .8;
}
@media (hover: hover) and (pointer: fine) {
.brd-person:hover:before { transform: scaleX(1); }
.brd-person:hover { transform: translateX(8px); }
.brd-person:hover .brd-person__mark { color: var(--brd-rust) !important; }
}
@media (max-width: 1100px) {
.brd-mandate { grid-template-columns: minmax(300px, .82fr) minmax(390px, 1.18fr); }
.brd-person { grid-template-columns: 64px minmax(200px, .8fr) minmax(260px, 1.2fr); }
.brd-oversight {
grid-template-columns: minmax(300px, .8fr) minmax(400px, 1.2fr);
gap: 55px;
}
.brd-system { grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1fr); }
.brd-role { padding: 46px 40px; }
}
@media (max-width: 760px) {
.brd-mandate { padding-block: 82px; }
.brd-mandate__visual { min-height: 500px; }
.brd-directory { padding: 82px 24px; }
.brd-directory:before { display: none; }
.brd-directory__head { display: block; margin-bottom: 48px; }
.brd-directory__head p { margin-top: 24px; }
.brd-person,
.brd-person:nth-child(even) {
grid-template-columns: 48px minmax(0, 1fr);
gap: 14px 20px;
min-height: 0;
padding: 30px 4px 32px 0;
}
.brd-person__mark { grid-row: 1 / 3; font-size: 24px; }
.brd-person h3 { font-size: 39px; }
.brd-person p { grid-column: 2; }
.brd-oversight {
display: block;
padding: 82px 24px;
}
.brd-oversight__visual {
position: relative;
top: auto;
min-height: 540px;
margin-bottom: 72px;
}
.brd-oversight__content { padding: 0; }
.brd-row,
.brd-row:first-child {
grid-template-columns: 46px minmax(0, 1fr);
min-height: 0;
padding: 34px 0;
opacity: 1;
transform: none;
}
.brd-relationship { padding: 82px 24px; }
.brd-relationship__head { display: block; }
.brd-relationship__head .brd-eyebrow { margin-bottom: 20px; }
.brd-relationship__head p { margin-top: 24px; }
.brd-system { display: flex; flex-direction: column; }
.brd-role { padding: 42px 32px 48px; }
.brd-role.brd-role--board { order: 1; }
.brd-role__no { margin-bottom: 42px; }
.brd-role.brd-role--admin { order: 3; text-align: left; }
.brd-bridge {
order: 2;
flex-direction: row;
min-height: 84px;
gap: 16px;
}
.brd-bridge strong { font-size: 44px; }
}
@media (max-width: 430px) {
.brd-oversight__visual { min-height: 480px; }
.brd-oversight__statement strong { font-size: 42px; }
.brd-row h3 { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
.brd-row { opacity: 1; transform: none; }
}