/* Spectrum Impact. The spectrum, carried through the site.
   Round 10 (client call, 27 Oct 2026): "we are not using the spectrum enough, everything is black and white."
   The logo's eight colors now light the whole site, one at a time:
   - Every section takes one stop of the logo gradient, in page order (js/spectrum.js writes data-hue), so a
     page scrolls through the spectrum from blue to green. The stop colors that section's serif words, counts,
     rules and hover lines. Solid color only, never gradient text.
   - Each stop has two inks: a bright one for the black sections and a deep one for the white, both at 5:1 or
     better against their ground (checked 27 Oct 2026).
   - Photographs are in color. Where motion is on they arrive in grey and take their color as they come into view.
   - The get in touch band at the foot of every page stands in a slow glow of all eight colors. */

:root {
  --s0d: #7FA3E8; --s1d: #A68BE0; --s2d: #D07AC4; --s3d: #F45C93; --s4d: #F2836F; --s5d: #F0A85A; --s6d: #EBD34A; --s7d: #B9DB4E;
  --s0l: #2F55A0; --s1l: #5E3F9A; --s2l: #8A2F80; --s3l: #C41A5C; --s4l: #BF4433; --s5l: #A8590F; --s6l: #806B00; --s7l: #4F7A12;
  --s0: #4B70B5; --s1: #795EA6; --s2: #A14D98; --s3: #ED2F77; --s4: #EB695F; --s5: #E99D4B; --s6: #E8D036; --s7: #B5D53C;
}

/* One hue per section. --acc is the ink for text on that section's ground, --acc-raw the logo color itself
   for rules, dots and glows. */
[data-hue="0"] { --acc-d: var(--s0d); --acc-l: var(--s0l); --acc-raw: var(--s0); }
[data-hue="1"] { --acc-d: var(--s1d); --acc-l: var(--s1l); --acc-raw: var(--s1); }
[data-hue="2"] { --acc-d: var(--s2d); --acc-l: var(--s2l); --acc-raw: var(--s2); }
[data-hue="3"] { --acc-d: var(--s3d); --acc-l: var(--s3l); --acc-raw: var(--s3); }
[data-hue="4"] { --acc-d: var(--s4d); --acc-l: var(--s4l); --acc-raw: var(--s4); }
[data-hue="5"] { --acc-d: var(--s5d); --acc-l: var(--s5l); --acc-raw: var(--s5); }
[data-hue="6"] { --acc-d: var(--s6d); --acc-l: var(--s6l); --acc-raw: var(--s6); }
[data-hue="7"] { --acc-d: var(--s7d); --acc-l: var(--s7l); --acc-raw: var(--s7); }
[data-hue][data-tone="dark"], [data-tone="dark"] [data-hue] { --acc: var(--acc-d); }
[data-hue][data-tone="light"], [data-tone="light"] [data-hue] { --acc: var(--acc-l); }

