/* ============================================================
holdfast base styles
layer 1 of the design system, v1.1.0
requires tokens.css loaded first
fonts, paste into on every page before the stylesheets:
this differs from the source file on purpose. the source
loads weight 600 for both faces but never uses it, and never
loads the true fraunces italic, so the browser fakes the
slant on numerals, the promise quote and the footer blurb.
this request drops the dead weight and loads the real italic
============================================================ */
/* ---- reset ---- */
*,
*::before,
*::after { box-sizing: border-box; }
* { margin: 0; }
html {
scroll-behavior: smooth; /* from source, reset under reduced motion below */
-webkit-text-size-adjust: 100%;
}
img, picture, svg, video {
display: block;
max-width: 100%;
}
input, button, textarea, select {
font: inherit;
color: inherit;
}
button {
background: none;
border: none;
padding: 0;
cursor: pointer;
}
p, h1, h2, h3, h4 { overflow-wrap: break-word; }
/* ---- document defaults ---- */
body {
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
font-weight: var(--fw-regular);
color: var(--text-ink);
background: var(--bg-white);
-webkit-font-smoothing: antialiased;
}
/* headings default to the light zone treatment with the generic
tracking. real components apply their per-role tokens, and
sections on navy or coral override color */
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: var(--fw-medium);
color: var(--text-navy);
letter-spacing: var(--ls-display);
}
h1 { letter-spacing: var(--ls-hero); }
a { color: inherit; }
/* ---- layout primitives ---- */
.container {
max-width: var(--container-max);
margin-inline: auto;
padding-inline: var(--container-pad-x);
}
.section { padding-block: var(--section-pad-y); }
.section-lg { padding-block: var(--section-pad-y-lg); }
/* ---- utilities ---- */
.tnum { font-variant-numeric: tabular-nums; } /* stat numbers, prices */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* ---- focus ----
safety net so anything focusable shows a visible ring.
ring value verified against source, kelp-bright at 50%.
components with their own focus treatment (nav underlines,
card borders) override this. on elements that also use the
hover shadow, combine them:
box-shadow: var(--focus-ring), var(--shadow-hover) */
:focus-visible {
outline: 2px solid transparent;
box-shadow: var(--focus-ring);
}
/* ---- selection. not in the source spec, drop if unwanted ---- */
::selection {
background: var(--kelp-bright);
color: var(--text-ink);
}
/* ---- motion ---- */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}