/* ==========================================================================
/about — the founder page.
Load AFTER system.css:
ONE page, so this sheet is deliberately short. Everything that already
exists in the system is used as-is: .photo-hero + .hero-card for the hero,
.hero-bar for the plate, .sec / .slab / .topo for the grounds, .cta for the
close. What is here is the 4 things /about needs that no other page has.
WHY NOT REUSE THE HOMEPAGE .why-band. The obvious move was to lift the cream
band with the family photo and the cowboy watermark off index.html, since it
is the same story. Two reasons not to:
1. Those rules are inline in index.html and are tuned to the pixel against
that one photograph at six viewport widths. Lifting them into a shared
sheet means re-verifying all six on two pages to gain nothing visible.
2. The homepage band is a TEASER: two paragraphs, no name, no signature.
/about is the full version. Running both at the same size in the same
treatment makes the longer one look like a duplicate of the shorter.
The family photo does appear here, as the hero ground. Same picture, doing a
different job.
Tokens, type, .label, .lede and .btn come from system.css. No hardcoded
colours in this file.
========================================================================== */
/* ---- THE HERO -----------------------------------------------------------
family-photo.jpg is 740px wide and .photo-hero-bg defaults to 62% of the
band, which at 1440 is 893px: a 1.21x upscale on the one photograph on this
site with 4 faces in it. --hero-w pulls it to 54% (778px at 1440) so the
upscale is 1.05x and the faces stay clean, and --hero-left moves it right by
the same 8% so the mask ramp still starts where the file starts.
The Y values are low because the frame is a full-length portrait: at the
inherited 46% the band cuts the four of them off at the chin. */
.ab-hero{
--hero-left:46%;--hero-w:54%;
--hero-pos:50% 16%;
--hero-pos-w:50% 20%;
}
/* ---- THE STORY ----------------------------------------------------------
Two columns: the heading holds the left rail, the prose runs down the right.
Not one centred column, because this is the longest continuous run of body
copy on the site and a single measure that wide reads as a wall. Not a
photo-plus-text 2-up either: the photograph is already the hero, and putting
it a second time 600px below itself is how a page starts looking padded. */
.ab-story{
display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
gap:clamp(28px,4vw,72px);align-items:start;
}
@media (max-width:900px){.ab-story{grid-template-columns:1fr;gap:clamp(20px,4vw,28px)}}
.ab-story h2{margin:.24em 0 0;max-width:18ch}
@media (max-width:900px){.ab-story h2{max-width:none}}
.ab-story p{margin:0 0 1.05em;font-size:clamp(15.5px,1.4vw,17px);line-height:1.68;color:var(--sand-2);max-width:62ch}
.ab-story p:last-child{margin-bottom:0}
.ab-story strong{color:var(--sand);font-weight:800}
/* SIGNED. Same shape as the guarantee's .gte-by, on purpose: the promise on
the homepage and the story here are made by the same person and should be
signed the same way. It is not the same CLASS because guarantee.css is only
loaded on the 2 pages that carry the seal, and pulling in a whole sheet for
9 lines of signature would be the tail wagging the dog. */
.ab-sign{
margin:clamp(22px,2.6vw,30px) 0 0;padding-top:clamp(18px,2vw,22px);
border-top:1px solid var(--line);
display:grid;gap:3px;
}
.ab-sign-k{font-weight:800;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--sand-3)}
.ab-sign b{font-size:clamp(16px,1.5vw,18.5px);font-weight:800;letter-spacing:-.01em;line-height:1.15;color:var(--sand)}
.ab-sign-r{font-size:13px;line-height:1.3;color:var(--sand-2)}
/* ---- THE RULES ----------------------------------------------------------
4 boxes, 2 up. Not 4 across: these carry a sentence each, and 4 sentences in
280px columns is 4 blocks of wrapped text pretending to be a banner. That is
what .hero-bar is for, and it is already at the top of this page with the
short-label version of 2 of these claims.
Numbered, and the numbers are content rather than a list-style, because they
are the loudest thing in each box and a marker cannot be styled to that
weight reliably. */
.ab-rules{
list-style:none;margin:clamp(26px,3vw,38px) 0 0;padding:0;
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
gap:clamp(14px,1.6vw,20px);
}
@media (max-width:820px){.ab-rules{grid-template-columns:1fr}}
.ab-rule{
position:relative;
padding:clamp(20px,2.2vw,28px);
border:1px solid var(--line);border-radius:14px;
background:color-mix(in srgb,var(--ox-deep) 42%,transparent);
}
.ab-rule-n{
display:block;font-weight:900;font-size:12px;letter-spacing:.14em;
color:var(--accent);margin-bottom:10px;
}
.ab-rule h3{margin:0;font-size:clamp(17px,1.7vw,20px);letter-spacing:-.02em;line-height:1.2;color:var(--sand)}
.ab-rule p{margin:9px 0 0;font-size:14.5px;line-height:1.58;color:var(--sand-2)}
/* ---- SERVICE AREA -------------------------------------------------------
A town list, not a map. There is no map drawn and a grey placeholder box
where a map should be is worse than no map: it reads as a page that is not
finished. The names are also the part with any search value in them. */
.ab-towns{
list-style:none;margin:clamp(22px,2.6vw,30px) 0 0;padding:0;
display:flex;flex-wrap:wrap;gap:9px;
}
.ab-towns li{
padding:8px 15px;border:1px solid var(--line);border-radius:99px;
font-size:13.5px;font-weight:600;color:var(--sand-2);
background:color-mix(in srgb,var(--ox-deep) 34%,transparent);
}
.ab-after{margin:clamp(20px,2.4vw,28px) 0 0;max-width:62ch}