/* The serif word in every heading is the section's color. */
[data-hue] :is(h1, h2, h3, .statement-text, .pull-t, .purpose-q, .fam-go-ns, .door-t, .scale-name, .itri-name, .init-lede, .thesis-lede) em,
[data-hue] .val-ink { color: var(--acc); transition: color 0.6s linear; }
[data-hue] sup, [data-hue] .row-split b { color: var(--acc); }
[data-hue] .link-arrow { background-image: linear-gradient(var(--acc-raw), var(--acc-raw)); }
[data-hue] .link-arrow::after, [data-hue] .row-go::after, [data-hue] .tk-all::after { color: var(--acc); }
[data-hue] .row::after, [data-hue] .fam-go::after { background: var(--acc-raw); }
[data-hue] .facts span, [data-hue] .tk-meta { color: var(--fg3); }
/* Kickers and small mono labels take the ink too, so color shows up in the quiet parts as well as the loud. */
[data-hue] :is(.init-k, .init-n, .fam-go-k, .fp-k, .tm-role, .purpose-cap, .pg-meta b) { color: var(--acc); }
/* Each section opens on a hairline of its own color. */
main > section[data-hue] { position: relative; }
main > section[data-hue]:not(.hero):not(.ticker):not(.doors)::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 2; pointer-events: none;
  background: var(--acc-raw); transform: scaleX(var(--rule, 1)); transform-origin: left;
}
html.js-motion main > section[data-hue]:not(.hero):not(.ticker):not(.doors)::before { transition: transform 1.4s var(--ease); }
html.js-motion main > section[data-hue]:not(.hero):not(.ticker):not(.doors):not(.sp-in)::before { --rule: 0; }
::selection { background: var(--acc-raw, #ED2F77); color: #000; }

/* The values on the team page: each word its own color, in spectrum order. */
.vals .val:nth-child(1) .val-ink { color: var(--s0d); }
.vals .val:nth-child(2) .val-ink { color: var(--s2d); }
.vals .val:nth-child(3) .val-ink { color: var(--s3d); }
.vals .val:nth-child(4) .val-ink { color: var(--s5d); }
.vals .val:nth-child(5) .val-ink { color: var(--s7d); }

/* The theme rows on the home page: Climate and Others, each word in its own end of the spectrum. */
.row[data-filter-theme="climate"] .row-word { color: var(--s7d); }
.row[data-filter-theme="others"] .row-word { color: var(--s3d); }
.row-split { display: flex; flex-wrap: wrap; gap: 6px 22px; font: 400 0.8125rem/1.4 var(--num); color: var(--fg2); }
.row-split b { font-weight: 500; margin-left: 0.35em; }
@media (min-width: 900px) { .row-split { grid-column: 2; } }

/* ---------------------------------------------------------------- hero */

/* The logo stands in the middle of the first screen, with the family office and the line under it. Once it
   scrolls away the small logo in the bar takes its place (js/spectrum.js). */
.hero-center { align-items: center; text-align: center; gap: clamp(14px, 2.2vh, 28px); padding-top: clamp(28px, 7vh, 96px); }
.hero-mark { width: min(78vw, 30rem); color: var(--on-dark); transform-origin: 50% 0; will-change: transform, opacity; }
.hero-mark .hero-logo { width: 100%; height: auto; }
.hero-office { font: 400 0.8125rem/1.4 var(--num); letter-spacing: 0.02em; color: var(--on-dark-2); text-wrap: balance; }
.hero-center h1 { font-size: clamp(2.2rem, 6.4vw, 4.75rem); letter-spacing: -0.035em; line-height: 1; max-width: 14em; text-wrap: balance; }
.hero-center h1 .ln { padding-right: 0; }
.hero-center h1 em { color: var(--s3d); }
/* The copy is centered now, so the dark pool it stands on is centered under it as well. */
.hero-center::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: min(110vw, 72rem); height: 135%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, var(--black) 0%, var(--black) 58%, color-mix(in oklch, var(--black) 70%, transparent) 78%, transparent 100%);
}
.hero-note { justify-content: center; text-align: center; }
.nav.has-mark .nav-logo { transition: opacity 0.45s var(--ease-q), transform 0.6s var(--ease); }
.nav.has-mark:not(.mark-out) .nav-logo { opacity: 0; transform: translateY(6px) scale(0.92); pointer-events: none; }

/* ------------------------------------------------------- purpose line */

/* Where the band of capital words was: one line from why we exist, set large, in the section's color. */
.purpose { margin-block: calc(var(--sec) * 0.8) calc(var(--sec) * 0.6); display: grid; gap: clamp(20px, 2.6vw, 40px); }
.purpose-q { margin: 0; font-size: clamp(2.2rem, 5.6vw, 5.75rem); font-weight: 500; letter-spacing: -0.035em; line-height: 1.02; max-width: 15em; text-wrap: balance; }
.purpose-cap { font: 400 0.8125rem/1.4 var(--num); }
.purpose-cap .link-arrow { font: 500 1rem/1 var(--sans); }

