/* Spectrum Impact. The spectrum, at the two ends of every page.
   Round 11 (client call, 29 Oct 2026): "too much color, a bit kiddish; top and bottom is fine." The hero and the
   get in touch band and footer keep the spectrum; every section between them is black and white again, so the
   per-section hues below now only apply to the hero, the footer and the dialog (js/spectrum.js).
   Earlier note, kept for the record:
   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; }


.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 first screen is the spectrum itself. The lines climb the whole screen and the copy floats inside them,
   in the middle, on a soft shadow only as large as the words. The logo stays in the bar. */
.hero-spectrum { --rise: clamp(260px, 52svh, 620px); }
.hero-center { align-items: center; text-align: center; gap: clamp(14px, 2.2vh, 28px); padding-top: clamp(40px, 16vh, 190px); }
/* Above the family office, the eight stops of the logo, each a hard band: the mark's colors without the mark. */
.hero-office { display: flex; flex-direction: column; align-items: center; gap: 14px; font: 400 0.8125rem/1.4 var(--num); letter-spacing: 0.02em; color: var(--on-dark-2); text-wrap: balance; }
.hero-office::before {
  content: ""; width: 72px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--s0) 0 12.5%, var(--s1) 0 25%, var(--s2) 0 37.5%, var(--s3) 0 50%, var(--s4) 0 62.5%, var(--s5) 0 75%, var(--s6) 0 87.5%, var(--s7) 0);
}
.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); }
.hero-center::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 4%; width: min(92vw, 56rem); height: 100%; transform: translateX(-50%); pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklch, var(--black) 88%, transparent) 0%, color-mix(in oklch, var(--black) 70%, transparent) 50%, transparent 100%);
}
.hero-note { justify-content: center; text-align: center; }

/* ------------------------------------------------------- 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; }
}

.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; }
}