/* =====================================================================
Alta Vista Education Partners
Direction D: KINETIC
-----------------------------------------------------------------
Motion contract for this file:
.kin is on only when the visitor has NOT asked for reduced
motion. Every transform, transition, keyframe and canvas
animation on this page lives inside a .kin selector.
.ready is added by app.js once it has taken control. Anything that
starts hidden is hidden only under .kin.ready, so a failed or
blocked script can never leave the page blank.
.fallback is a 2.5s failsafe set in the head script.
Remove .kin and the page is a complete, legible, fully laid out
static document. That is the fallback, not a degraded copy of one.
===================================================================== */
/* ---------------------------------------------------------------- fonts */
@font-face {
font-family: Literata;
src: url(fonts/literata-latin-var.woff2) format('woff2');
font-weight: 200 900;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Instrument Sans";
src: url(fonts/instrumentsans-latin-var.woff2) format('woff2');
font-weight: 400 700;
font-style: normal;
font-display: swap;
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --------------------------------------------------------------- tokens */
:root {
/* Verified palette. Contrast maths in design-system.md 4.1. */
--gold-100:#F5EDE0; --gold-200:#F2E5CF; --gold-300:#DFC290;
--gold-500:#C8A46B; --gold-600:#997433; --gold-700:#6A4D1B; --gold-900:#4A3511;
--navy-100:#E5E9F0; --navy-200:#BDC9DB; --navy-400:#5E83BA;
--navy-600:#1B4583; --navy-700:#163A6B; --navy-800:#112C55;
--navy-900:#0C1E3A; --navy-950:#0A1B33;
--paper:#F7F4EE; --paper-2:#F2EFE9; --paper-3:#EAE5DB;
--ink:#1A2332; --ink-muted:#475466; --ink-faint:#60718A; --white:#fff;
--on-navy:#F7F4EE; --on-navy-muted:#A1AAB8; --on-navy-faint:#79869A;
--font-serif: Literata, "Source Serif 4", Charter, "Bitstream Charter",
"Iowan Old Style", Georgia, "Times New Roman", serif;
--font-sans: "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
/* Fluid scale, solved for 390px to 1440px. rem + vw, never vw alone. */
--t-display: clamp(2.25rem, 1.5238rem + 2.9762vw, 4.25rem);
--t-h2: clamp(1.625rem, 1.3rem + 1.333vw, 2.5rem);
--t-quote: clamp(1.5rem, 1.2214rem + 1.143vw, 2.25rem);
--t-lead: clamp(1.25rem, 1.1571rem + 0.381vw, 1.5rem);
--t-h3: clamp(1.1875rem, 1.1179rem + 0.286vw, 1.375rem);
--t-body: clamp(1.1875rem, 1.1643rem + 0.095vw, 1.25rem);
--t-small: .9375rem;
--t-label: .8125rem;
--t-micro: .75rem;
--measure: 62ch;
--gutter: clamp(1.25rem, 1rem + 2vw, 3.5rem);
--band: clamp(4rem, 3rem + 6vw, 9rem);
--wide: 76rem;
--ease: cubic-bezier(.16, 1, .3, 1);
--ease-io: cubic-bezier(.65, 0, .35, 1);
--mast-h: 56px;
}
/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: auto; }
html:focus-within { scroll-padding-top: calc(var(--mast-h) + 1rem); }
.kin { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--navy-950);
color: var(--ink);
font-family: var(--font-serif);
font-size: var(--t-body);
line-height: 1.55;
font-variation-settings: "opsz" 12;
font-synthesis-weight: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
h1, h2, h3, p, ol, ul, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
/* --------------------------------------------------------------- focus */
:focus-visible {
outline: 3px solid var(--gold-600);
outline-offset: 3px;
border-radius: 2px;
}
.sec--navy :focus-visible, .sec--deep :focus-visible,
.hero :focus-visible, .foot :focus-visible, .masthead :focus-visible {
outline-color: var(--gold-500);
}
.sr-only {
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;
}
.skip-link {
position: absolute; left: .5rem; top: -4rem; z-index: 200;
background: var(--gold-700); color: var(--white);
font-family: var(--font-sans); font-size: var(--t-small); font-weight: 600;
padding: .75rem 1.25rem; text-decoration: none;
}
.skip-link:focus { top: .5rem; }
/* ---------------------------------------------------------------- grain */
/* Generated texture, not a photograph of paper. feTurbulence, one tile. */
.grain {
position: fixed; inset: 0; z-index: 90; pointer-events: none;
opacity: .40;
background-image: url("data:image/svg+xml;utf8,\
");
mix-blend-mode: multiply;
}
/* -------------------------------------------------------- type roles */
/* Section markers, rebuilt 2026-09-18. They were 13px muted uppercase and read
as fine print, so the section you were entering was the least legible thing on
screen. The site's own language is a survey: contours, altitudes, tick marks.
So the marker now behaves like a survey station. The number is set large in
the serif and carries a hairline stem, the name sits beside it at a readable
size, and the rule runs out to the margin. Markup is unchanged. */
.label {
font-family: var(--font-sans);
font-size: clamp(.875rem, .82rem + .18vw, .9375rem);
font-weight: 600;
letter-spacing: .15em; text-transform: uppercase;
color: var(--gold-700);
display: flex; align-items: center; gap: 1rem;
margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.label::after {
content: ""; flex: 1; height: 1px; background: currentColor; opacity: .32;
transform-origin: left;
}
.label__n {
font-family: var(--font-serif);
font-size: clamp(2.125rem, 1.5rem + 2.3vw, 3.25rem);
font-weight: 400; line-height: .92;
letter-spacing: -.02em;
font-variant-numeric: tabular-nums;
color: var(--gold-600);
/* the stem: a survey station mark, and it also separates the two type sizes
cleanly so the big numeral does not crowd the name */
padding-right: 1rem;
border-right: 1px solid currentColor;
opacity: .92;
}
.label--onNavy { color: var(--gold-500); }
.label--onNavy .label__n { color: var(--gold-500); opacity: .8; }
.h2 {
font-family: var(--font-serif);
font-size: var(--t-h2); line-height: 1.14; font-weight: 500;
font-variation-settings: "opsz" 36;
letter-spacing: -.012em;
color: var(--navy-900);
max-width: 22ch; text-wrap: balance;
}
.h2--wide { max-width: 30ch; }
.h2--onNavy { color: var(--on-navy); }
.lead {
font-size: var(--t-lead); line-height: 1.45;
font-variation-settings: "opsz" 20;
max-width: 46ch;
}
.lead--onNavy { color: var(--on-navy); }
/* -------------------------------------------------------------- layout */
.sec { position: relative; }
.sec__in {
width: 100%; max-width: var(--wide); margin-inline: auto;
padding-inline: var(--gutter);
}
.sec--paper { background: var(--paper); padding-block: var(--band); }
.sec--paper2 { background: var(--paper-2); padding-block: var(--band); }
.sec--paper3 { background: var(--paper-3); padding-block: var(--band); }
.sec--navy { background: var(--navy-900); color: var(--on-navy); padding-block: var(--band); }
.sec--deep { background: var(--navy-950); color: var(--on-navy); padding-block: var(--band); }
/* The horizon. Sections do not butt against each other with a straight
seam. The paper rises into the navy the way ground rises into sky. */
.horizon {
position: absolute; left: 0; right: 0; bottom: 100%;
width: 100%; height: clamp(34px, 4.4vw, 70px);
pointer-events: none; z-index: 2;
}
.horizon--paper path { fill: var(--paper); }
.horizon--navy path { fill: var(--navy-900); }
.sec--paper2 > .horizon path { fill: var(--paper-2); }
/* ------------------------------------------------------------ masthead */
.masthead {
position: fixed; inset: 0 0 auto 0; z-index: 100;
height: var(--mast-h);
background: color-mix(in srgb, var(--navy-950) 88%, transparent);
-webkit-backdrop-filter: saturate(1.4) blur(10px);
backdrop-filter: saturate(1.4) blur(10px);
border-bottom: 1px solid rgba(200,164,107,.22);
/* 2026-09-18: the nav is PERMANENT. It used to sit at translate 0 -100% and
only drop in past 55% of the first screen, so anyone landing on the page saw
no navigation at all. For district administrators who want to scan rather
than scroll a cinematic page, that cost more than the clean hero was worth.
At the top the bar is transparent and carries only the links, because the
hero's own h1 already shows the brand lockup and showing both duplicates it.
Past the hero it solidifies and the lockup fades in. */
translate: 0 0;
}
.masthead:not(.is-on) {
background: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border-bottom-color: transparent;
}
.masthead:not(.is-on) .masthead__mark,
.masthead:not(.is-on) .masthead__where { opacity: 0; pointer-events: none; }
.kin .masthead { transition: background .45s var(--ease), border-color .45s var(--ease); }
.kin .masthead__mark, .kin .masthead__where { transition: opacity .45s var(--ease); }
html:not(.kin) .masthead, html:not(.js) .masthead { translate: 0 0; }
.masthead__in {
max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter);
height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.masthead__mark {
text-decoration: none; display: flex; align-items: baseline; gap: .5rem;
font-family: var(--font-serif); font-variation-settings: "opsz" 18;
color: var(--on-navy); font-size: 1rem; letter-spacing: -.01em;
}
.masthead__mark1 { font-weight: 600; }
.masthead__mark2 {
font-family: var(--font-sans); font-size: var(--t-label); font-weight: 500;
letter-spacing: .1em; text-transform: uppercase; color: var(--gold-500);
}
.masthead__where {
font-family: var(--font-sans); font-size: var(--t-label);
letter-spacing: .08em; color: var(--on-navy-muted);
}
.masthead__progress { position: absolute; inset: auto 0 -1px 0; height: 2px; }
.masthead__progressFill {
display: block; height: 100%; width: 100%; background: var(--gold-500);
transform: scaleX(var(--p, 0)); transform-origin: left;
}
/* ---------------------------------------------------------------- rail */
.rail { position: fixed; left: 0; top: 50%; translate: 0 -50%; z-index: 95; display: none; }
.rail__list { padding: 1rem .75rem; display: grid; gap: .55rem; }
.rail__list a {
display: grid; grid-template-columns: auto auto; align-items: center; gap: .6rem;
text-decoration: none; font-family: var(--font-sans);
font-size: var(--t-micro); letter-spacing: .1em; text-transform: uppercase;
padding: .18rem .2rem;
}
.rail__n {
width: 1.5rem; height: 2px; background: var(--gold-600);
font-size: 0; overflow: hidden; text-indent: -99em;
}
.kin .rail__n { transition: width .4s var(--ease), height .4s var(--ease); }
.rail__t { opacity: 0; translate: -6px 0; white-space: nowrap; }
.kin .rail__t { transition: opacity .35s var(--ease), translate .35s var(--ease); }
.rail__list a:hover .rail__t,
.rail__list a:focus-visible .rail__t { opacity: 1; translate: 0 0; }
.rail__list li.is-here a .rail__n { width: 3rem; height: 3px; }
/* The current-section label is revealed on hover or focus only. Showing it
permanently pushes type into the left margin of the content column at
1440, which is exactly where the reading measure starts. */
.rail:hover .rail__list li.is-here a .rail__t { opacity: 1; translate: 0 0; }
.rail--onDark a { color: var(--gold-500); }
.rail--onLight a { color: var(--gold-700); }
.rail--onDark .rail__t, .rail--onLight .rail__t { background: inherit; }
@media (min-width: 84rem) { .rail { display: block; } }
/* ---------------------------------------------------------------- hero */
.hero {
position: relative; isolation: isolate;
min-height: 100svh;
background: var(--navy-900);
color: var(--on-navy);
display: flex; flex-direction: column; justify-content: center;
padding-block: calc(var(--mast-h) + 1rem) clamp(4rem, 7vh, 5.5rem);
overflow: hidden;
}
/* Generative altitude field. Canvas, drawn in app.js. Under reduced motion
it draws exactly one frame and stops. */
.hero__field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero__veil {
position: absolute; inset: 0; z-index: -1; pointer-events: none;
background:
linear-gradient(100deg, rgba(10,27,51,.90) 0%, rgba(10,27,51,.66) 38%, rgba(10,27,51,.10) 72%),
linear-gradient(to bottom, rgba(10,27,51,.55) 0%, rgba(10,27,51,0) 30%, rgba(10,27,51,.55) 100%);
}
.hero__in {
width: 100%; max-width: var(--wide); margin-inline: auto;
padding-inline: var(--gutter);
display: grid; gap: clamp(2rem, 4vw, 3.5rem);
}
@media (min-width: 64rem) {
.hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 30%); align-items: center; }
}
.firm {
font-family: var(--font-serif); font-weight: 600;
font-size: clamp(1.0625rem, .95rem + .5vw, 1.375rem);
letter-spacing: .01em; line-height: 1.2;
display: flex; align-items: center; flex-wrap: wrap; gap: .7rem;
margin-bottom: clamp(1.25rem, 2.4vw, 2.25rem);
}
.firm__1 { color: var(--on-navy); }
.firm__2 {
font-family: var(--font-sans); font-weight: 500;
font-size: var(--t-label); letter-spacing: .18em; text-transform: uppercase;
color: var(--gold-500);
}
.firm__rule { width: clamp(1.5rem, 5vw, 3.5rem); height: 1px; background: var(--gold-600); }
/* --- kinetic typography ------------------------------------------------
Words ride up out of a clipped box. The display line also opens its
optical-size axis from 7 to 72 as it arrives, so the letterforms are
physically redrawn during the entrance rather than merely scaled. */
.display {
font-family: var(--font-serif); font-weight: 400;
font-size: var(--t-display); line-height: 1.04;
letter-spacing: -.022em;
font-variation-settings: "opsz" 72;
max-width: 17ch; text-wrap: balance;
}
.display__a, .display__b { display: block; }
.display__a { color: var(--on-navy-muted); }
.display__b { color: var(--gold-500); }
.display .w {
display: inline-block; overflow: hidden; vertical-align: baseline;
line-height: 1.18;
padding: .16em .05em .26em; margin: -.16em -.05em -.26em;
}
.display .w .k { display: inline-block; }
.display--sm { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.5rem); max-width: 16ch; /* was: color: var(--on-navy). That hardcoded cream and made #h-scope
invisible (1:1) on the paper section. Inherit the section colour instead. */
color: inherit; }
.firm .k { display: inline-block; }
.firm__1, .firm__2 {
display: inline-block; overflow: hidden;
padding: .18em .04em .3em; margin: -.18em -.04em -.3em;
}
.kin.ready .display .w .k,
.kin.ready .firm .k { translate: 0 110%; }
.kin.ready .display .w .k { rotate: x 34deg; }
.kin.ready .hero.is-on .display .w .k,
.kin.ready .hero.is-on .firm .k {
translate: 0 0; rotate: none;
transition: translate .95s var(--ease) calc(var(--d, 0) * 55ms),
rotate .95s var(--ease) calc(var(--d, 0) * 55ms);
}
.kin.ready .display { font-variation-settings: "opsz" 7; }
.kin.ready .hero.is-on .display {
font-variation-settings: "opsz" 72;
transition: font-variation-settings 1.5s var(--ease) .1s;
}
.kin.fallback .display .w .k, .kin.fallback .firm .k { translate: 0 0; rotate: none; }
.kin.fallback .display { font-variation-settings: "opsz" 72; }
.hero__sub {
margin-top: clamp(1.25rem, 2.2vw, 1.75rem);
font-size: var(--t-lead); line-height: 1.42;
font-variation-settings: "opsz" 20;
color: var(--on-navy); max-width: 42ch;
}
.hero__pos {
margin-top: clamp(1.1rem, 2vw, 1.6rem);
font-family: var(--font-sans); font-weight: 500;
font-size: var(--t-small); letter-spacing: .04em;
color: var(--gold-500); max-width: 40ch;
display: flex; align-items: center; gap: .9rem;
}
.hero__posRule { flex: 0 0 auto; width: 2.25rem; height: 1px; background: var(--gold-600); }
.hero__portrait { position: relative; }
.hero__portrait picture { display: block; position: relative; }
/* The frame is a fix, not an ornament: her hair is 1.14:1 on navy and her
turtleneck is 1.14:1 on paper, so the silhouette needs a hard boundary.
--gold-600 clears 3:1 on both grounds. */
.hero__portrait img {
width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 22%;
border: 1px solid var(--gold-600);
background: var(--navy-800);
}
.hero__portrait::before {
content: ""; position: absolute; inset: -10px -10px auto auto;
width: 46%; height: 1px; background: var(--gold-600); opacity: .55;
}
.hero__portrait figcaption {
margin-top: .9rem;
font-family: var(--font-sans); font-size: var(--t-label); font-weight: 500;
letter-spacing: .1em; text-transform: uppercase; color: var(--on-navy-muted);
}
@media (max-width: 63.99rem) {
.hero__portrait img { aspect-ratio: 16 / 11; object-position: 50% 20%; }
}
.kin.ready .hero__portrait img { clip-path: inset(0 0 100% 0); }
.kin.ready .hero.is-on .hero__portrait img {
clip-path: inset(0 0 0 0);
transition: clip-path 1.2s var(--ease) .45s;
}
.kin.fallback .hero__portrait img { clip-path: none; }
.hero__cue {
position: absolute; left: 50%; translate: -50% 0; bottom: clamp(1.75rem, 4vh, 3rem);
z-index: 3;
display: grid; justify-items: center; gap: .6rem;
text-decoration: none; color: var(--on-navy-muted);
font-family: var(--font-sans); font-size: var(--t-micro);
letter-spacing: .18em; text-transform: uppercase;
}
.hero__cueLine { width: 1px; height: 3rem; background: linear-gradient(var(--gold-600), transparent); }
.kin .hero__cueLine { animation: cue 2.4s var(--ease-io) infinite; }
@keyframes cue { 0%,100% { opacity:.35; scale: 1 .55; } 50% { opacity:1; scale: 1 1; } }
.hero__cue:hover, .hero__cue:focus-visible { color: var(--gold-500); }
/* Phone hero. Placed after the cue rules on purpose: these are overrides and
they have to win on source order. */
@media (max-width: 63.99rem) {
.hero { min-height: auto; padding-block: calc(var(--mast-h) + 1rem) 3rem; }
.hero__cue { position: static; translate: none; margin: 2.25rem auto 0; }
.hero__cueLine { height: 2rem; }
}
/* ------------------------------------------------------- reveal engine */
.kin.ready [data-reveal] { opacity: 0; translate: 0 22px; }
.kin.ready [data-reveal].is-in {
opacity: 1; translate: 0 0;
transition: opacity .8s var(--ease) calc(var(--d, 0) * 110ms),
translate .8s var(--ease) calc(var(--d, 0) * 110ms);
}
.kin.fallback [data-reveal] { opacity: 1; translate: 0 0; }
/* ------------------------------------------------------------ the work */
.work__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 60rem) {
.work__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: start; }
.work__grid .label { grid-column: 1 / -1; }
}
.work__body .lead { margin-top: 1.5rem; }
/* ---- the elevation block -------------------------------------------------
Reworked 2026-09-10. Same survey, given thickness. The fills that carry the
dimension are gradients declared in the SVG's own and applied as
presentation attributes, so CSS keeps only stroke, opacity and the media
overrides. Nothing here needs a filter, and nothing here needs script. */
.profile__svg { width: 100%; height: auto; overflow: hidden; padding-block-end: 2px; }
/* datums, read through the block the way they do on a section drawing */
.profile__grid line { stroke: var(--navy-400); stroke-width: 1; opacity: .16; }
/* the three visible faces */
.profile__cap { fill: var(--navy-900); opacity: .1; }
.profile__capEdge { fill: none; stroke: var(--navy-900); stroke-width: 1; opacity: .3; }
.profile__base { stroke: var(--gold-600); stroke-width: 1; opacity: .35; }
/* furrows along the depth axis. Clipped to the top surface, so each one runs
exactly from the back edge to the front edge and nowhere else. */
.profile__furrow line { stroke: var(--navy-900); stroke-width: 1; opacity: .13; }
/* front edge heavy, back edge light. That difference is the whole distance. */
.profile__line { fill: none; stroke: var(--navy-900); stroke-width: 2; }
.profile__line--back { stroke-width: 1.2; opacity: .34; }
/* the three altitudes, standing on the surface rather than printed on it */
.profile__st line { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 2 4; }
.profile__stShadow { fill: var(--navy-900); opacity: .16; }
.profile__stDot { fill: var(--gold-700); }
.profile__stHi { fill: var(--gold-300); opacity: .85; }
.profile__stRing { fill: none; stroke: var(--gold-600); stroke-width: 1.2; opacity: .5; }
.profile__st text {
font-family: var(--font-sans); font-size: 13px; font-weight: 600;
letter-spacing: .06em; fill: var(--ink-muted); text-anchor: middle;
}
/* one vantage point, widening into distance */
.profile__cone { fill: var(--gold-500); opacity: .13; }
.profile__sight { fill: none; stroke: var(--gold-600); stroke-width: 1.5; stroke-dasharray: 5 5; }
.profile__sight--2 { opacity: .5; }
.profile figcaption {
margin-top: 1.5rem;
font-family: var(--font-sans); font-size: var(--t-small); color: var(--ink-muted);
border-top: 1px solid rgba(153,116,51,.4); padding-top: .85rem;
}
.kin.ready .profile__line { stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.kin.ready .profile__sight { stroke-dashoffset: 340; stroke-dasharray: 340; }
.kin.ready .profile__st { opacity: 0; }
.kin.ready .profile.is-in .profile__line {
stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--ease-io) .1s;
}
.kin.ready .profile.is-in .profile__sight {
stroke-dasharray: 5 5; stroke-dashoffset: 0;
transition: stroke-dashoffset 1.2s var(--ease) 1.3s, stroke-dasharray 0s 1.3s;
}
.kin.ready .profile.is-in .profile__st {
opacity: 1; transition: opacity .6s var(--ease) calc(.7s + var(--i) * .2s);
}
/* The cone arrives with the sight lines it belongs to. Only the cone animates;
the block itself is painted from the first frame, so a script that never
runs still leaves a complete drawing. */
.kin.ready .profile__cone { opacity: 0; }
.kin.ready .profile.is-in .profile__cone {
opacity: .13; transition: opacity .9s var(--ease) 1.5s;
}
.kin.fallback .profile__line, .kin.fallback .profile__sight { stroke-dashoffset: 0; stroke-dasharray: 5 5; }
.kin.fallback .profile__line { stroke-dasharray: none; }
.kin.fallback .profile__st { opacity: 1; }
.kin.fallback .profile__cone { opacity: .13; }
/* --------------------------------------------------------- the method */
.method .h2 { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.apparatus {
max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter);
display: grid; gap: 2rem;
}
@media (min-width: 64rem) {
.apparatus { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(3rem, 5vw, 5rem); align-items: start; }
}
.stage { position: relative; }
.stage__frame {
position: relative;
border: 1px solid rgba(153,116,51,.34);
background: var(--paper);
aspect-ratio: 1 / 1;
max-height: 62vh;
}
@media (max-width: 63.99rem) {
.stage__frame { aspect-ratio: 4 / 3; max-height: 46svh; }
}
.panel {
position: absolute; inset: 0;
padding: clamp(1rem, 2.4vw, 1.75rem);
display: grid; grid-template-rows: auto 1fr; gap: .75rem;
}
.panel__svg { width: 100%; height: 100%; min-height: 0; overflow: visible; }
.panel__cap {
font-family: var(--font-sans); font-size: var(--t-label); font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700);
display: flex; gap: .6rem; align-items: baseline;
}
.panel__capN { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
/* Kinetic: the four panels share one sticky frame and cross-fade. */
.kin .stage { position: sticky; top: calc(var(--mast-h) + 1.25rem); }
.kin .panel { opacity: 0; visibility: hidden; translate: 0 14px; }
/* Asymmetric: the outgoing panel clears in 280ms, the incoming one arrives over
480ms after a 140ms hold. Two dense line drawings on the same ground read as
mud if they cross-fade for the same half second in both directions. */
.kin .panel { transition: opacity .28s var(--ease-io), translate .28s var(--ease-io), visibility 0s .28s; }
.kin .apparatus[data-active="1"] .panel[data-panel="1"],
.kin .apparatus[data-active="2"] .panel[data-panel="2"],
.kin .apparatus[data-active="3"] .panel[data-panel="3"],
.kin .apparatus[data-active="4"] .panel[data-panel="4"] {
opacity: 1; visibility: visible; translate: 0 0;
transition: opacity .48s var(--ease) .14s, translate .48s var(--ease) .14s, visibility 0s 0s;
}
/* Static: all four panels are laid out as a real 2 x 2 plate, captioned,
nothing hidden, nothing depending on scroll position. */
html:not(.kin) .stage__frame,
html:not(.js) .stage__frame {
aspect-ratio: auto; max-height: none; border: 0; background: transparent;
display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
html:not(.kin) .panel, html:not(.js) .panel {
position: static; border: 1px solid rgba(153,116,51,.34); background: var(--paper);
min-height: 320px;
}
/* The coverage apparatus carries controls and a readout as well as a chart,
so in the static plate it takes the full width rather than a quarter of it. */
html:not(.kin) .panel--match, html:not(.js) .panel--match {
grid-column: 1 / -1; min-height: 430px;
}
.beats { display: grid; gap: 1.5rem; }
.kin .beats { gap: 0; }
.beat { max-width: 44ch; }
.kin .beat { min-height: 78svh; display: flex; flex-direction: column; justify-content: center; padding-block: 2rem; }
.kin .beat { opacity: .72; transition: opacity .5s var(--ease); }
.kin .beat.is-live { opacity: 1; }
.kin .beat { position: relative; padding-left: 1.5rem; }
.kin .beat::before {
content: ""; position: absolute; left: 0; top: 2rem; bottom: 2rem; width: 3px;
background: var(--gold-600); scale: 1 0; transform-origin: top;
transition: scale .55s var(--ease);
}
.kin .beat.is-live::before { scale: 1 1; }
.kin .beat.is-live .beat__n { color: var(--gold-700); }
.kin .beat:not(.is-live) .beat__n { color: var(--ink-muted); }
.beat__h {
font-family: var(--font-serif); font-size: var(--t-h3); font-weight: 600;
font-variation-settings: "opsz" 24; color: var(--navy-900);
display: flex; align-items: baseline; gap: .8rem; margin-bottom: .8rem;
}
.beat__n {
font-family: var(--font-sans); font-size: var(--t-label); font-weight: 600;
letter-spacing: .12em; color: var(--gold-700); font-variant-numeric: tabular-nums;
}
.beat p { max-width: 42ch; }
/* panel 1: the contour plan */
.ring circle { fill: none; stroke: var(--navy-900); stroke-width: 1.25; opacity: .34; }
.ring text {
font-family: var(--font-sans); font-size: 12px; font-weight: 600;
letter-spacing: .08em; fill: var(--ink-muted); text-anchor: middle;
}
.core { fill: var(--gold-700); }
.ticks line { stroke: var(--gold-600); stroke-width: 3; stroke-linecap: round; }
.kin.ready .ring { opacity: 0; }
.kin.ready .apparatus[data-active="1"] .ring,
.kin.ready .panel.is-seen .ring,
.kin.fallback .ring { opacity: 1; transition: opacity .7s var(--ease) calc(var(--i) * .16s); }
.kin.ready .ticks line { opacity: 0; }
.kin.ready .apparatus[data-active="1"] .ticks line,
.kin.ready .panel.is-seen .ticks line,
.kin.fallback .ticks line { opacity: 1; transition: opacity .4s linear calc(.5s + var(--i) * .05s); }
/* panel 2: the match apparatus, the signature interaction */
.panel--match { grid-template-rows: auto 1fr auto auto; }
.match { display: contents; }
.match__frame {
font-family: var(--font-sans); font-size: var(--t-micro); line-height: 1.4;
color: var(--ink-muted); grid-row: 4;
border-top: 1px solid rgba(26,35,50,.14); padding-top: .6rem; margin-top: .1rem;
}
/* min-height keeps the absolutely positioned needs from overflowing onto
the controls when this panel is laid out in the short static plate. */
.match__chart { position: relative; grid-row: 2; min-height: 170px; padding-top: 1.6rem; }
.match__needs {
position: absolute; inset: 1.6rem 0 0 0;
display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(.4rem, 1.5vw, 1rem);
align-items: end;
}
.match__need { display: grid; grid-template-rows: 1fr auto; gap: .5rem; height: 100%; }
.match__bar { display: block; align-self: end; height: var(--h); position: relative; }
.match__bar i {
position: absolute; inset: auto 0 0 0; height: 100%;
background: var(--navy-800); display: block; transform-origin: bottom;
}
.kin.ready .match__bar i { scale: 1 0; }
.kin.ready .apparatus[data-active="2"] .match__bar i,
.kin.ready .panel.is-seen .match__bar i,
.kin.fallback .match__bar i { scale: 1 1; transition: scale .7s var(--ease); }
.match__need-l {
font-family: var(--font-sans); font-size: 11px; line-height: 1.28;
color: var(--ink-muted); letter-spacing: .01em;
}
.match__need.is-met .match__bar i { background: var(--gold-700); }
.kin .match__need.is-met .match__bar i { transition: background .45s var(--ease); }
/* the coverage envelope */
.match__env { display: none; }
.match__chart.is-set .match__env { display: block; }
.match__env {
position: absolute; top: 0; bottom: 0; left: 0;
width: var(--w, 0px); translate: var(--x, 0px) 0;
border: 2px solid var(--gold-600);
border-radius: 4px;
background: rgba(200,164,107,.13);
pointer-events: none;
}
.kin .match__env { transition: width .55s var(--ease), translate .55s var(--ease); }
.match__envLabel {
position: absolute; top: -.15rem; left: 50%; translate: -50% -100%;
font-family: var(--font-sans); font-size: 11px; font-weight: 700;
letter-spacing: .12em; text-transform: uppercase; color: var(--gold-700);
white-space: nowrap;
}
.match__ctl { grid-row: 3; display: flex; gap: .4rem; flex-wrap: wrap; margin-top: .9rem; }
.match__btn {
flex: 1 1 auto; min-height: 44px;
background: transparent; border: 1px solid rgba(26,35,50,.26);
color: var(--ink); font-family: var(--font-sans); font-size: var(--t-micro);
font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
padding: .5rem .35rem; cursor: pointer; border-radius: 2px;
}
.kin .match__btn { transition: background .25s, border-color .25s, color .25s; }
.match__btn:hover { border-color: var(--gold-600); }
.match__btn[aria-pressed="true"] { background: var(--navy-900); border-color: var(--navy-900); color: var(--paper); }
.match__out {
grid-row: 3; align-self: end; font-family: var(--font-sans);
font-size: var(--t-small); color: var(--ink-muted); margin-top: .55rem;
}
.match__out strong { color: var(--navy-900); font-weight: 700; }
.panel--match { grid-template-rows: auto 1fr auto auto auto; }
.match__ctl { grid-row: 3; } .match__out { grid-row: 4; } .match__frame { grid-row: 5; }
/* panel 3: recommend */
.fan path { fill: none; stroke: var(--navy-900); stroke-width: 1.5; opacity: .3; }
.fan__chosen { fill: none; stroke: var(--gold-700); stroke-width: 3; }
.fan__origin { fill: var(--navy-900); }
.seats rect { fill: none; stroke: var(--navy-900); stroke-width: 1.25; opacity: .38; }
.seats g[style*="--i:4"] rect { fill: var(--gold-700); stroke: var(--gold-700); opacity: 1; }
.fan__lab, .doc__hd {
font-family: var(--font-sans); font-size: 12px; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase; fill: var(--ink-muted);
}
.fan__lab--r { text-anchor: end; }
.kin.ready .fan path { stroke-dasharray: 420; stroke-dashoffset: 420; }
.kin.ready .fan__chosen { stroke-dasharray: 420; stroke-dashoffset: 420; }
.kin.ready .seats g { opacity: 0; }
.kin.ready .apparatus[data-active="3"] .fan path,
.kin.ready .panel.is-seen .fan path,
.kin.fallback .fan path { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-io) calc(var(--i) * .14s); }
.kin.ready .apparatus[data-active="3"] .fan__chosen,
.kin.ready .panel.is-seen .fan__chosen,
.kin.fallback .fan__chosen { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease-io) .75s; }
.kin.ready .apparatus[data-active="3"] .seats g,
.kin.ready .panel.is-seen .seats g,
.kin.fallback .seats g { opacity: 1; transition: opacity .35s linear calc(var(--i) * .07s); }
/* panel 4: write */
.doc { fill: var(--white); stroke: var(--navy-900); stroke-width: 1.25; }
.doc__field rect { fill: rgba(200,164,107,.16); stroke: var(--gold-600); stroke-width: 1.25; }
.doc__field text {
font-family: var(--font-sans); font-size: 10px; font-weight: 700;
letter-spacing: .1em; fill: var(--gold-700);
}
.doc__field line { stroke: var(--gold-700); stroke-width: 1.25; }
.doc__lines line { stroke: var(--navy-900); stroke-width: 3; opacity: .16; stroke-linecap: round; }
.kin.ready .doc__lines line { transform: scaleX(0); transform-origin: left; transform-box: fill-box; }
.kin.ready .apparatus[data-active="4"] .doc__lines line,
.kin.ready .panel.is-seen .doc__lines line,
.kin.fallback .doc__lines line { transform: scaleX(1); transition: transform .4s var(--ease) calc(.4s + var(--i) * .07s); }
.kin.ready .doc__field { opacity: 0; }
.kin.ready .apparatus[data-active="4"] .doc__field,
.kin.ready .panel.is-seen .doc__field,
.kin.fallback .doc__field { opacity: 1; transition: opacity .6s var(--ease) 1.15s; }
/* pull quote */
.pull {
margin-top: clamp(3rem, 6vw, 5rem);
border-top: 1px solid rgba(153,116,51,.4);
border-bottom: 1px solid rgba(153,116,51,.4);
padding-block: clamp(2rem, 4vw, 3rem);
}
.pull p {
font-size: var(--t-quote); line-height: 1.26; font-weight: 400;
font-variation-settings: "opsz" 42; color: var(--navy-900);
max-width: 30ch; text-wrap: balance;
}
/* ------------------------------------------------- who she works with */
.who__list {
display: grid; gap: clamp(1rem, 2vw, 1.5rem);
margin-block: clamp(2rem, 4vw, 3rem);
counter-reset: who;
}
@media (min-width: 52rem) { .who__list { grid-template-columns: repeat(3, 1fr); } }
.who__list li { border-top: 1px solid rgba(200,164,107,.34); padding-top: 1rem; }
.who__list span {
font-family: var(--font-serif); font-size: var(--t-h3); font-weight: 500;
font-variation-settings: "opsz" 24; color: var(--on-navy);
}
.who__cap {
font-family: var(--font-sans); font-size: var(--t-lead); line-height: 1.45;
color: var(--gold-500); max-width: 34ch;
}
/* ----------------------------------------------------- career and geo */
.career { margin-top: clamp(2.5rem, 5vw, 4rem); }
.career__lanes { display: grid; gap: .35rem; margin-bottom: 1.25rem; }
.career__lane {
font-family: var(--font-sans); font-size: var(--t-micro); font-weight: 600;
letter-spacing: .1em; text-transform: uppercase;
display: flex; align-items: center; gap: .7rem;
}
.career__lane::after { content: ""; flex: 1; }
.career__lane--thin { color: var(--ink-faint); }
.career__lane--thin::after { height: 1px; background: currentColor; opacity: .5; }
.career__lane--thick { color: var(--gold-700); }
.career__lane--thick::after { height: 5px; background: currentColor; opacity: .85; }
.career__list { display: grid; gap: 0; }
.career__item {
display: grid; gap: .1rem .9rem;
grid-template-columns: 5.5rem minmax(0, 1fr);
align-items: start;
padding-block: .85rem;
border-top: 1px solid rgba(26,35,50,.12);
position: relative;
}
.career__item:last-child { border-bottom: 1px solid rgba(26,35,50,.12); }
.career__yr {
font-family: var(--font-sans); font-size: var(--t-small); font-weight: 600;
letter-spacing: .02em; color: var(--gold-700); font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.career__dash { padding-inline: .1em; }
.career__role { font-size: var(--t-small); line-height: 1.5; color: var(--ink); }
.career__role b { font-weight: 600; color: var(--navy-900); }
/* The bar under each role is a real time axis: --s and --e are years since
2003 on a 23 year span. */
.career__item::after {
content: ""; grid-column: 1 / -1; height: 5px; margin-top: .55rem;
background: var(--gold-700);
margin-left: calc(var(--s) / 23 * 100%);
width: calc((var(--e) - var(--s)) / 23 * 100%);
transform-origin: left;
}
.career__item--now::after { background: var(--navy-900); }
.kin.ready .career__item::after { transform: scaleX(0); }
.kin.ready .career.is-in .career__item::after,
.kin.fallback .career__item::after {
transform: scaleX(1); transition: transform .7s var(--ease) calc(var(--s) * .026s);
}
.career__axis {
position: relative; height: 1.5rem; margin-top: .5rem;
border-top: 1px solid rgba(26,35,50,.18);
}
.career__axis span {
position: absolute; top: .35rem; left: calc(var(--p) * 100%);
translate: -50% 0;
font-family: var(--font-sans); font-size: 11px; letter-spacing: .06em;
color: var(--ink-faint); font-variant-numeric: tabular-nums;
}
.career__axis span:first-child { translate: 0 0; }
.career__axis span:last-child { translate: -100% 0; }
.career figcaption {
margin-top: 1.5rem; font-family: var(--font-sans);
font-size: var(--t-small); color: var(--ink-muted);
}
.bg__close {
margin-top: clamp(3rem, 6vw, 5rem);
display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center;
}
@media (min-width: 60rem) { .bg__close { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); } }
.bg__closeText .lead { font-size: var(--t-quote); line-height: 1.26; font-variation-settings: "opsz" 42; max-width: 26ch; color: var(--navy-900); }
.geo__svg { width: 100%; height: auto; overflow: visible; }
.geo__state { fill: rgba(12,30,58,.05); stroke: var(--navy-900); stroke-width: 4; opacity: .55; }
.geo__pins circle { fill: var(--gold-700); }
.geo__pins text {
font-family: var(--font-sans); font-size: 30px; font-weight: 600;
letter-spacing: .04em; fill: var(--ink-muted);
}
.geo__off path { fill: none; stroke: var(--ink-faint); stroke-width: 3; stroke-dasharray: 10 10; }
.geo__off text { font-family: var(--font-sans); font-size: 28px; fill: var(--ink-faint); letter-spacing: .04em; }
.kin.ready .geo__pins g { opacity: 0; scale: .5; transform-box: fill-box; transform-origin: 0 0; }
.kin.ready .geo.is-in .geo__pins g,
.kin.fallback .geo__pins g { opacity: 1; scale: 1; transition: opacity .5s var(--ease) calc(.3s + var(--i) * .16s), scale .5s var(--ease) calc(.3s + var(--i) * .16s); }
.geo figcaption {
margin-top: 1rem; font-family: var(--font-sans);
font-size: var(--t-small); color: var(--ink-muted);
border-top: 1px solid rgba(153,116,51,.4); padding-top: .8rem;
}
/* --------------------------------------------------------- credentials */
.certs { margin-block: clamp(2.5rem, 5vw, 4rem); }
.certs__list { display: grid; gap: 1.5rem; }
.cert { display: grid; gap: .45rem; }
.cert__name {
font-family: var(--font-serif); font-size: var(--t-h3); font-weight: 500;
font-variation-settings: "opsz" 24; color: var(--on-navy);
}
/* Track spans 2022 to 2032. --a and --b are fractions of that span. */
.cert__track { display: block; height: 8px; background: rgba(200,164,107,.16); position: relative; }
.cert__bar {
position: absolute; top: 0; bottom: 0;
left: calc(var(--a) * 100%);
right: calc(100% - var(--b) * 100%);
background: var(--gold-500); transform-origin: left;
}
.kin.ready .cert__bar { transform: scaleX(0); }
.kin.ready .certs.is-in .cert__bar,
.kin.fallback .cert__bar { transform: scaleX(1); transition: transform .8s var(--ease) calc(var(--i, 0) * .12s); }
.cert__dates {
font-family: var(--font-sans); font-size: var(--t-small);
color: var(--on-navy-muted); letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
.certs__axis { position: relative; height: 2rem; margin-top: 1.25rem; border-top: 1px solid rgba(200,164,107,.3); }
.certs__axis span {
position: absolute; top: .4rem; left: calc(var(--p) * 100%); translate: -50% 0;
font-family: var(--font-sans); font-size: 11px; letter-spacing: .06em;
color: var(--on-navy-muted); font-variant-numeric: tabular-nums;
}
.certs__axis span:first-of-type { translate: 0 0; }
.certs__now {
color: var(--gold-500) !important; font-weight: 700; text-transform: uppercase;
}
.certs__now::before {
content: ""; position: absolute; left: 50%; top: -1.1rem; width: 1px; height: 1rem;
background: var(--gold-500);
}
.certs figcaption {
margin-top: 1.25rem; font-family: var(--font-sans);
font-size: var(--t-small); color: var(--on-navy-muted);
}
.cred__degrees { display: grid; gap: 1.25rem; max-width: 52ch; }
.cred__degrees p { color: var(--on-navy); }
.cred__invite a { color: var(--gold-500); text-underline-offset: .22em; text-decoration-thickness: 1px; }
.cred__invite a:hover { text-decoration-thickness: 2px; }
/* -------------------------------------------------------------- record */
.record__frame {
font-family: var(--font-sans); font-size: var(--t-small); line-height: 1.55;
color: var(--ink-muted); max-width: 56ch;
border-left: 3px solid var(--gold-600); padding-left: 1.25rem;
margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.record { display: grid; gap: 0; }
.record__item {
padding-block: clamp(1.5rem, 3vw, 2.25rem);
border-top: 1px solid rgba(26,35,50,.14);
display: grid; gap: .75rem;
}
.record__item:last-child { border-bottom: 1px solid rgba(26,35,50,.14); }
.record__h {
font-family: var(--font-serif); font-size: var(--t-h3); font-weight: 600;
line-height: 1.28; letter-spacing: -.004em;
font-variation-settings: "opsz" 24; color: var(--navy-900); max-width: 44ch;
}
.record__item p { max-width: 56ch; font-size: var(--t-small); line-height: 1.6; }
.record__src a { color: var(--navy-600); text-underline-offset: .2em; }
/* ------------------------------------------------------------- engage */
.engage { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 60rem) { .engage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.engage__text .h2 { margin-top: 0; }
.engage__text .lead { margin-top: 1.25rem; }
.packet { display: grid; gap: .6rem; }
.packet__doc {
display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1rem; align-items: center;
background: var(--paper); border: 1px solid rgba(26,35,50,.14);
border-left: 3px solid var(--gold-600);
padding: 1rem 1.15rem;
}
.packet__n {
font-family: var(--font-sans); font-size: var(--t-small); font-weight: 700;
letter-spacing: .06em; color: var(--gold-700); font-variant-numeric: tabular-nums;
}
.packet__t { font-size: var(--t-small); line-height: 1.45; }
.kin.ready .packet__doc { opacity: 0; translate: 0 16px; rotate: -.6deg; }
.kin.ready .packet.is-in .packet__doc,
.kin.fallback .packet__doc {
opacity: 1; translate: 0 0; rotate: none;
transition: opacity .5s var(--ease) calc(var(--i) * .13s),
translate .6s var(--ease) calc(var(--i) * .13s),
rotate .6s var(--ease) calc(var(--i) * .13s);
}
/* --------------------------------------------------------------- about */
.about__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
@media (min-width: 60rem) { .about__grid { grid-template-columns: 320px minmax(0, 1fr); } }
.about__portrait img {
width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
border: 1px solid var(--gold-600);
}
@media (max-width: 59.99rem) { .about__portrait { max-width: 15rem; } }
.about__body { margin-top: 1.25rem; max-width: 46ch; color: var(--on-navy); }
.kin.ready .about__portrait img { clip-path: inset(0 100% 0 0); }
.kin.ready .about__portrait.is-in img { clip-path: inset(0 0 0 0); transition: clip-path 1s var(--ease) .1s; }
.kin.fallback .about__portrait img { clip-path: none; }
/* ------------------------------------------------------------- contact */
.contact { padding-block: clamp(5rem, 9vw, 10rem); }
.contact__lead { margin-top: clamp(1.5rem, 3vw, 2.25rem); max-width: 46ch; }
.contact__list {
margin-top: clamp(2rem, 4vw, 3rem);
display: grid; gap: .4rem;
font-family: var(--font-sans); font-size: var(--t-lead);
}
.contact__list a { color: var(--gold-500); text-underline-offset: .24em; text-decoration-thickness: 1px; }
.contact__list a:hover { text-decoration-thickness: 2px; }
.contact__list span { color: var(--on-navy-muted); }
/* -------------------------------------------------------------- footer */
.foot { background: var(--navy-950); color: var(--on-navy-muted); padding-block: 3rem 4rem; border-top: 1px solid rgba(200,164,107,.2); }
.foot__in { display: grid; gap: .5rem; }
.foot__name { font-family: var(--font-serif); font-weight: 600; color: var(--on-navy); font-size: var(--t-small); }
.foot__meta { font-family: var(--font-sans); font-size: var(--t-small); }
.foot__meta a { color: var(--gold-500); text-underline-offset: .2em; }
.foot__sep { padding-inline: .5rem; }
/* ================================================================
REDUCED MOTION
The .kin class is simply never added, so every selector above that
begins .kin is inert. These rules cover the few places where the
static page needs a positive instruction rather than an absence.
================================================================ */
@media (prefers-reduced-motion: reduce) {
html, .kin { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
.hero { min-height: auto; padding-block: calc(var(--mast-h) + 3rem) 5rem; }
.hero__cue { position: static; translate: none; margin-top: 3rem; }
.hero__cueLine { display: none; }
}
/* ================================================================
FORCED COLORS (Windows High Contrast on a district machine)
================================================================ */
@media (forced-colors: active) {
.grain { display: none; }
.stage__frame, .panel, .packet__doc, .hero__portrait img, .about__portrait img { border: 1px solid CanvasText; }
.match__env { border-color: Highlight; background: transparent; }
.match__btn[aria-pressed="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
.cert__bar, .career__item::after, .match__bar i { forced-color-adjust: none; background: CanvasText; }
.masthead { border-bottom: 1px solid CanvasText; }
/* High contrast repaints every fill as CanvasText, which would turn the
elevation block's soft gradient faces into one solid slab. Drop the
shading and let the line art carry it, which is what it was drawn to do. */
.profile__glow, .profile__haze, .profile__top, .profile__fill,
.profile__cap, .profile__furrow, .profile__cone, .profile__stShadow,
.profile__stHi { display: none; }
.profile__line--back { opacity: 1; }
.kin .panel { opacity: 1; visibility: visible; position: static; }
.kin .stage { position: static; }
.kin .stage__frame { aspect-ratio: auto; max-height: none; display: grid; gap: 1.5rem; }
.kin .beat { opacity: 1; min-height: auto; }
}
/* ================================================================
PRINT. It has to survive being screenshotted or PDF'd into a
board packet, so print gets the static plate, in full.
================================================================ */
@media print {
.grain, .rail, .masthead, .hero__cue, .hero__field, .hero__veil { display: none !important; }
body { background: #fff; color: #000; font-size: 11pt; }
.hero, .sec--navy, .sec--deep, .foot { background: #fff !important; color: #000 !important; }
.display__a, .display__b, .label--onNavy, .h2--onNavy, .lead--onNavy,
.cert__name, .certs__axis span, .certs figcaption, .who__list span, .who__cap,
.about__body, .contact__list a, .contact__list span, .foot__name, .foot__meta,
.masthead__where, .hero__sub, .hero__pos, .cred__degrees p { color: #000 !important; }
.hero { min-height: auto; padding-block: 0 2rem; }
.stage { position: static !important; }
.stage__frame { aspect-ratio: auto !important; max-height: none !important; display: grid !important; gap: 1rem; }
.panel { position: static !important; opacity: 1 !important; visibility: visible !important; page-break-inside: avoid; }
.beat { min-height: auto !important; opacity: 1 !important; page-break-inside: avoid; }
.sec { page-break-inside: auto; }
/* Aerial haze is a screen effect. On a board-packet print it just reads as
grey smudge behind the drawing, so the block prints without it. */
.profile__glow, .profile__haze { display: none !important; }
[data-reveal] { opacity: 1 !important; translate: none !important; }
a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}
/* ================================================================
PHONE REFINEMENTS
SVG label sizes are in viewBox units, so a narrow render scales
them down. Every diagram label below is re-solved at 390 so that
nothing lands under roughly 11px on screen.
================================================================ */
@media (max-width: 59.99rem) {
.masthead__where { display: none; }
.masthead__mark { gap: .45rem; }
.masthead__mark2 { font-size: var(--t-micro); letter-spacing: .08em; }
/* 23px, not 24: at 390 the svg renders 342 CSS px wide for a 720 viewBox,
so 23 lands at 10.9px on screen, still on the ~11px floor this file sets,
and it buys the margin the longest label needs. */
.profile__st text { font-size: 23px; }
.profile__st line { stroke-dasharray: 3 5; }
.ring text { font-size: 18px; }
.fan__lab, .doc__hd { font-size: 18px; }
.doc__field text { font-size: 14px; }
.ticks line { stroke-width: 4; }
.geo__pins text { font-size: 44px; }
.geo__off text { font-size: 40px; }
.geo__state { stroke-width: 6; }
.geo__off path { stroke-width: 4; }
.kin .beat { min-height: 66svh; padding-block: 1.25rem; }
.kin .beat::before { top: 1rem; bottom: 1rem; }
}
/* At the very narrow end the three-up coverage chart needs its labels to
stop fighting for room. */
@media (max-width: 26rem) {
.match__need-l { font-size: 10px; letter-spacing: 0; }
.match__btn { font-size: 10px; letter-spacing: .04em; padding-inline: .2rem; }
}
/* ================================================================
THE APPARATUS ON A PHONE
A sticky stage plus scrolling beats needs vertical room a
390 x 780 viewport does not have: the stage would take 55% of the
screen and leave the beat about 90px. So on a phone the pattern is
abandoned rather than squeezed. Each beat is followed by its own
diagram, in flow, at a size the diagram can actually be read at,
and the drawing animations trigger on the panel entering view
(.is-seen, set in app.js) instead of on scroll position inside a
sticky section.
================================================================ */
@media (max-width: 63.99rem) {
.kin .apparatus { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.kin .stage, .kin .stage__frame, .kin .beats { display: contents; }
.kin .panel {
position: static; opacity: 1; visibility: visible; translate: none;
transition: none;
border: 1px solid rgba(153,116,51,.34); background: var(--paper);
margin-bottom: 3rem; aspect-ratio: 1 / 1; width: 100%;
}
.kin .panel--match { aspect-ratio: 3 / 4; }
.kin .beat {
min-height: auto; padding-block: 0 1.4rem; padding-left: 1.25rem;
opacity: 1;
}
.kin .beat::before { top: .35rem; bottom: 1.8rem; scale: 1 1; }
.kin .beat .beat__n { color: var(--gold-700); }
.beat[data-beat="1"] { grid-row: 1; } .panel[data-panel="1"] { grid-row: 2; }
.beat[data-beat="2"] { grid-row: 3; } .panel[data-panel="2"] { grid-row: 4; }
.beat[data-beat="3"] { grid-row: 5; } .panel[data-panel="3"] { grid-row: 6; }
.beat[data-beat="4"] { grid-row: 7; } .panel[data-panel="4"] { grid-row: 8; }
}
/* ---- third voice: mono for figures, labels and metadata ----
Added 2026-08-27. All four earlier directions shipped Public Sans, which is the
US Web Design System's own font, so a page selling to school districts read as the
federal template. Licensed-feeling type plus a mono for data is what separates
authored from assembled. Refs: RAND, Ford Foundation, Rest of World. */
@font-face {
font-family: "IBM Plex Mono";
src: url(fonts/plexmono-latin-400.woff2) format('woff2');
font-weight: 400 600;
font-style: normal;
font-display: swap;
}
.eyebrow, .sec-num, .kicker, .label, .fig-label, .axis-label, .tick-label,
.meta, .caption-meta, .stat-value, .stat-label, .num, .figure-note,
figcaption .src, .src, .credential-key, [class*="-label"], [class*="-num"] {
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
/* ================= THE INVENTORY FORM =================
Added 2026-08-28. The intake is the method: a visitor answers the same three
discovery questions she opens with, so she receives a completed inventory
rather than "hi, saw your site". Posts to n8n. ==================== */
.inv{margin:56px 0 0;max-width:760px}
.inv__eyebrow{margin:0 0 6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.17em;
text-transform:uppercase;font-weight:600;color:var(--gold-500,#C8A46B)}
.inv__intro{margin:0 0 28px;max-width:56ch;color:var(--on-navy-muted,#A1AAB8);font-size:17px;line-height:1.6}
.inv__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px 20px;margin:0 0 8px}
.fld{display:block;margin:0 0 18px}
.fld--wide{grid-column:1/-1}
.fld__k{display:block;font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;
text-transform:uppercase;font-weight:600;color:var(--gold-500,#C8A46B);margin:0 0 7px}
.fld__k b{color:#F7F4EE;margin-right:8px;font-weight:600}
.fld__k em{font-style:normal;opacity:.62;letter-spacing:.08em}
.fld__hint{display:block;font-size:14.5px;line-height:1.5;color:var(--on-navy-muted,#A1AAB8);margin:0 0 9px;max-width:52ch}
.fld__i{display:block;width:100%;min-height:48px;padding:12px 14px;
font:400 17px/1.5 inherit;color:#F7F4EE;background:rgba(247,244,238,.05);
border:1px solid rgba(200,164,107,.34);border-radius:8px;
transition:border-color .25s ease,background .25s ease}
.fld__i::placeholder{color:#6E7C8E}
.fld__i:hover{border-color:rgba(200,164,107,.55)}
.fld__i:focus{outline:none;border-color:#C8A46B;background:rgba(247,244,238,.09);
box-shadow:0 0 0 3px rgba(200,164,107,.22)}
.fld__i--ta{resize:vertical;min-height:92px;font-family:inherit}
.fld__err{display:block;margin:7px 0 0;font-size:14px;color:#F0B7A6}
.fld__i[aria-invalid="true"]{border-color:#E08B72}
.inv__qs{list-style:none;counter-reset:none;padding:0;margin:24px 0 0;
border-top:1px solid rgba(200,164,107,.22);padding-top:26px}
.inv__foot{display:flex;flex-wrap:wrap;align-items:center;gap:16px 22px;margin:26px 0 0}
.inv__btn{position:relative;display:inline-flex;align-items:center;gap:10px;
min-height:52px;padding:14px 30px;cursor:pointer;font:600 16px/1 inherit;
color:#0C1E3A;background:#C8A46B;border:1px solid #C8A46B;border-radius:8px;
transition:background .25s ease,transform .2s ease}
.inv__btn:hover{background:#DFC290}
.inv__btn:active{transform:translateY(1px)}
.inv__btn[disabled]{opacity:.6;cursor:progress}
.inv__spin{display:none;width:15px;height:15px;border:2px solid rgba(12,30,58,.3);
border-top-color:#0C1E3A;border-radius:50%}
.inv.is-sending .inv__spin{display:block;animation:inv-spin .7s linear infinite}
@keyframes inv-spin{to{transform:rotate(360deg)}}
.inv__note{margin:0;font-size:14.5px;color:var(--on-navy-muted,#A1AAB8);max-width:38ch}
.inv__status{margin:20px 0 0;font-size:16px;line-height:1.55;min-height:1.5em}
.inv__status.is-ok{color:#C8A46B}
.inv__status.is-err{color:#F0B7A6}
.inv.is-done .inv__grid,.inv.is-done .inv__qs,.inv.is-done .inv__foot,
.inv.is-done .fld--wide{display:none}
@media (prefers-reduced-motion:reduce){
.inv__btn{transition:none}.inv.is-sending .inv__spin{animation-duration:1.4s}
}
@media print{ .inv{display:none} }
/* ---- SITE NAVIGATION -----------------------------------------------------
Rebuilt 2026-09-10. The 2026-08-28 compact nav had two faults and both are
fixed here.
1. `@media (min-width:84rem){ .mnav{display:none} }` handed navigation over
to the section rail at 1344px and up. On a 1440 laptop that meant the
masthead carried no menu at all, only the faint rail, which is exactly
what the client reported. The nav is now present at every width and the
rail is demoted to what it always actually was: a position indicator.
2. Below roughly 570px the row overflowed the right edge of the masthead.
body{overflow-x:hidden} swallowed the overflow silently, so Record and
Contact were not merely cramped, they were cut off and untappable. Below
48rem the same list is now a panel behind a Menu button instead.
Same hairline language as the rest of D: mono, uppercase, .13em, gold on
navy, a 1px rule rather than a button. Contact is the one emphasised item
and it carries a standing rule rather than a box, because D has no boxes. */
.mnav{ display:flex; align-items:center; margin-left:auto }
.mnav__list{
display:flex; align-items:center; list-style:none; margin:0; padding:0;
gap:clamp(.85rem,1.9vw,1.7rem);
}
.mnav__list a{
position:relative; display:inline-flex; align-items:center; min-height:44px;
padding:2px 0; text-decoration:none; white-space:nowrap;
font-family:var(--font-mono); font-size:clamp(10.5px,1.15vw,11.5px);
letter-spacing:.13em; text-transform:uppercase; font-weight:600;
color:var(--gold-500); opacity:.85;
}
.kin .mnav__list a{ transition:opacity .25s ease, color .25s ease }
.mnav__list a::after{
content:""; position:absolute; left:0; right:0; bottom:9px; height:1px;
background:currentColor; opacity:0;
}
.kin .mnav__list a::after{ transition:opacity .25s ease }
.mnav__list a:hover,.mnav__list a:focus-visible{ opacity:1 }
.mnav__list a:hover::after,.mnav__list a:focus-visible::after{ opacity:.65 }
/* Contact: the one action in the bar. A standing hairline, not a button. */
.mnav__list a.mnav__cta{ color:var(--gold-300); opacity:1 }
.mnav__list a.mnav__cta::after{ opacity:.45 }
/* Whichever section owns the middle of the viewport. Set in app.js, the same
reading the rail already uses, so the two never disagree. */
.mnav__list a[aria-current]{ color:var(--gold-300); opacity:1 }
.mnav__list a[aria-current]::after{ opacity:.9 }
.masthead--onLight .mnav__list a{ color:var(--gold-700) }
/* ---- the Menu button, below 48rem only ---- */
.mnav__toggle{
display:none; align-items:center; gap:.6rem;
min-height:44px; padding:0 .1rem; margin:0;
background:none; border:0; cursor:pointer;
font-family:var(--font-mono); font-size:11px; letter-spacing:.13em;
text-transform:uppercase; font-weight:600; color:var(--gold-500);
}
.mnav__bars{ position:relative; display:block; width:20px; height:2px; background:currentColor }
.mnav__bars::before,.mnav__bars::after{
content:""; position:absolute; left:0; width:20px; height:2px; background:currentColor;
}
.mnav__bars::before{ top:-6px }
.mnav__bars::after{ top:6px }
.kin .mnav__bars,.kin .mnav__bars::before,.kin .mnav__bars::after{
transition:translate .25s var(--ease), rotate .25s var(--ease), background-color .2s ease;
}
.mnav.is-open .mnav__bars{ background:transparent }
.mnav.is-open .mnav__bars::before{ translate:0 6px; rotate:45deg }
.mnav.is-open .mnav__bars::after{ translate:0 -6px; rotate:-45deg }
@media (max-width:47.99rem){
.mnav__toggle{ display:inline-flex }
/* The masthead sets a containing block (translate + backdrop-filter), so a
fixed panel inside it rides with the masthead instead of stranding itself
at the top of the viewport while the masthead is still hidden. */
.mnav__panel{
display:none;
position:fixed; top:var(--mast-h); left:0; right:0;
/* Fully opaque, deliberately. A translucent panel nested inside the
masthead's own backdrop-filter layer let page text read through it at
390, and a menu is not a place for the page to show through anyway.
Opaque also drops one compositing layer on a phone. */
background:var(--navy-950);
border-bottom:1px solid rgba(200,164,107,.28);
padding:.15rem var(--gutter) .9rem;
max-height:calc(100svh - var(--mast-h)); overflow-y:auto;
}
.mnav.is-open .mnav__panel{ display:block }
.mnav__list{ display:block }
.mnav__list li + li{ border-top:1px solid rgba(200,164,107,.16) }
.mnav__list a{
display:flex; width:100%; min-height:52px; opacity:1;
font-size:12px; letter-spacing:.14em;
}
.mnav__list a::after{ display:none }
}
/* the where-line is the first thing to go when space runs out */
@media (max-width:34rem){ .masthead__where{display:none} }
@media print{ .mnav{display:none} }
/* ---- SCOPE: her six areas, added 2026-08-28 --------------------------------
Her own document set out four service lines across six areas. The earlier
build showed only grant writing, which narrowed her positioning without her
agreement. This shows the breadth and routes to the full catalogue. */
.scope__grid{list-style:none;padding:0;margin:clamp(32px,5vw,52px) 0 0;
display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:1px;background:var(--paper-3,#EAE5DB);border:1px solid var(--paper-3,#EAE5DB)}
.scope__i{display:grid;gap:7px;padding:24px 22px;background:var(--paper,#F7F4EE)}
.scope__i--lead{background:var(--gold-100,#F5EDE0)}
.scope__n{font-family:var(--font-mono);font-size:11px;letter-spacing:.15em;
font-weight:600;color:var(--gold-700,#6A4D1B)}
.scope__t{font-family:var(--font-serif);font-size:clamp(19px,2.3vw,23px);line-height:1.22;
font-weight:600;color:var(--navy-900,#0C1E3A);text-decoration:none;
text-underline-offset:4px;text-decoration-thickness:1px}
.scope__t:hover,.scope__t:focus-visible{text-decoration:underline;color:var(--navy-700,#163A6B)}
.scope__d{font-size:16px;line-height:1.5;color:var(--ink-muted,#475466)}
.scope__more{margin:clamp(28px,4vw,40px) 0 0}
.scope__link{display:inline-flex;align-items:center;gap:10px;min-height:48px;
font-family:var(--font-mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
font-weight:600;color:var(--gold-700,#6A4D1B);text-decoration:none;
border-bottom:1px solid var(--gold-600,#997433);padding:6px 0}
.scope__link:hover{color:var(--navy-900,#0C1E3A);border-color:var(--navy-900,#0C1E3A)}
@media print{
.scope__grid{display:block!important;border:0}
.scope__i{padding:8pt 0;border-bottom:1pt solid #ccc;page-break-inside:avoid}
.scope__i--lead{background:#fff!important}
}
/* Grace's supplied branding, September 2026. The image stays complete and
unmodified; portrait photography remains in the About section. */
.hero__tagline {
margin: -.25rem 0 clamp(1.5rem, 2.8vw, 2.5rem);
max-width: 29ch;
font-family: var(--font-serif);
font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem);
line-height: 1.45;
color: var(--gold-300);
}
.hero__brand { width: 100%; max-width: 29rem; justify-self: center; }
.hero__brand img {
display: block; width: 100%; height: auto;
aspect-ratio: auto; object-fit: contain; object-position: center;
/* This figure reuses .hero__portrait, which paints a navy plate and a gold
frame because it was written for a PHOTOGRAPH. A logo needs neither. */
border: 0; background: transparent;
}
.hero__brand::before { content: none; }
/* .hero__brand figcaption removed 2026-09-18: it repeated "People Possibilities
Progress", which the logo artwork already carries. The phrase is still in the
img alt text, so screen readers and crawlers keep it. */
.contact__tagline {
margin-bottom: 1.5rem; max-width: 28ch;
font-family: var(--font-serif);
font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem);
line-height: 1.4; color: var(--gold-300);
}
@media (min-width: 64rem) {
.hero__in { grid-template-columns: minmax(0, 1fr) minmax(0, 36%); }
}
@media (max-width: 63.99rem) {
.hero__brand { margin-block: .5rem 1.5rem; }
.hero__brand img { aspect-ratio: auto; object-position: center; }
}
/* Grace's real mark in the masthead. Added 2026-09-10 alongside the vector trace of
the logo she asked for by email on 2026-09-08. The wordmark stays live text so it
scales and stays selectable; the mark carries the art. */
.masthead__mark { display: flex; align-items: center; gap: .6rem; }
.masthead__logo { flex: none; width: 34px; height: 34px; display: block; }
.masthead__wordmark { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 47.99rem) {
.masthead__logo { width: 28px; height: 28px; }
.masthead__mark { gap: .5rem; }
}
/* Local September 11 candidate: supplied vector branding and email preparation. */
@font-face { font-family: "IBM Plex Mono"; src: url(fonts/plexmono-latin-400.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
.hero__brand img { padding: 1rem; }
.about__portrait > img { display: block; width: 100%; height: auto; }
.inv__draft { margin-top: 1.5rem; }
.inv__draft[hidden] { display: none; }
.inv__email { display: inline-block; margin-bottom: 1.25rem; padding: .8rem 1.1rem; background: var(--gold-300); color: var(--navy-950); font-weight: 600; border-radius: .25rem; }
.inv__copy { margin-top: .75rem; padding: .65rem 1rem; background: transparent; border: 1px solid var(--gold-300); color: var(--gold-300); font: inherit; cursor: pointer; }
.inv__draft textarea { width: 100%; }
.fld__err[hidden] { display: none; }
/* ------------------------------------------------------------ 2026-09-18 fixes
Measured on the served page, not guessed.
1. 147 text elements rendered below 16px at 390px. The whole Record section,
which carries her strongest proof, was 15px on a phone. Body copy on a
phone gets 16px minimum.
2. Her phone and email were 18.5 to 24.5px tall as tap targets against a
44px standard. Someone tapping her number on a phone was fighting the page. */
@media (max-width: 47.99rem) {
.record__item p,
.record__src,
.foot__meta,
.inv__note { font-size: 1rem; line-height: 1.6; }
.match__frame { font-size: .875rem; line-height: 1.5; }
}
.contact__list a,
.foot__meta a {
display: inline-block;
padding-block: .55rem;
min-height: 44px;
box-sizing: border-box;
}
@media (min-width: 48rem) {
.contact__list a, .foot__meta a { padding-block: .25rem; min-height: 0; }
}
/* ---- inventory diagram: isometric altitude stack (replaces flat contour rings)
"Alta Vista" means the high view, and the mark is three peaks. The diagram now
says the same thing the name and the logo already say: three levels, seen from
above, narrowing toward where the organisation is going. */
.alt__plane ellipse { stroke: var(--navy-900); stroke-width: 1.15; opacity: .55; }
.alt__plane text { fill: var(--ink-muted); }
.alt__plane--top text { fill: var(--gold-700); }
.alt__faces path { stroke: var(--navy-900); stroke-width: .9; stroke-opacity: .22; }
.kin.ready .alt__faces { opacity: 0; }
.kin.ready .apparatus[data-active="1"] .alt__faces,
.kin.ready .panel.is-seen .alt__faces,
.kin.fallback .alt__faces { opacity: 1; transition: opacity .8s var(--ease) .25s; }
/* ---- proof strip -------------------------------------------------------
Sits between the hero and the first section. The page is long and earns
attention slowly, which is right for someone who is already interested and
wrong for a district administrator deciding in ten seconds whether to keep
reading. Three figures, each restated with sources further down. */
.proof {
background: var(--paper);
padding-block: clamp(2.5rem, 5vw, 4rem);
border-bottom: 1px solid rgba(12,30,58,.10);
}
.proof__in {
/* same container as every other section, so the strip lines up with them */
width: 100%; max-width: var(--wide); margin-inline: auto;
padding-inline: var(--gutter);
display: grid;
gap: clamp(1.75rem, 3.5vw, 3rem);
grid-template-columns: 1fr;
}
@media (min-width: 48rem) {
.proof__in { grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
.proof__item + .proof__item {
padding-left: clamp(2rem, 4vw, 3.5rem);
border-left: 1px solid rgba(195,154,50,.38);
}
}
.proof__fig {
font-family: var(--font-serif);
font-size: clamp(1.75rem, 1.2rem + 2.1vw, 2.5rem);
font-weight: 400; line-height: 1;
letter-spacing: -.02em;
color: var(--navy-900);
font-variant-numeric: tabular-nums;
margin: 0 0 .6rem;
}
.proof__unit {
font-family: var(--font-sans);
font-size: .9375rem; font-weight: 600;
letter-spacing: .12em; text-transform: uppercase;
color: var(--gold-700);
margin-left: .45rem;
vertical-align: baseline;
}
.proof__say {
margin: 0;
font-family: var(--font-sans);
font-size: 1rem; line-height: 1.55;
color: var(--ink-muted);
max-width: 34ch;
}
.proof__say a { color: var(--navy-700); text-underline-offset: .2em; }
/* ---- the four steps, in one row ---------------------------------------
Replaces the sticky stage. The old layout gave each of four beats
min-height 78svh, so this one section cost over 300vh of scrolling to
deliver four short paragraphs and three decorative drawings. */
.steps {
list-style: none; margin: 0; padding: 0;
width: 100%; max-width: var(--wide); margin-inline: auto;
padding-inline: var(--gutter);
display: grid; grid-template-columns: 1fr;
gap: clamp(2rem, 4vw, 2.75rem);
}
@media (min-width: 56rem) {
.steps { grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
.step + .step { padding-left: clamp(1.5rem, 3vw, 2.5rem); border-left: 1px solid rgba(195,154,50,.34); }
}
.step__n {
font-family: var(--font-serif); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
line-height: 1; color: var(--gold-600); margin: 0 0 .5rem;
font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.step__h {
font-family: var(--font-serif); font-size: 1.25rem; font-weight: 500;
color: var(--navy-900); margin: 0 0 .6rem; letter-spacing: -.01em;
}
.step__p {
margin: 0; font-family: var(--font-sans);
font-size: 1rem; line-height: 1.55; color: var(--ink-muted); max-width: 40ch;
}
/* the one demonstration that earns its space */
.demo {
width: 100%; max-width: var(--wide); margin-inline: auto;
padding-inline: var(--gutter);
margin-top: clamp(3rem, 6vw, 5rem);
}
.demo__cap {
font-family: var(--font-sans); font-size: .875rem; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--gold-700);
display: flex; align-items: baseline; gap: .6rem; margin: 0 0 1.25rem;
}
.demo__capN { color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.demo .panel--match {
max-width: 44rem;
opacity: 1 !important; visibility: visible !important; translate: none !important;
position: static !important;
}
/* the sticky stage is gone; neutralise what drove its height */
.kin .stage { position: static; }
.kin .beat { min-height: 0; }
/* The apparatus used to be a two column grid: sticky stage on the left, the
scrolling beats on the right. That split is gone, so it must be a single
column or the steps row and the demo sit side by side and both get crushed. */
.apparatus,
.kin .apparatus { display: block; grid-template-columns: none; }
/* minmax(0,1fr) not 1fr: plain 1fr is minmax(auto,1fr), so a long word in one
step can widen its column and starve the others. */
@media (min-width: 56rem) {
.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ---- expandable detail ------------------------------------------------
Grace on 2026-09-18: the job history and the certificates are "a lot",
she wants them kept "but collapsed". Native on purpose: the
content stays in the DOM, so crawlers and AI still read her whole record
even while a visitor sees a single line. A JS accordion would not. */
.more { margin-top: clamp(1.5rem, 3vw, 2rem); }
.more__sum {
cursor: pointer; list-style: none;
display: inline-flex; align-items: center; gap: .75rem;
font-family: var(--font-sans); font-size: .9375rem; font-weight: 600;
letter-spacing: .06em; text-transform: uppercase;
color: var(--gold-700);
padding: .85rem 1.15rem;
border: 1px solid rgba(195,154,50,.5);
border-radius: .2rem;
min-height: 44px;
transition: background .25s var(--ease), border-color .25s var(--ease);
}
.more__sum::-webkit-details-marker { display: none; }
.more__sum::after {
content: ""; width: .5rem; height: .5rem;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
rotate: 45deg; translate: 0 -2px;
transition: rotate .25s var(--ease);
}
.more[open] .more__sum::after { rotate: -135deg; translate: 0 2px; }
.more__sum:hover { background: rgba(195,154,50,.09); border-color: rgba(195,154,50,.8); }
.more__sum:focus-visible { outline: 2px solid var(--gold-600); outline-offset: 3px; }
.more__body { margin-top: clamp(1.75rem, 3.5vw, 2.5rem); }
/* on navy the control needs the lighter gold */
.sec--navy .more__sum, .sec--deep .more__sum { color: var(--gold-500); border-color: rgba(200,164,107,.5); }
.sec--navy .more__sum:hover, .sec--deep .more__sum:hover { background: rgba(200,164,107,.12); }
/* the reveal engine hides [data-reveal] until seen; inside a closed
it never gets seen, so it would stay invisible after opening. */
.more[open] [data-reveal] { opacity: 1 !important; translate: none !important; }
/* ---- "What she does" moved onto navy 2026-09-18 ------------------------
Grace: "that navy really makes those boxes stand out, whereas the other
boxes are on the white and it doesn't stand out as much." */
/* The grid draws its dividers with a 1px gap over its OWN background, which is
the light --paper-3. Translucent cards over that stayed light, so cream card
titles went cream-on-cream. Both the grid and the cards have to be repainted,
and the cards must be SOLID, not translucent. Same failure as the invisible
h2 earlier: recolouring a section does not recolour what sits inside it. */
.sec--navy.scope .scope__grid { background: rgba(200,164,107,.30); border-color: rgba(200,164,107,.30); }
.sec--navy.scope .scope__i { background: #112C55; }
.sec--navy.scope .scope__i--lead { background: #16386B; }
.sec--navy.scope .scope__i:hover { background: #16386B; }
.sec--navy.scope .scope__i--lead:hover { background: #1B4583; }
.sec--navy.scope .scope__t { color: var(--on-navy); }
.sec--navy.scope .scope__d { color: var(--on-navy-muted, #A1AAB8); }
.sec--navy.scope .scope__n { color: var(--gold-500); }
.sec--navy.scope .scope__link { color: var(--gold-500); }
.sec--navy.scope .lead { color: var(--on-navy-muted, #A1AAB8); }
/* ---- footer ------------------------------------------------------------ */
.foot { background: var(--navy-950); color: var(--on-navy); padding-block: clamp(3rem, 6vw, 4.5rem) 0; }
.foot__in {
display: grid; gap: clamp(2.25rem, 4vw, 3rem);
grid-template-columns: 1fr;
padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
@media (min-width: 48rem) {
.foot__in { grid-template-columns: 1.4fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 4rem); }
}
.foot__logo { display: block; width: 132px; height: auto; margin-bottom: 1rem; }
.foot__tag {
margin: 0; font-family: var(--font-serif); font-style: italic;
font-size: 1rem; color: var(--gold-500); max-width: 26ch;
}
.foot__h {
margin: 0 0 1rem; font-family: var(--font-sans);
font-size: .8125rem; font-weight: 600; letter-spacing: .14em;
text-transform: uppercase; color: var(--gold-600);
}
.foot__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.foot__nav a, .foot__addr a, .foot__addr span {
display: inline-block; padding-block: .45rem;
font-family: var(--font-sans); font-size: 1rem; line-height: 1.5;
color: var(--on-navy); text-decoration: none;
}
.foot__nav a:hover, .foot__addr a:hover { color: var(--gold-500); text-decoration: underline; text-underline-offset: .25em; }
.foot__addr { font-style: normal; display: grid; gap: .1rem; }
.foot__addr span { color: var(--on-navy-muted, #A1AAB8); }
.foot__bar {
border-top: 1px solid rgba(200,164,107,.22);
padding-block: 1.5rem 2rem;
display: flex; flex-wrap: wrap; gap: 1rem 2rem;
align-items: center; justify-content: space-between;
}
.foot__legal { margin: 0; font-family: var(--font-sans); font-size: .875rem; color: var(--on-navy-muted, #A1AAB8); }
.foot__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.75rem; }
.foot__links a {
display: inline-block; padding-block: .5rem; min-height: 44px;
font-family: var(--font-sans); font-size: .875rem;
color: var(--on-navy-muted, #A1AAB8); text-decoration: none;
}
.foot__links a:hover { color: var(--gold-500); text-decoration: underline; text-underline-offset: .25em; }
/* ---- legal pages ------------------------------------------------------ */
.legal__main { padding-top: calc(var(--mast-h) + clamp(3rem, 6vw, 5rem)); }
.legal__h {
font-family: var(--font-serif); font-size: 1.375rem; font-weight: 500;
color: var(--navy-900); margin: clamp(2rem, 4vw, 2.75rem) 0 .65rem;
}
.legal p { max-width: 64ch; font-family: var(--font-sans); font-size: 1.0625rem; line-height: 1.65; color: var(--ink); }
.legal a { color: var(--navy-700); text-underline-offset: .2em; }
/* ---- record, as a ledger ----------------------------------------------
Both Grace and Shafen called the record "a lot" on 2026-09-18. It was
eight stacked paragraphs. A record of money raised should read like a
record: the figure first, the detail beside it, sources only where they
exist. Moved onto deep navy because, as she put it, the navy makes the
numbers stand out where cream does not. */
.ledger { margin-top: clamp(2rem, 4vw, 3rem); }
.ledger__h {
font-family: var(--font-sans); font-size: .8125rem; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--gold-600);
margin: clamp(2.5rem, 5vw, 3.5rem) 0 1.25rem; padding-bottom: .65rem;
border-bottom: 1px solid rgba(200,164,107,.28);
}
.ledger__h:first-child { margin-top: 0; }
.ledger__list { list-style: none; margin: 0; padding: 0; }
.ledger__row {
display: grid; grid-template-columns: 1fr; gap: .35rem;
padding-block: clamp(1.1rem, 2.2vw, 1.5rem);
border-bottom: 1px solid rgba(255,255,255,.08);
}
@media (min-width: 44rem) {
.ledger__row { grid-template-columns: minmax(9.5rem, 13rem) 1fr; gap: clamp(1.25rem, 3vw, 2.5rem); align-items: baseline; }
}
.ledger__fig {
font-family: var(--font-serif); font-variant-numeric: tabular-nums;
font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem); line-height: 1.05;
color: var(--gold-500); letter-spacing: -.02em;
}
.ledger__row--lead .ledger__fig { font-size: clamp(1.875rem, 1.2rem + 2.4vw, 2.75rem); color: var(--gold-300); }
.ledger__fig--sm { font-size: clamp(1.125rem, 1rem + .6vw, 1.375rem); color: var(--on-navy-muted, #A1AAB8); }
.ledger__body { display: grid; gap: .3rem; }
.ledger__what { font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.35; color: var(--on-navy); }
.ledger__who { font-family: var(--font-sans); font-size: 1rem; line-height: 1.5; color: var(--on-navy-muted, #A1AAB8); }
.ledger__src { font-family: var(--font-sans); font-size: .9375rem; line-height: 1.55; color: var(--on-navy-muted, #A1AAB8); margin-top: .35rem; max-width: 62ch; }
.ledger__src a, .ledger__who a { color: var(--gold-500); text-underline-offset: .2em; }
.ledger__dash { padding-inline: .1em; }
.ledger__press {
margin: clamp(2rem, 4vw, 2.75rem) 0 0;
font-family: var(--font-sans); font-size: 1rem; line-height: 1.6;
color: var(--on-navy-muted, #A1AAB8); max-width: 62ch;
}
.ledger__press a { color: var(--gold-500); text-underline-offset: .2em; }
/* the record frame paragraph sits on navy now */
.sec--deep .record__frame { color: var(--on-navy-muted, #A1AAB8); }
/* form success state */
.inv__sent { border-left: 3px solid var(--gold-500); padding: .25rem 0 .25rem 1.25rem; max-width: 52ch; }
.inv__sentH { margin: 0 0 .6rem; font-family: var(--font-serif); font-size: 1.375rem; color: var(--on-navy); }
.inv__sentP { margin: 0; font-family: var(--font-sans); font-size: 1rem; line-height: 1.6; color: var(--on-navy-muted, #A1AAB8); }
.inv__sentP a { color: var(--gold-500); text-underline-offset: .2em; }