/* ------------------------------------------------------------ portfolio */

/* Second-level theme chips under Others: quieter, and set off by a hairline. */
.chip-sub { min-height: 40px; padding: 0 14px; font-size: 0.875rem; border-style: dashed; }
.chip.chip-sub:first-of-type { margin-left: 4px; }

/* Each tile carries its organization's color along its foot. Under the pointer the mark takes its own
   colors, grows a little, and an arrow says the tile opens the organization. */
.pf-grid .tile::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 2; pointer-events: none;
  background: var(--tc, transparent); transform: scaleX(0.18); transform-origin: left; transition: transform 0.7s var(--ease);
}
.pf-grid .tile::before {
  content: "\2197"; content: "\2197" / ""; position: absolute; top: clamp(10px, 1.2vw, 18px); right: clamp(12px, 1.3vw, 20px); z-index: 2;
  font-size: 1.125rem; line-height: 1; color: var(--tc, var(--fg)); opacity: 0; transform: translate(-6px, 6px); transition: opacity 0.3s linear, transform 0.5s var(--ease);
}
.pf-grid .tile.is-nolink::before { content: none; }
@media (hover: hover) {
  .pf-grid .tile:hover .tile-over { clip-path: inset(100% 0 0 0); }
  .pf-grid .tile:hover img, .pf-grid .tile:hover .tile-mark img { filter: none; }
  .pf-grid .tile:hover img { transform: scale(calc(var(--s, 1) * 1.08)); }
  .pf-grid .tile:hover .tile-mark.is-trim { transform: scale(1.08); }
  .pf-grid .tile:hover::after { transform: scaleX(1); }
  .pf-grid .tile:hover::before { opacity: 1; transform: none; }
  .pf-grid .tile:hover .tile-cap { color: var(--fg); }
  .pf-grid .tile.is-type:hover .tile-name { transform: scale(1.04); color: var(--tc, var(--fg)); }
}
.pf-grid .tile img { transition: transform 0.7s var(--ease), filter 0.45s linear; }

/* ---------------------------------------------------------- photographs */

/* In color. With motion on, a photograph arrives in grey and takes its color as it comes into view. */
.statement-media img, .fm-photo-box img, .pt img, .pp-fig img, .ev-shot img, .ev-item-media img, .follow img, .essay-cover img, .er-body img { filter: contrast(1.02) saturate(1.04); }
.scale-media img { filter: brightness(0.62) saturate(1.1); }
html.js-motion :is(.statement-media, .fm-photo-box, .pt, .pp-fig, .ev-shot, .ev-item-media, .scale-media) img { transition: filter 1.8s cubic-bezier(0.33, 1, 0.68, 1), transform 0.7s var(--ease); }
html.js-motion :is(.statement-media, .fm-photo-box, .pt, .pp-fig, .ev-shot, .ev-item-media):not(.sp-in) img { filter: grayscale(1) contrast(1.04); }
html.js-motion .scale-media:not(.sp-in) img { filter: grayscale(1) brightness(0.5); }

/* ------------------------------------------------------- get in touch */

