/* ===========================================================================
Petti Group — shared stylesheet for all four pages.
Thin lines do the structural work. Charter sets the prose; monospace sets
every label, so the page reads like a drawing rather than a brochure.
=========================================================================== */
/* Colours are taken from Sam's current site: the pale mint background, the
sage link colour, and the rule colour used for its
s. The greys are
pulled toward the same hue so nothing reads as muddy against the mint. */
:root {
--paper: #e7f3ef; /* her body background */
--ink: #16211e; /* near-black with a green bias */
--muted: #4f6a61; /* secondary text — 5.2:1 on the mint */
--line: #b7c8c2; /* the rule colour from her current site */
--line-soft: #cfdfd9; /* quieter divisions inside a block */
--accent: #448d76; /* her link colour */
--serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
--mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
body {
font-family: var(--serif);
font-size: 17px;
line-height: 1.6;
color: var(--ink);
background: var(--paper);
max-width: 54rem;
margin: 0 auto;
padding: 1.5rem 1.5rem 3rem;
}
a { color: var(--ink); text-decoration-color: var(--line); text-underline-offset: 2px; }
a:hover { color: var(--accent); text-decoration-color: var(--accent); }
img { max-width: 100%; display: block; }
p { margin: 0 0 1rem; }
/* --- Label type: metadata is set in mono (the nav is Charter small caps) -- */
.pub-year, .tool-name, footer {
font-family: var(--mono);
letter-spacing: 0.06em;
}
/* --- Top bar: mark and logotype left, outlined nav flush right ------------ */
.bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
flex-wrap: wrap;
padding-bottom: 1.15rem;
border-bottom: 1px solid var(--ink);
}
/* The badge's alt text is the accessible name for the home link. */
.brand { display: flex; align-items: center; text-decoration: none; }
/* The logotype is an