/* ============================================================================
about.css — /about.
⚠ THE ONE PAGE THAT IS NOT DATA. Every other surface here is dense because
it has to be: the forecast pages and the map are packing a lot of numbers
into a viewport. This page is prose, and prose has a different job — so it
takes the reading column (--maxw-text, 760px) that css/legal.css established
for text on this site, and nothing else competes with the words.
── THE GROUND ────────────────────────────────────────────────────────────
#E9EDF1 / #091322, the same pair css/legal.css redeclares from the forecast
pages, and redeclared here for the same stated reason: this page does not
load forecast.css, and importing a page shell for one colour is the worse
trade. The value is duplicated a third time; the REASONING is not, and
css/legal.css holds it.
⚠ AND THE BRANDFIELD SITS ON TOP OF IT. The legal restyle established the
isobar field as the treatment for sparse prose, and this page is sparser
than either legal document — four short paragraphs where they have
thousands of words. That makes the field MORE appropriate here, not less:
it fills a page that would otherwise be a small card in a large empty
ground, which is exactly the shape it was kept for.
========================================================================== */
:root { --about-ground: #E9EDF1; }
:root[data-theme='dark'] { --about-ground: #091322; }
/* ⚠ NO PADDING ON THE BODY, AND --nav-h IS NOT AN OFFSET. The nav is
`position: sticky; top: 0` and therefore IN FLOW — it takes its own height
at the top of the document. Padding the body by nav-h pushes the NAV down
instead of clearing it (css/legal.css records the same trap costing 92px of
ground above the bar). The main element owns its inset; the body owns the
ground only. */
.about-body {
min-height: 100dvh;
background: var(--about-ground);
color: var(--text-secondary);
font-family: var(--font-sans);
/* The footer is injected at the end of , so the page must be a column
for it to sit under the content rather than beside it. */
display: flex;
flex-direction: column;
}
.about {
/* min() rather than max-width + a media query — the gutter is one number at
every width, matching .legal-card. */
width: min(var(--maxw-text), calc(100% - 2 * var(--sp-4)));
margin-inline: auto;
padding-block: clamp(var(--sp-8), 6vw, var(--sp-16));
/* Pushes the footer to the bottom on a short page without a min-height
guess that a longer one would fight. */
flex: 1 0 auto;
}
/* ⚠ THE BRANDFIELD NEEDS A RULE PER DOCUMENT, AND WITHOUT ONE IT IS A FLEX
ITEM. `.brandfield` is positioned by css/home.css (unscoped), css/auth.css
(.ov--auth) and css/legal.css (.legal-body) — this page loads none of them,
so the injected div arrived with NO position at all, became a child of the
flex column above, and took 145px of real height: measured, the whole page
started 145px lower with the field on than with it off, and the isobars
drew at their intrinsic size in the top-left corner instead of filling.
Mirrors css/legal.css's treatment, which is the one this page is modelled
on — a top-anchored band that fades into the ground rather than a full-page
wash, so the prose sits on flat colour and the texture is only ever above
it. */
.about-body .brandfield {
position: absolute;
inset: 0 0 auto;
height: min(520px, 60vh);
z-index: 0;
overflow: hidden;
pointer-events: none;
background: linear-gradient(180deg, var(--bf-top) 0%, var(--about-ground) 88%);
}
.about-body .brandfield__svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* Above the field. Without this the prose sits behind it and the nav's own
stacking wins the first paint. */
/* ⚠ THE NAV IS NOT IN THIS RULE, AND PUTTING IT HERE SHIPPED A BUG.
The brandfield is z-index 0, so page CONTENT needs z-index 1 to sit
above it — that is all this rule is for. The nav was included too, at
one point, which OVERRODE its global `z-index: 60; sticky` down to 1;
the nav then tied the content at 1 and, painting earlier in the DOM,
lost to it — so the Forecast/Maps hover menus rendered BEHIND the page
and could not be used. The nav keeps its own 60 from css/nav.css and
is above both the field (0) and the content (1) with no help from here. */
.about { position: relative; z-index: 1; }
/* ── The portrait and the name ───────────────────────────────────────────── */
.about__intro {
display: flex;
align-items: center;
gap: clamp(var(--sp-4), 4vw, var(--sp-6));
margin-bottom: clamp(var(--sp-6), 5vw, var(--sp-8));
}
/* ⚠ SQUARE, AND SIZED IN ONE PLACE. The source is 480x480 and this renders it
at 240, so a 2x screen gets an exact pixel pair and a 1x screen gets a clean
halving — no resampling artefacts at either. width/height are on the ![]()
in the markup too, so the box is reserved before the bytes land and the
name beside it does not jump. */
.about__portrait {
flex: 0 0 auto;
display: block;
width: 240px;
max-width: 40%;
}
.about__portrait img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
object-fit: cover;
border-radius: var(--r-lg);
/* A hairline rather than a shadow: the photo is black and white on a tinted
ground, and a shadow would be the only soft edge on the page. */
border: 1px solid var(--line);
}
.about__name {
margin: 0;
font-size: clamp(1.75rem, 5vw, 2.5rem);
font-weight: var(--fw-display);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--text);
text-wrap: balance;
}
/* Uppercase and tracked — the one label on the page, and it reads as a label
rather than as a second line of the name. */
.about__role {
margin: var(--sp-2) 0 0;
font-size: var(--fs-sm);
font-weight: var(--fw-label);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-pressed);
}
/* ⚠ --accent-text IN DARK, NOT --accent, AND THE NUMBER IS WHY. --accent
(#128575) measures 4.11:1 on the dark ground — under the 4.5 floor, and it
was missed twice: axe audits this page in light only, and my own harness
asserted the label merely DIFFERED in colour from the name rather than
measuring it. --accent-text (#6FE3CC) is 12.00:1 and is the token that
exists for exactly this (accent used AS TEXT).
Light keeps --accent-pressed at 6.33:1; --accent-text there is #0E7A66 and
measures 4.47:1, which passes nothing by a margin worth having. */
:root[data-theme='dark'] .about__role { color: var(--accent-text); }
/* ── The prose ───────────────────────────────────────────────────────────── */
.about__prose p {
margin: 0 0 var(--sp-5);
font-size: 1.0625rem;
line-height: 1.7;
color: var(--text-secondary);
}
.about__prose p:last-child { margin-bottom: 0; }
/* The opening paragraph carries the most, so it runs a step larger. */
.about__lede {
font-size: clamp(1.125rem, 2.2vw, 1.25rem) !important;
line-height: 1.6 !important;
color: var(--text) !important;
}
/* ⚠ THE THIRD PARAGRAPH IS THE MISSION, and it is marked rather than retitled.
Grant's copy folds the mission into the bio — "Fetch is that vision…" — so
there is no "Our mission" heading to write, and inventing one would be
adding words to copy that is meant to be used verbatim. A left rule and the
page's ink give it the weight a heading would have given it, without
putting language on the page that its author did not choose. */
.about__vision {
margin-top: var(--sp-6) !important;
padding-left: var(--sp-5);
border-left: 3px solid var(--accent);
color: var(--text) !important;
font-size: 1.125rem !important;
}
/* ── The feature list ────────────────────────────────────────────────────── */
.about__features { margin-top: clamp(var(--sp-8), 6vw, var(--sp-12)); }
/* ⚠ --text-secondary, NOT --text-muted. Muted measures 4.36:1 on the light
ground and axe called it serious — small uppercase text at 15px/600 is not
large-scale, so the 4.5 floor applies in full. Secondary is 6.59 light /
7.42 dark. The label is quiet because it is small, tracked and uppercase,
which costs no contrast; dimming the ink as well was the part that did. */
.about__h2 {
margin: 0 0 var(--sp-5);
font-size: var(--fs-sm);
font-weight: var(--fw-label);
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--text-secondary);
}
.about__list { margin: 0; display: grid; gap: var(--sp-4); }
/* ⚠ A ROW PER PAIR, WITH THE DOING THE GROUPING. A bare dl lays dt and
dd out as siblings with no way to keep a pair together when it wraps; the
wrapper div is valid inside dl for exactly this, and it is what lets each
term sit above its own description at 390 and beside it at 1440. */
.about__item {
display: grid;
grid-template-columns: minmax(9.5rem, max-content) 1fr;
gap: var(--sp-2) var(--sp-4);
align-items: baseline;
padding-bottom: var(--sp-4);
border-bottom: 1px solid var(--line);
}
.about__item:last-child { border-bottom: 0; padding-bottom: 0; }
.about__item dt {
font-weight: var(--fw-label);
color: var(--text);
font-size: 1rem;
}
.about__item dd {
margin: 0;
color: var(--text-secondary);
line-height: 1.55;
}
/* ── The sign-off ────────────────────────────────────────────────────────── */
/* ⚠ NO HEADING. It closes the page after the feature list and has to read as
Grant's voice returning rather than as another section, so it is set apart
by space instead of being labelled. Set at the lede's size and the page's
full ink: it is the last thing read and the only paragraph that addresses
the reader directly ("I hope Fetch does the same for you"), which is worth
the emphasis the feature list just took away.
⚠ THE SPACE DOES THE SEPARATING, NOT THE RULE — and this comment said the
opposite until it was measured. --line on this page's ground is a 1.03:1
hairline: sampled from the render it draws exactly one pixel of
rgb(228,234,234) on rgb(233,237,241), which is present but not something a
reader perceives as a divider. It is kept for CONSISTENCY (every separator
in the feature list above uses the same token and reads the same way), not
because it is carrying the separation. Strengthening it is a token-level
decision affecting every surface on the site, not a fix to make here. */
.about__closing {
margin: clamp(var(--sp-8), 6vw, var(--sp-12)) 0 0;
padding-top: clamp(var(--sp-6), 4vw, var(--sp-8));
border-top: 1px solid var(--line);
font-size: clamp(1.0625rem, 2vw, 1.1875rem);
line-height: 1.65;
color: var(--text);
}
/* ── The valediction ─────────────────────────────────────────────────────── */
.about__valediction {
margin: clamp(var(--sp-6), 4vw, var(--sp-8)) 0 0;
color: var(--text);
}
.about__valediction-line {
display: block;
font-size: clamp(1.0625rem, 2vw, 1.1875rem); /* the closing paragraph's */
line-height: 1.65;
}
/* ⚠ --fs-h2, AND IT IS CHOSEN FOR WHERE IT SITS, not for being big. The name
has to clear body text and stay under the page's own heading at BOTH ends of
the clamp, and only one step on the scale does that:
closing paragraph 17 - 19 px (this page's prose)
--fs-h3 18.8 px too close to body to read as a step
--fs-h2 24 - 32 px <- here
.about__name (h1) 28 - 40 px the page's heading
At 390 that is 24 against the heading's 28, which is closer than it looks on
paper — so the WEIGHT separates them where the size nearly does not:
--fw-label (600) against the heading's --fw-display (800). A signature that
matched the masthead's weight would compete with it at exactly the width
where there is least room to.
⚠ SAME INK AS THE PROSE, DELIBERATELY. The accent was the obvious move and
is the wrong one twice over: FOUNDER already carries it eleven hundred
pixels above, so a second accent word makes the page look like it has two
labels; and accent-on-ground is exactly the pairing that measured 4.11:1 in
dark on this page and had to be fixed. The size and weight do the work, and
the name inherits prose ink that already measures 15.41 light / 16.32 dark. */
.about__signature {
display: block;
margin-top: var(--sp-2);
font-size: var(--fs-h2);
font-weight: var(--fw-label);
line-height: 1.15;
letter-spacing: -0.01em;
}
/* ── Narrow ──────────────────────────────────────────────────────────────── */
@media (max-width: 560px) {
.about {
width: min(var(--maxw-text), calc(100% - 2 * var(--sp-3)));
}
/* The portrait goes above the name rather than beside it: at 390 a 240px
photo plus a 2.5rem name in one row leaves the name about nine characters
of measure, which wraps "Grant Gleason" to three lines. */
.about__intro {
flex-direction: column;
align-items: flex-start;
gap: var(--sp-4);
}
.about__portrait { width: 180px; max-width: 60%; }
/* Term above description — the em dash's job in the source copy, done by
layout. Side by side at this width leaves the description too narrow to
read as a phrase. */
.about__item { grid-template-columns: 1fr; gap: var(--sp-1); }
}