/* The last band on every page: all eight colors, blurred into a slow glow behind the words. */
.doors { position: relative; isolation: isolate; overflow: hidden; }
.doors::before {
  content: ""; position: absolute; z-index: -1; inset: -30% -10%; pointer-events: none; opacity: 0.85;
  background:
    radial-gradient(38% 55% at 12% 70%, var(--s0) 0%, transparent 70%),
    radial-gradient(30% 50% at 34% 30%, var(--s2) 0%, transparent 70%),
    radial-gradient(34% 60% at 55% 75%, var(--s3) 0%, transparent 70%),
    radial-gradient(30% 50% at 74% 35%, var(--s5) 0%, transparent 70%),
    radial-gradient(34% 55% at 92% 70%, var(--s7) 0%, transparent 70%);
  filter: blur(60px) saturate(1.1);
}
html.js-motion .doors::before { animation: sp-drift 26s ease-in-out infinite alternate; }
.doors::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(180deg, var(--black) 0%, color-mix(in oklch, var(--black) 20%, transparent) 38%, color-mix(in oklch, var(--black) 30%, transparent) 100%); }
.doors .door-t em { color: #fff; }
@keyframes sp-drift {
  0% { transform: translate3d(-4%, 0, 0) scale(1); }
  50% { transform: translate3d(3%, -4%, 0) scale(1.08); }
  100% { transform: translate3d(5%, 3%, 0) scale(1.02); }
}

/* ------------------------------------------------------------ type caps */

/* Fewer jumps in size, so pages read more easily: the biggest headings come down to about 7rem. */
h2 { font-size: clamp(2.6rem, 7.4vw, 7rem); }
.row-word { font-size: clamp(2.8rem, 7.2vw, 7rem); }
.door-t { font-size: clamp(3rem, 10vw, 9rem); }
.scale-word { font-size: clamp(5rem, 22vw, 20rem); }
.itri-word { font-size: clamp(5rem, 20vw, 18rem); }
.why-to { font-size: clamp(4rem, 12vw, 11rem); }
.pf-flag-t { --t: clamp(3.6rem, 8vw, 8rem); }
.fm-nums b { font-size: clamp(4rem, 9vw, 8rem); }
.statement-text { font-size: clamp(1.75rem, 3.6vw, 3.75rem); line-height: 1.1; }
.thesis-lede, .init-lede { font-size: clamp(2.4rem, 5.6vw, 5.75rem); }
@media (min-width: 900px) { .scale-in { margin-top: -0.5em; } }

@media (prefers-reduced-motion: reduce) {
  .doors::before { animation: none !important; }
  .hero-mark { transform: none !important; opacity: 1 !important; }
}
.hero-mark-wrap { display: flex; justify-content: center; width: 100%; }
.nav.has-mark:has(.burger[aria-expanded="true"]) .nav-logo { opacity: 1; transform: none; pointer-events: auto; }

/* The two initiatives, each in its own color at full size. */
.scale .scale-word { color: var(--s5d); }
.itri .itri-word { color: var(--s0d); }
/* The hard problems in the home statement, each lit in its own stop. */
.hue-w0 { color: var(--s0d); } .hue-w2 { color: var(--s2d); } .hue-w4 { color: var(--s4d); } .hue-w7 { color: var(--s7d); }
.doors .door { background: transparent; }

/* ------------------------------------------------------------ logo inks */

/* One clamped SVG filter per logo kind (js/app.js) instead of the brightness() chains in css/site.css, which
   drew logos brighter than white on HDR screens. A white-artwork logo stays in ink under the pointer: it has
   no colors of its own, and without the filter its black box would show. */
.tk-logo img, .tile img { filter: url(#ink); }
.tk-item[data-bg="white"] .tk-logo img, .tile[data-bg="white"] img { filter: url(#ink-w); }
.tk-item[data-bg="dark"] .tk-logo img, .tile[data-bg="dark"] img { filter: url(#ink-d); }
.tile[data-ink="deep"] img { filter: url(#ink-d) url(#ink-deep); }
@media (hover: hover) {
  .tk-item:not([data-bg="dark"]) .tk-link:hover .tk-logo img { filter: none; }
  .pf-grid .tile:hover img, .pf-grid .tile:hover .tile-mark img { filter: none; }
  .pf-grid .tile[data-bg="dark"]:hover img, .pf-grid .tile[data-bg="dark"]:hover .tile-mark img { filter: url(#ink-d); }
  .pf-grid .tile[data-ink="deep"]:hover img { filter: url(#ink-d) url(#ink-deep); }
  /* A logo on its own white box: multiply lays the box into the tile, so no edge can show. */
  .pf-grid .tile[data-bg="white"]:hover img, .tk-item[data-bg="white"] .tk-link:hover .tk-logo img { mix-blend-mode: multiply; }
}