/* 40Second — stonework layer: brand mark, fluting, entablature, meander, earth, topo */

:root {
  --umber: #7A5238;
  --ochre: #C2883A;
  --moss: #6E7D5A;
  --flute-hi: rgba(236, 234, 227, 0.025);
  --flute-lo: rgba(0, 0, 0, 0.35);
  --mark-h: clamp(58px, 10.5vw, 118px);
  --ghost-pink: rgba(255, 96, 168, 0.52);
  --ghost-blue: rgba(96, 144, 255, 0.52);
}
html[data-mode="marble"] {
  --flute-hi: rgba(255, 255, 255, 0.5);
  --flute-lo: rgba(22, 23, 27, 0.07);
  --ghost-pink: rgba(214, 73, 138, 0.32);
  --ghost-blue: rgba(61, 110, 255, 0.32);
}

/* ---------- grain (rustic base, all pages) ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}

/* ---------- marbled paper layer (site-wide, fixed, never moves) ---------- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(42% 34% at 82% 10%, rgba(178, 58, 72, 0.32), transparent 70%),
    radial-gradient(36% 30% at 10% 88%, rgba(61, 110, 255, 0.2), transparent 72%),
    url("brand/marble-dark.svg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: 0.4;
}
body > * { position: relative; z-index: 1; }
html[data-mode="marble"] body::before {
  background-image:
    radial-gradient(42% 34% at 82% 10%, rgba(154, 47, 61, 0.18), transparent 70%),
    radial-gradient(36% 30% at 10% 88%, rgba(43, 83, 214, 0.1), transparent 72%),
    url("brand/marble-light.svg");
  opacity: 0.45;
}

/* ---------- the logo: artwork + bars live in one SVG, alignment exact ---------- */
html[data-mode="basalt"] .logo-ink { display: none; }
html[data-mode="marble"] .logo-bone { display: none; }

.logo-stack { position: relative; display: block; width: 100%; aspect-ratio: 600 / 328; }
svg.mark40 {
  position: absolute;
  top: -19.5122%;
  left: -10.6667%;
  width: 121.3333%;
  height: 139.0244%;
  overflow: visible;
}
.mark40__bars { fill: var(--accent); display: none; }
html[data-bars="flush"] .mark40__bars--flush,
html[data-bars="pierced"] .mark40__bars--pierced,
html[data-bars="burst"] .mark40__bars--burst { display: inline; }

/* hero lockup */
.lockup { margin: 0; }
.lockup img {
  display: block;
  width: clamp(300px, 42vw, 560px);
  height: auto;
}

/* spine: plain stone, no texture */

/* spine cross-page links */
.spine__pages {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: stretch;
}
.spine__pages a {
  display: flex;
  align-items: center;
  min-height: 40px;
  margin: 1px 8px;
  padding-right: 12px;
  border-radius: 9px;
  text-decoration: none;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: background 0.18s ease, color 0.18s ease;
}
/* glyph column trimmed by the row's 8px inset so the diamond stays centred on
   the logo (8px margin + (rail-gutter - 16)/2 == rail-gutter/2). */
.spine__page-glyph {
  width: calc(var(--rail-gutter) - 16px);
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.spine__page-glyph::before {
  content: "";
  width: 7px;
  height: 7px;
  transform: rotate(45deg);
  background: currentColor;
  opacity: 0.9;
  transition: transform 0.22s ease;
}
.spine__page-label { white-space: nowrap; }
/* Clean, ChatGPT-style rows: a soft rounded highlight on hover and on the
   current page — keeping the blue text + diamond, just calmer and roomier. */
.spine__pages a:hover { background: rgba(140, 146, 158, 0.12); color: var(--fg); }
.spine__pages a[aria-current="page"] {
  background: rgba(61, 110, 255, 0.15);
  color: var(--accent-ink);
}
.spine__pages a[aria-current="page"] .spine__page-glyph::before { transform: rotate(45deg) scale(1.5); }

/* ---------- entablature (page-top band: cornice / frieze / architrave) ---------- */
.entablature {
  border-bottom: 1px solid var(--hairline);
  margin-bottom: clamp(40px, 7vh, 72px);
}
.entablature__cornice {
  height: 7px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  margin-top: 26px;
}
.entablature__frieze {
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 4px 2px;
}
.entablature__crumb {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}
.entablature__crumb a { color: var(--muted); text-decoration: none; }
.entablature__crumb a:hover { color: var(--accent-ink); }
.entablature__crumb .sep { margin: 0 8px; opacity: 0.5; }
.entablature__crumb .here { color: var(--fg); }
.entablature__meander {
  flex: 1;
  align-self: stretch;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='15' viewBox='0 0 36 18' fill='none' stroke='%238B9099' stroke-width='2'%3E%3Cpath d='M2 16 L18 2 L34 16 M11 16 L18 9 L25 16'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-position: right center;
  background-size: 22px 11px;
  opacity: 0.22;
}
html[data-ornament="off"] .entablature__meander { background-image: none; }

/* ---------- confident meander divider (3 keys) ---------- */
.meander-rule svg.tri { width: 96px; }

/* separator keys flip to point down below the viewport center, up above it */
.meander-rule svg path { transform-box: fill-box; transform-origin: 50% 55%; }
@media (prefers-reduced-motion: no-preference) {
  .meander-rule svg path { transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.4, 1); }
  .meander-rule svg path:nth-child(2) { transition-delay: 0.07s; }
  .meander-rule svg path:nth-child(3) { transition-delay: 0.14s; }
}
.meander-rule.is-down svg path { transform: rotate(180deg); }

/* separators settle into view as each scrolls onto the screen. Gated on the
   `js` root class (set by 40second.js once IntersectionObserver is confirmed):
   with no JS the separators are simply always visible — they can never hide. */
@media (prefers-reduced-motion: no-preference) {
  html.js .meander-rule svg {
    opacity: 0;
    transform: translateY(10px) scale(0.94);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.34, 1.4, 0.4, 1);
  }
  html.js .meander-rule.is-in svg { opacity: 1; transform: none; }
}

/* panels: border only, no relief shadows */

/* ---------- releases: reserved slot ---------- */
.release--reserved {
  border-top: 1px solid var(--hairline);
  padding-top: var(--row-pad);
}
.release--reserved .release__name { color: var(--muted); }
.release--reserved .release__desc { font-family: var(--font-mono); font-size: 12.5px; }

/* ---------- strata: sections as distinct slabs ---------- */
:root { --strata-raised: #101216; --strata-deep: #08090C; }
html[data-mode="marble"] { --strata-raised: #E4E0D4; --strata-deep: #DEDACB; }

.strata {
  background: var(--strata-raised);
  border: 1px solid var(--hairline);
  margin-top: calc(var(--space-section) * 0.45);
  margin-inline: calc(-1 * clamp(20px, 3.4vw, 48px));
  padding: clamp(36px, 6vh, 56px) clamp(20px, 3.4vw, 48px) clamp(44px, 7vh, 68px);
}
.strata--deep { background: var(--strata-deep); }
.strata--agency { border-left: 2px solid var(--accent); }
.strata .studio-panel { background: none; border: none; padding: 0; }

.log-bar {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--muted);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 14px;
  margin-bottom: 26px;
}

@media (min-width: 920px) {
  .releases { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}

/* ---------- mason's mark (the quiet 42) ---------- */
.portico { position: relative; }
.mason-mark {
  position: absolute;
  right: 0;
  bottom: clamp(28px, 7vh, 64px);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.42em;
  color: var(--muted);
  user-select: none;
}
.mason-mark::before {
  content: "";
  width: 64px;
  height: 1px;
  background: var(--hairline);
}
.mason-mark .dot { color: var(--accent-ink); }
@media (max-width: 720px) {
  .mason-mark { bottom: 18px; font-size: 11px; }
  .mason-mark::before { width: 36px; }
}

/* ---------- portico links ---------- */
.portico-links {
  display: flex;
  gap: clamp(18px, 3vw, 34px);
  margin-top: 46px;
  font-family: var(--font-mono);
  font-size: 13px;
  flex-wrap: wrap;
}
.portico-links a {
  color: var(--muted);
  text-decoration: none;
  letter-spacing: 0.08em;
  padding: 4px 0;
}
.portico-links a::before {
  content: "/";
  color: var(--accent-ink);
  margin-right: 7px;
  display: inline-block;
  width: 1ch;
  text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
  .portico-links a::before { animation: term-spin 0.55s steps(1) infinite; }
}
@keyframes term-spin {
  0%   { content: "|"; }
  25%  { content: "/"; }
  50%  { content: "-"; }
  75%  { content: "\\"; }
  100% { content: "|"; }
}
.portico-links a:hover { color: var(--fg); }

/* ---------- release cards ---------- */
.rel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.rel-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 24px 22px;
  text-decoration: none;
  transition: border-color 0.2s ease;
}
a.rel-card:hover { border-color: var(--accent); }
.rel-card__name {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--fg);
}
.rel-card__desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
  flex: 1;
}
.rel-card__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.rel-card__arrow { font-size: 14px; transition: transform 0.2s ease, color 0.2s ease; }
a.rel-card:hover .rel-card__arrow { color: var(--accent-ink); transform: translateX(4px); }
.rel-card--reserved { border-style: dashed; background: none; }
.rel-card--reserved .rel-card__name { color: var(--muted); }

/* ---------- link rows (release pages) ---------- */
.linkrows { list-style: none; border-bottom: 1px solid var(--hairline); max-width: 560px; padding: 0; }
.linkrows li { border-top: 1px solid var(--hairline); }
.linkrows a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  padding: 15px 2px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--fg);
  text-decoration: none;
}
.linkrows a span { color: var(--muted); transition: color 0.2s ease, transform 0.2s ease; }
.linkrows a:hover span { color: var(--accent-ink); transform: translateX(3px); }

.article-head h1.rel-title,
.rel-title {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: clamp(28px, 4.4vw, 44px);
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-transform: none;
  max-width: none;
}

/* ================= ARTICLE ================= */

.article-stele { max-width: 780px; }

.article-head { margin-bottom: clamp(36px, 6vh, 60px); }
.article-head__kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 20px;
}
.article-head h1 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(28px, 4.6vw, 46px);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.3;
  max-width: 18ch;
}
.article-head__meta {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.article-abstract {
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: 24px 0;
  margin-bottom: clamp(40px, 7vh, 64px);
  color: var(--muted);
  font-size: 16px;
  line-height: 1.8;
  max-width: var(--measure);
}

.article-body { font-size: 16.5px; line-height: 1.85; }
.article-body > * + * { margin-top: 1.35em; }
.article-body p { max-width: var(--measure); }
.article-body h2 {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(19px, 2.6vw, 26px);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-top: clamp(56px, 9vh, 88px);
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.article-body h2 .n {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--accent-ink);
}
.article-body a { text-decoration-color: var(--accent); }
.article-body strong { font-weight: 600; }
.article-body ul { padding-left: 1.2em; max-width: var(--measure); }

/* figures and charts */
.fig {
  margin: clamp(36px, 6vh, 56px) 0;
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: clamp(18px, 3vw, 30px);
}
.fig svg { display: block; width: 100%; height: auto; }
.fig figcaption {
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  margin-top: 16px;
  letter-spacing: 0.02em;
}
.fig figcaption .fno { color: var(--accent-ink); }

/* chart vocabulary */
.ch-grid { stroke: var(--hairline); stroke-width: 1; }
.ch-axis { stroke: var(--hairline); stroke-width: 1.5; }
.ch-label { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; fill: var(--muted); letter-spacing: 0.04em; }
.ch-title { font-family: "IBM Plex Mono", monospace; font-size: 12px; fill: var(--fg); letter-spacing: 0.08em; }
.ch-s1 { stroke: var(--ochre); }
.ch-s2 { stroke: var(--moss); }
.ch-s3 { stroke: var(--slate, #8B9099); }
.ch-f1 { fill: var(--ochre); }
.ch-f2 { fill: var(--moss); }
.ch-f3 { fill: #8B9099; }
.ch-dot { fill: var(--bg); stroke-width: 2; }
html[data-mode="marble"] .ch-s3 { stroke: #5C6068; }
html[data-mode="marble"] .ch-f3 { fill: #5C6068; }

/* code block */
.codeblock {
  background: var(--surface);
  border: 1px solid var(--hairline);
  padding: 18px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.75;
  overflow-x: auto;
  max-width: 100%;
}
.codeblock .c { color: var(--muted); }
.codeblock .k { color: var(--accent-ink); }

/* article footer */
.article-end { margin-top: clamp(60px, 10vh, 100px); padding-bottom: 90px; }
.article-end__nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  margin-top: 30px;
}
.article-end__nav a { color: var(--muted); text-decoration: none; }
.article-end__nav a:hover { color: var(--accent-ink); }

/* ================= WEB AGENCY ================= */

/* The web-agency page now uses the SAME palette, background, and page-top band as
   every other page. The previous bluer `body.agency` colour overrides (--bg /
   --surface / --hairline / --strata-*), the html background override, the
   topo-svg contour underlay, AND the accent cornice band were all removed so it
   is visually identical to the rest of the site (standard :root basalt/marble). */

.meander-rule svg.bars { width: 88px; }

/* ---------- inquiry form (agency contact) ---------- */
.inquiry-wrap {
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  gap: 48px;
  align-items: start;
}
.inquiry__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.field { display: flex; flex-direction: column; gap: 8px; }
.field--wide { grid-column: 1 / -1; }
.field__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.field__label em { font-style: normal; opacity: 0.6; letter-spacing: 0.1em; text-transform: none; }
.field__input {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 0;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 13.5px;
  padding: 12px 14px;
  min-height: 44px;
  transition: border-color 0.2s ease;
}
.field__input::placeholder { color: var(--muted); opacity: 0.7; }
.field__input:focus { outline: none; border-color: var(--accent); }
.field__area { resize: vertical; min-height: 120px; line-height: 1.7; }
.inquiry__foot {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.inquiry__send {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg);
  background: none;
  border: 1px solid var(--accent);
  padding: 12px 22px;
  min-height: 44px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.inquiry__send:hover { background: var(--accent); color: var(--bg); }
.inquiry__alt { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
@media (max-width: 860px) {
  .inquiry-wrap { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 540px) {
  .inquiry__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root { --mark-h: clamp(44px, 13vw, 64px); }
  .entablature__cornice { margin-top: 14px; }
  .article-end__nav { flex-direction: column; }
}

/* ================= HINT OF PSYCHEDELIA ================= */
/* All effects: slow, low-amplitude, gated on motion preference + tweak */

@media (prefers-reduced-motion: no-preference) {

  /* dial bars shimmer through neighboring hues */
  html[data-psy="on"] .mark40__bars {
    animation: psy-ticks 16s ease-in-out infinite alternate;
  }
  @keyframes psy-ticks {
    0%   { filter: hue-rotate(-14deg) brightness(0.96); }
    100% { filter: hue-rotate(22deg) brightness(1.08); }
  }

  /* aurora behind the portico, almost subliminal */
  html[data-psy="on"] .portico { position: relative; }
  html[data-psy="on"] .portico::before {
    content: "";
    position: absolute;
    inset: -12% -24%;
    pointer-events: none;
    z-index: -1;
    background:
      radial-gradient(38% 48% at 28% 42%, var(--accent), transparent 72%),
      radial-gradient(30% 42% at 70% 26%, var(--splotch), transparent 75%);
    opacity: 0.06;
    filter: blur(48px) hue-rotate(0deg);
    animation: psy-aurora 38s ease-in-out infinite alternate;
  }
  @keyframes psy-aurora {
    100% {
      transform: translate(14%, 10%) scale(1.18);
      filter: blur(48px) hue-rotate(52deg);
      opacity: 0.075;
    }
  }
  /* the dark stone needs a stronger pour to read */
  html[data-mode="basalt"][data-psy="on"] .portico::before {
    animation-name: psy-aurora-dark;
    opacity: 0.1;
  }
  @keyframes psy-aurora-dark {
    100% {
      transform: translate(14%, 10%) scale(1.18);
      filter: blur(48px) hue-rotate(52deg);
      opacity: 0.15;
    }
  }


  /* hover rule drifts through hue while held */
  html[data-psy="on"] .codex__row:hover::before,
  html[data-psy="on"] .codex__row:focus-within::before {
    animation: psy-bar 5s ease-in-out infinite alternate;
  }
  @keyframes psy-bar {
    100% { filter: hue-rotate(30deg); }
  }

  /* the red/blue washes drift through hue, almost subliminal */
  html[data-psy="on"] body::before {
    animation: psy-wash 52s ease-in-out infinite alternate;
  }
  @keyframes psy-wash {
    0%   { filter: hue-rotate(-8deg); }
    100% { filter: hue-rotate(12deg); }
  }

  /* chromatic ghost on headings and titles while hovered */
  html[data-psy="on"] .sec-head h2:hover,
  html[data-psy="on"] .article-body h2:hover,
  html[data-psy="on"] .dir__row:hover .dir__name,
  html[data-psy="on"] .article-head h1:hover,
  html[data-psy="on"] .portico-links a:hover {
    animation: psy-rgb 2.6s ease-in-out infinite alternate;
  }
  @keyframes psy-rgb {
    0%   { text-shadow: 2px 0 0 var(--ghost-pink), -2px 0 0 var(--ghost-blue); }
    100% { text-shadow: 3px 0 0 var(--ghost-blue), -3px 0 0 var(--ghost-pink); }
  }

  /* the current-page diamond breathes */
  html[data-psy="on"] .spine__current .spine__page-glyph::before {
    animation: psy-pulse 5.5s ease-in-out infinite alternate;
  }
  @keyframes psy-pulse {
    0%   { transform: rotate(45deg) scale(1); }
    100% { transform: rotate(45deg) scale(1.18); }
  }

  /* chart glow drifts through neighboring hues */
  html[data-psy="on"] .chart .ch-glow {
    animation: psy-ticks 14s ease-in-out infinite alternate;
  }

  /* buttons breathe through the spectrum while hovered */
  html[data-psy="on"] .inquiry__send:hover,
  html[data-psy="on"] .term__copy:hover,
  html[data-psy="on"] .mode-toggle:hover {
    animation: psy-rgb 2.6s ease-in-out infinite alternate, psy-btn 3.2s ease-in-out infinite alternate;
  }
  @keyframes psy-btn {
    0%   { box-shadow: 0 0 0 1px rgba(214, 73, 138, 0.25), 0 0 12px -6px var(--accent); }
    100% { box-shadow: 0 0 0 1px rgba(61, 110, 255, 0.25), 0 0 14px -6px var(--splotch); }
  }

  /* iridescent sheen slides over paper under the cursor */
  html[data-psy="on"] a.rel-card::after,
  html[data-psy="on"] .rel-card--rich::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: conic-gradient(from 210deg at 70% 18%,
      rgba(255, 0, 90, 0.5), rgba(0, 140, 255, 0.5),
      rgba(90, 255, 160, 0.4), rgba(255, 200, 0, 0.45), rgba(255, 0, 90, 0.5));
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  html[data-psy="on"] a.rel-card:hover::after,
  html[data-psy="on"] .rel-card--rich:hover::after { opacity: 0.28; }
}

/* ---------- directory (home: the wings of the site) ---------- */
.dir { list-style: none; border-bottom: 1px solid var(--hairline); padding: 0; }
.dir__row { position: relative; border-top: 1px solid var(--hairline); }
.dir__row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
}
@media (prefers-reduced-motion: no-preference) {
  .dir__row::before { transition: transform 0.3s ease; }
}
.dir__row:hover::before,
.dir__row:focus-within::before { transform: scaleY(1); }
.dir__row a {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  align-items: baseline;
  gap: 8px 24px;
  padding: clamp(22px, 3.5vh, 32px) 2px clamp(22px, 3.5vh, 32px) 20px;
  text-decoration: none;
}
.dir__num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--accent-ink);
}
.dir__name {
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(20px, 2.8vw, 28px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  line-height: 1.3;
}
.dir__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.dir__desc {
  grid-column: 2;
  color: var(--muted);
  font-size: 14.5px;
  max-width: var(--measure);
}
.dir__row a:hover .dir__name { color: var(--accent-ink); }
@media (max-width: 720px) {
  .dir__row a { grid-template-columns: 1fr auto; padding-left: 14px; }
  .dir__num { display: none; }
  .dir__desc { grid-column: 1; }
}

/* index-page head (research / releases / log) */
.page-head { margin-bottom: clamp(36px, 6vh, 60px); }

/* ---------- spine: current page row ---------- */
.spine__current { margin-top: 30px; }
.spine__current a {
  display: flex;
  align-items: center;
  min-height: 34px;
  text-decoration: none;
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}
.spine__current .spine__page-glyph::before {
  width: 7px;
  height: 7px;
  background: var(--accent);
  opacity: 1;
}

/* ---------- spine page transition (diamond travels, trail stays, page spawns) ---------- */
.spine-traveler {
  position: fixed;
  z-index: 60;
  width: 7px;
  height: 7px;
  background: var(--accent);
  box-shadow: 0 0 12px -2px var(--accent);
  pointer-events: none;
}
.spine-trail {
  position: fixed;
  z-index: 59;
  width: 1.5px;
  background: var(--accent);
  opacity: 0.5;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  /* departing: the traveler is the only diamond in motion — old and target dots yield */
  .spine--depart .spine__current .spine__page-glyph::before { opacity: 0; }
  .spine--depart .spine__pages a.is-target .spine__page-glyph::before {
    opacity: 0;
    transition: opacity 0.12s ease;
  }
  .spine--depart .spine__current,
  .spine--depart .spine__nav .spine__num {
    opacity: 0.35;
    transition: opacity 0.3s ease;
  }

  /* arriving: the current diamond settles in, sections spawn from the rail line */
  /* arriving: diamond lands on top, the subject slides out of it,
     the line grows from the diamond, and the sections slide out of the line */
  body.fs-arrive .spine__current .spine__page-glyph::before {
    animation: fs-diamond-arrive 0.42s cubic-bezier(0.3, 0.8, 0.3, 1) backwards;
  }
  @keyframes fs-diamond-arrive {
    from { transform: translateY(var(--fs-from, 44px)) rotate(45deg); }
    to   { transform: translateY(0) rotate(45deg); }
  }
  body.fs-arrive .spine__current .spine__page-label {
    animation: fs-label-out 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.34s backwards;
  }
  @keyframes fs-label-out {
    from { opacity: 0; transform: translateX(-14px); }
    to   { opacity: 1; transform: none; }
  }
  body.fs-arrive .spine__line {
    transform-origin: top;
    animation: fs-line-grow 0.4s ease 0.46s backwards;
  }
  @keyframes fs-line-grow {
    from { transform: scaleY(0); }
    to   { transform: scaleY(1); }
  }
  body.fs-arrive .spine__nav .spine__num {
    animation: fs-num-out 0.35s cubic-bezier(0.2, 0.7, 0.2, 1) backwards;
  }
  body.fs-arrive .spine__nav li:nth-child(1) .spine__num { animation-delay: 0.68s; }
  body.fs-arrive .spine__nav li:nth-child(2) .spine__num { animation-delay: 0.75s; }
  body.fs-arrive .spine__nav li:nth-child(3) .spine__num { animation-delay: 0.82s; }
  body.fs-arrive .spine__nav li:nth-child(4) .spine__num { animation-delay: 0.89s; }
  body.fs-arrive .spine__nav li:nth-child(5) .spine__num { animation-delay: 0.96s; }
  @keyframes fs-num-out {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: none; }
  }
  body.fs-arrive .stele__inner > * {
    opacity: 0;
    transform: translateX(-18px);
    animation: fs-spawn 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  }
  body.fs-arrive .stele__inner > :nth-child(1) { animation-delay: 0.08s; }
  body.fs-arrive .stele__inner > :nth-child(2) { animation-delay: 0.14s; }
  body.fs-arrive .stele__inner > :nth-child(3) { animation-delay: 0.2s; }
  body.fs-arrive .stele__inner > :nth-child(4) { animation-delay: 0.26s; }
  body.fs-arrive .stele__inner > :nth-child(5) { animation-delay: 0.32s; }
  body.fs-arrive .stele__inner > :nth-child(6) { animation-delay: 0.38s; }
  body.fs-arrive .stele__inner > :nth-child(7) { animation-delay: 0.44s; }
  body.fs-arrive .stele__inner > :nth-child(8) { animation-delay: 0.5s; }
  body.fs-arrive .stele__inner > :nth-child(9) { animation-delay: 0.56s; }
  body.fs-arrive .stele__inner > :nth-child(10) { animation-delay: 0.62s; }
  @keyframes fs-spawn { to { opacity: 1; transform: none; } }
}

/* ---------- mode toggle (top right) ---------- */
.mode-toggle {
  position: fixed;
  top: 14px;
  right: 16px;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  background: var(--bg);
  border: 1px solid var(--hairline);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.2s ease;
}
.mode-toggle:hover { border-color: var(--accent); }
.mode-toggle .mt-ico { display: flex; align-items: center; color: var(--accent-ink); }
.mode-toggle .mt-ico svg { width: 15px; height: 15px; }
@media (max-width: 720px) {
  .mode-toggle { top: 10px; right: 10px; }
}

/* ---------- division link (web agency) in spine ---------- */
/* Web agency is simply the LAST item in the page list — identical to the others
   (solid diamond, muted colour, blue only when current), with NO separator/gap. */

/* Calm nav (jay): the spine selectors are statically present and SELECTABLE —
   the current PAGE is marked blue (grown diamond), the current SECTION by a grey
   outline; nothing animates in. Quiet the staggered fs-arrive entrance on the
   spine itself (the main content still reveals). */
body.fs-arrive .spine__line,
body.fs-arrive .spine__nav .spine__num { animation: none; opacity: 1; }

/* rail is always open; no wide-screen special case needed */

/* ---------- granite slabs (releases + research) ---------- */
.rel-card,
.codex__row {
  --slab-hi: #DDE1E5;
  --slab-lo: #C9CED4;
  --slab-edge: #9AA1A9;
  --slab-ink: #1A1E23;
  --slab-faint: #454C55;
  position: relative;
  border: none;
  border-radius: 0;
  color: var(--slab-ink);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23f)' opacity='0.16'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='420' height='420' filter='url(%23c)' opacity='0.09'/%3E%3C/svg%3E"),
    linear-gradient(90deg, transparent 14px, rgba(0, 0, 0, 0.16) 14px, rgba(0, 0, 0, 0.16) 15px, rgba(255, 255, 255, 0.38) 15px, rgba(255, 255, 255, 0.38) 16px, transparent 16px),
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201920%201200%22%3E%3Cdefs%3E%3Cfilter%20id%3D%22v%22%20x%3D%22-15%25%22%20y%3D%22-15%25%22%20width%3D%22130%25%22%20height%3D%22130%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.0085%200.0045%22%20numOctaves%3D%224%22%20seed%3D%2211%22%3E%3C%2FfeTurbulence%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20scale%3D%22300%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%3E%3C%2FfeDisplacementMap%3E%3C%2Ffilter%3E%3Cfilter%20id%3D%22sp%22%20x%3D%22-15%25%22%20y%3D%22-15%25%22%20width%3D%22130%25%22%20height%3D%22130%25%22%3E%3CfeTurbulence%20type%3D%22fractalNoise%22%20baseFrequency%3D%220.012%200.012%22%20numOctaves%3D%223%22%20seed%3D%2229%22%3E%3C%2FfeTurbulence%3E%3CfeDisplacementMap%20in%3D%22SourceGraphic%22%20scale%3D%2290%22%20xChannelSelector%3D%22R%22%20yChannelSelector%3D%22G%22%3E%3C%2FfeDisplacementMap%3E%3C%2Ffilter%3E%3C%2Fdefs%3E%3Cg%20filter%3D%22url(%23v)%22%20stroke%3D%22%233E424A%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M-80%20-29%20Q%20814%20-19%202000%20-69%22%20stroke-width%3D%222.78%22%20stroke-opacity%3D%220.132%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%2059%20Q%201146%2067%202000%2085%22%20stroke-width%3D%222.24%22%20stroke-opacity%3D%220.128%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%2041%20Q%20827%20-5%202000%20-0%22%20stroke-width%3D%221.23%22%20stroke-opacity%3D%220.172%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20113%20Q%20931%20153%202000%2074%22%20stroke-width%3D%221.58%22%20stroke-opacity%3D%220.121%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20131%20Q%20723%20115%202000%20101%22%20stroke-width%3D%221.91%22%20stroke-opacity%3D%220.253%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20152%20Q%20685%20192%202000%20147%22%20stroke-width%3D%220.84%22%20stroke-opacity%3D%220.243%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20232%20Q%20799%20249%202000%20226%22%20stroke-width%3D%221.47%22%20stroke-opacity%3D%220.094%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20229%20Q%20957%20249%202000%20184%22%20stroke-width%3D%221.27%22%20stroke-opacity%3D%220.105%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20289%20Q%201271%20311%202000%20321%22%20stroke-width%3D%221.86%22%20stroke-opacity%3D%220.227%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20308%20Q%201045%20341%202000%20261%22%20stroke-width%3D%222.19%22%20stroke-opacity%3D%220.171%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20354%20Q%20684%20351%202000%20361%22%20stroke-width%3D%222.01%22%20stroke-opacity%3D%220.139%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20408%20Q%20918%20427%202000%20423%22%20stroke-width%3D%221.44%22%20stroke-opacity%3D%220.118%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20421%20Q%20645%20509%202000%20486%22%20stroke-width%3D%222.56%22%20stroke-opacity%3D%220.137%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20437%20Q%20741%20441%202000%20453%22%20stroke-width%3D%222.53%22%20stroke-opacity%3D%220.225%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20515%20Q%20787%20484%202000%20568%22%20stroke-width%3D%222.38%22%20stroke-opacity%3D%220.147%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20546%20Q%20821%20478%202000%20511%22%20stroke-width%3D%222.03%22%20stroke-opacity%3D%220.143%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20592%20Q%20864%20596%202000%20575%22%20stroke-width%3D%220.94%22%20stroke-opacity%3D%220.104%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20570%20Q%201203%20519%202000%20543%22%20stroke-width%3D%221.72%22%20stroke-opacity%3D%220.179%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20639%20Q%20944%20686%202000%20634%22%20stroke-width%3D%221.82%22%20stroke-opacity%3D%220.145%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20666%20Q%201012%20648%202000%20659%22%20stroke-width%3D%222.64%22%20stroke-opacity%3D%220.194%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20715%20Q%201293%20687%202000%20773%22%20stroke-width%3D%221.00%22%20stroke-opacity%3D%220.093%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20769%20Q%201272%20809%202000%20776%22%20stroke-width%3D%222.53%22%20stroke-opacity%3D%220.236%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20806%20Q%20694%20769%202000%20791%22%20stroke-width%3D%223.00%22%20stroke-opacity%3D%220.232%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20786%20Q%201012%20727%202000%20769%22%20stroke-width%3D%221.98%22%20stroke-opacity%3D%220.256%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20858%20Q%20647%20799%202000%20826%22%20stroke-width%3D%221.95%22%20stroke-opacity%3D%220.195%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20877%20Q%201219%20827%202000%20817%22%20stroke-width%3D%223.06%22%20stroke-opacity%3D%220.176%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20912%20Q%20856%20986%202000%20942%22%20stroke-width%3D%222.44%22%20stroke-opacity%3D%220.112%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20954%20Q%20750%201002%202000%20959%22%20stroke-width%3D%222.49%22%20stroke-opacity%3D%220.249%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%201006%20Q%20757%201022%202000%20951%22%20stroke-width%3D%222.11%22%20stroke-opacity%3D%220.158%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%20994%20Q%20634%201034%202000%201014%22%20stroke-width%3D%221.80%22%20stroke-opacity%3D%220.148%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%201048%20Q%20769%201093%202000%201068%22%20stroke-width%3D%222.44%22%20stroke-opacity%3D%220.185%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%201101%20Q%20636%201129%202000%201167%22%20stroke-width%3D%221.25%22%20stroke-opacity%3D%220.162%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%201143%20Q%201327%201166%202000%201076%22%20stroke-width%3D%220.89%22%20stroke-opacity%3D%220.186%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M-80%201158%20Q%201201%201129%202000%201207%22%20stroke-width%3D%222.19%22%20stroke-opacity%3D%220.119%22%3E%3C%2Fpath%3E%3C%2Fg%3E%3Cg%20filter%3D%22url(%23sp)%22%20fill%3D%22%233E424A%22%20stroke%3D%22none%22%3E%3Ccircle%20cx%3D%22283%22%20cy%3D%22979%22%20r%3D%221.25%22%20fill-opacity%3D%220.255%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22559%22%20cy%3D%22667%22%20r%3D%220.51%22%20fill-opacity%3D%220.293%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22637%22%20cy%3D%22807%22%20r%3D%220.61%22%20fill-opacity%3D%220.258%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221081%22%20cy%3D%22766%22%20r%3D%221.68%22%20fill-opacity%3D%220.193%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221197%22%20cy%3D%221090%22%20r%3D%221.06%22%20fill-opacity%3D%220.112%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221624%22%20cy%3D%22860%22%20r%3D%221.73%22%20fill-opacity%3D%220.277%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221545%22%20cy%3D%22647%22%20r%3D%221.72%22%20fill-opacity%3D%220.290%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22497%22%20cy%3D%22124%22%20r%3D%220.53%22%20fill-opacity%3D%220.250%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22319%22%20cy%3D%22400%22%20r%3D%220.55%22%20fill-opacity%3D%220.097%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221096%22%20cy%3D%221096%22%20r%3D%220.52%22%20fill-opacity%3D%220.185%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22415%22%20cy%3D%22961%22%20r%3D%222.24%22%20fill-opacity%3D%220.158%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221849%22%20cy%3D%2273%22%20r%3D%222.15%22%20fill-opacity%3D%220.114%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221866%22%20cy%3D%22536%22%20r%3D%221.93%22%20fill-opacity%3D%220.187%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22950%22%20cy%3D%221094%22%20r%3D%220.99%22%20fill-opacity%3D%220.141%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221588%22%20cy%3D%221179%22%20r%3D%220.94%22%20fill-opacity%3D%220.139%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22911%22%20cy%3D%22885%22%20r%3D%222.70%22%20fill-opacity%3D%220.190%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22726%22%20cy%3D%221028%22%20r%3D%220.50%22%20fill-opacity%3D%220.270%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22450%22%20cy%3D%221128%22%20r%3D%220.98%22%20fill-opacity%3D%220.245%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221286%22%20cy%3D%2233%22%20r%3D%222.29%22%20fill-opacity%3D%220.130%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22642%22%20cy%3D%22156%22%20r%3D%221.07%22%20fill-opacity%3D%220.207%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22577%22%20cy%3D%221169%22%20r%3D%221.00%22%20fill-opacity%3D%220.147%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221057%22%20cy%3D%22587%22%20r%3D%221.18%22%20fill-opacity%3D%220.274%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221674%22%20cy%3D%221001%22%20r%3D%220.77%22%20fill-opacity%3D%220.275%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22676%22%20cy%3D%22741%22%20r%3D%221.32%22%20fill-opacity%3D%220.212%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221683%22%20cy%3D%22818%22%20r%3D%220.56%22%20fill-opacity%3D%220.277%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22885%22%20cy%3D%22979%22%20r%3D%221.17%22%20fill-opacity%3D%220.121%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221303%22%20cy%3D%2216%22%20r%3D%221.31%22%20fill-opacity%3D%220.171%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221113%22%20cy%3D%22169%22%20r%3D%222.02%22%20fill-opacity%3D%220.277%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22483%22%20cy%3D%22212%22%20r%3D%222.51%22%20fill-opacity%3D%220.102%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22646%22%20cy%3D%22587%22%20r%3D%220.50%22%20fill-opacity%3D%220.188%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221803%22%20cy%3D%22803%22%20r%3D%221.05%22%20fill-opacity%3D%220.146%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221301%22%20cy%3D%2252%22%20r%3D%220.51%22%20fill-opacity%3D%220.298%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22892%22%20cy%3D%22552%22%20r%3D%220.69%22%20fill-opacity%3D%220.194%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22796%22%20cy%3D%22765%22%20r%3D%220.81%22%20fill-opacity%3D%220.186%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22337%22%20cy%3D%22155%22%20r%3D%220.55%22%20fill-opacity%3D%220.109%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221280%22%20cy%3D%22161%22%20r%3D%222.86%22%20fill-opacity%3D%220.300%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221778%22%20cy%3D%22721%22%20r%3D%220.97%22%20fill-opacity%3D%220.127%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22481%22%20cy%3D%22888%22%20r%3D%222.87%22%20fill-opacity%3D%220.092%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221769%22%20cy%3D%22821%22%20r%3D%220.68%22%20fill-opacity%3D%220.299%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221329%22%20cy%3D%221187%22%20r%3D%221.49%22%20fill-opacity%3D%220.224%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22354%22%20cy%3D%22195%22%20r%3D%221.05%22%20fill-opacity%3D%220.076%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221694%22%20cy%3D%22474%22%20r%3D%222.65%22%20fill-opacity%3D%220.151%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22892%22%20cy%3D%22631%22%20r%3D%222.71%22%20fill-opacity%3D%220.118%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22698%22%20cy%3D%22943%22%20r%3D%221.76%22%20fill-opacity%3D%220.083%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221305%22%20cy%3D%22148%22%20r%3D%221.80%22%20fill-opacity%3D%220.281%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221663%22%20cy%3D%22825%22%20r%3D%221.92%22%20fill-opacity%3D%220.266%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2276%22%20cy%3D%22856%22%20r%3D%222.42%22%20fill-opacity%3D%220.145%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22962%22%20cy%3D%22575%22%20r%3D%222.43%22%20fill-opacity%3D%220.121%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22726%22%20cy%3D%22430%22%20r%3D%220.51%22%20fill-opacity%3D%220.201%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221486%22%20cy%3D%22136%22%20r%3D%220.56%22%20fill-opacity%3D%220.156%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22365%22%20cy%3D%22896%22%20r%3D%222.61%22%20fill-opacity%3D%220.130%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22610%22%20cy%3D%22835%22%20r%3D%221.14%22%20fill-opacity%3D%220.250%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221005%22%20cy%3D%22422%22%20r%3D%220.51%22%20fill-opacity%3D%220.279%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22843%22%20cy%3D%22343%22%20r%3D%221.67%22%20fill-opacity%3D%220.102%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221259%22%20cy%3D%22989%22%20r%3D%220.63%22%20fill-opacity%3D%220.126%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221837%22%20cy%3D%221160%22%20r%3D%220.74%22%20fill-opacity%3D%220.217%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22129%22%20cy%3D%22584%22%20r%3D%221.84%22%20fill-opacity%3D%220.251%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221621%22%20cy%3D%22555%22%20r%3D%220.58%22%20fill-opacity%3D%220.124%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221401%22%20cy%3D%22298%22%20r%3D%222.10%22%20fill-opacity%3D%220.224%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22659%22%20cy%3D%221185%22%20r%3D%220.69%22%20fill-opacity%3D%220.297%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221115%22%20cy%3D%22950%22%20r%3D%220.87%22%20fill-opacity%3D%220.238%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221369%22%20cy%3D%22103%22%20r%3D%220.87%22%20fill-opacity%3D%220.159%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22339%22%20cy%3D%22643%22%20r%3D%220.61%22%20fill-opacity%3D%220.197%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221105%22%20cy%3D%22362%22%20r%3D%220.72%22%20fill-opacity%3D%220.151%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2287%22%20cy%3D%22614%22%20r%3D%220.50%22%20fill-opacity%3D%220.288%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2244%22%20cy%3D%22150%22%20r%3D%221.05%22%20fill-opacity%3D%220.250%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221643%22%20cy%3D%22222%22%20r%3D%223.02%22%20fill-opacity%3D%220.144%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22246%22%20cy%3D%22333%22%20r%3D%220.81%22%20fill-opacity%3D%220.179%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22598%22%20cy%3D%2288%22%20r%3D%222.12%22%20fill-opacity%3D%220.077%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22582%22%20cy%3D%22437%22%20r%3D%221.51%22%20fill-opacity%3D%220.172%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221546%22%20cy%3D%22885%22%20r%3D%222.16%22%20fill-opacity%3D%220.178%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221656%22%20cy%3D%22367%22%20r%3D%221.00%22%20fill-opacity%3D%220.244%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22643%22%20cy%3D%22465%22%20r%3D%222.17%22%20fill-opacity%3D%220.215%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22527%22%20cy%3D%22443%22%20r%3D%220.60%22%20fill-opacity%3D%220.200%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22784%22%20cy%3D%22780%22%20r%3D%221.31%22%20fill-opacity%3D%220.175%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22147%22%20cy%3D%221014%22%20r%3D%222.46%22%20fill-opacity%3D%220.209%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221330%22%20cy%3D%22102%22%20r%3D%220.51%22%20fill-opacity%3D%220.080%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22671%22%20cy%3D%22406%22%20r%3D%220.51%22%20fill-opacity%3D%220.298%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221095%22%20cy%3D%22171%22%20r%3D%222.75%22%20fill-opacity%3D%220.253%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22889%22%20cy%3D%22164%22%20r%3D%220.52%22%20fill-opacity%3D%220.161%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2221%22%20cy%3D%22588%22%20r%3D%220.86%22%20fill-opacity%3D%220.288%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22400%22%20cy%3D%22909%22%20r%3D%221.26%22%20fill-opacity%3D%220.105%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22113%22%20cy%3D%22495%22%20r%3D%220.50%22%20fill-opacity%3D%220.273%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2273%22%20cy%3D%22703%22%20r%3D%221.82%22%20fill-opacity%3D%220.082%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22335%22%20cy%3D%22759%22%20r%3D%220.59%22%20fill-opacity%3D%220.248%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221424%22%20cy%3D%22604%22%20r%3D%220.50%22%20fill-opacity%3D%220.109%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221362%22%20cy%3D%22930%22%20r%3D%221.23%22%20fill-opacity%3D%220.215%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22333%22%20cy%3D%22502%22%20r%3D%221.74%22%20fill-opacity%3D%220.099%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22610%22%20cy%3D%22518%22%20r%3D%220.51%22%20fill-opacity%3D%220.181%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22164%22%20cy%3D%22781%22%20r%3D%221.35%22%20fill-opacity%3D%220.169%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22660%22%20cy%3D%22370%22%20r%3D%220.73%22%20fill-opacity%3D%220.117%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22409%22%20cy%3D%22828%22%20r%3D%222.58%22%20fill-opacity%3D%220.156%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22993%22%20cy%3D%22999%22%20r%3D%220.74%22%20fill-opacity%3D%220.233%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22659%22%20cy%3D%22464%22%20r%3D%222.73%22%20fill-opacity%3D%220.146%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221539%22%20cy%3D%22827%22%20r%3D%221.10%22%20fill-opacity%3D%220.252%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22320%22%20cy%3D%22252%22%20r%3D%220.51%22%20fill-opacity%3D%220.269%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221602%22%20cy%3D%22268%22%20r%3D%220.74%22%20fill-opacity%3D%220.209%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2257%22%20cy%3D%22496%22%20r%3D%220.55%22%20fill-opacity%3D%220.190%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22489%22%20cy%3D%22544%22%20r%3D%220.89%22%20fill-opacity%3D%220.225%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221191%22%20cy%3D%22455%22%20r%3D%223.01%22%20fill-opacity%3D%220.202%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221027%22%20cy%3D%22370%22%20r%3D%220.69%22%20fill-opacity%3D%220.262%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22961%22%20cy%3D%221180%22%20r%3D%221.12%22%20fill-opacity%3D%220.196%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22617%22%20cy%3D%221197%22%20r%3D%220.86%22%20fill-opacity%3D%220.272%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22503%22%20cy%3D%221196%22%20r%3D%220.51%22%20fill-opacity%3D%220.237%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22783%22%20cy%3D%22681%22%20r%3D%220.77%22%20fill-opacity%3D%220.251%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22543%22%20cy%3D%22361%22%20r%3D%223.07%22%20fill-opacity%3D%220.290%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22394%22%20cy%3D%22776%22%20r%3D%220.72%22%20fill-opacity%3D%220.151%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221415%22%20cy%3D%22705%22%20r%3D%220.51%22%20fill-opacity%3D%220.246%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22306%22%20cy%3D%221040%22%20r%3D%221.49%22%20fill-opacity%3D%220.165%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221515%22%20cy%3D%2251%22%20r%3D%222.23%22%20fill-opacity%3D%220.293%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221081%22%20cy%3D%22239%22%20r%3D%220.50%22%20fill-opacity%3D%220.265%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221674%22%20cy%3D%22960%22%20r%3D%220.54%22%20fill-opacity%3D%220.252%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221761%22%20cy%3D%22493%22%20r%3D%220.52%22%20fill-opacity%3D%220.091%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221152%22%20cy%3D%221147%22%20r%3D%221.79%22%20fill-opacity%3D%220.220%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22204%22%20cy%3D%221007%22%20r%3D%221.44%22%20fill-opacity%3D%220.264%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22927%22%20cy%3D%22819%22%20r%3D%220.53%22%20fill-opacity%3D%220.172%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221210%22%20cy%3D%22156%22%20r%3D%221.24%22%20fill-opacity%3D%220.155%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22409%22%20cy%3D%22604%22%20r%3D%221.76%22%20fill-opacity%3D%220.124%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2269%22%20cy%3D%22305%22%20r%3D%220.62%22%20fill-opacity%3D%220.161%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221104%22%20cy%3D%22477%22%20r%3D%220.50%22%20fill-opacity%3D%220.189%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22924%22%20cy%3D%22467%22%20r%3D%220.50%22%20fill-opacity%3D%220.163%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221477%22%20cy%3D%22424%22%20r%3D%220.63%22%20fill-opacity%3D%220.259%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22128%22%20cy%3D%221104%22%20r%3D%220.79%22%20fill-opacity%3D%220.192%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221867%22%20cy%3D%221014%22%20r%3D%220.69%22%20fill-opacity%3D%220.224%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221068%22%20cy%3D%2284%22%20r%3D%223.01%22%20fill-opacity%3D%220.121%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22659%22%20cy%3D%2243%22%20r%3D%220.58%22%20fill-opacity%3D%220.197%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221600%22%20cy%3D%22390%22%20r%3D%220.50%22%20fill-opacity%3D%220.300%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221342%22%20cy%3D%221049%22%20r%3D%221.98%22%20fill-opacity%3D%220.143%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%2255%22%20cy%3D%22955%22%20r%3D%220.95%22%20fill-opacity%3D%220.087%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22828%22%20cy%3D%22245%22%20r%3D%220.52%22%20fill-opacity%3D%220.231%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22424%22%20cy%3D%221060%22%20r%3D%222.50%22%20fill-opacity%3D%220.282%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22902%22%20cy%3D%221046%22%20r%3D%220.63%22%20fill-opacity%3D%220.272%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221161%22%20cy%3D%22598%22%20r%3D%220.93%22%20fill-opacity%3D%220.135%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22856%22%20cy%3D%22880%22%20r%3D%222.34%22%20fill-opacity%3D%220.261%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221678%22%20cy%3D%22453%22%20r%3D%220.56%22%20fill-opacity%3D%220.281%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22290%22%20cy%3D%221045%22%20r%3D%220.53%22%20fill-opacity%3D%220.223%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22291%22%20cy%3D%2290%22%20r%3D%221.00%22%20fill-opacity%3D%220.153%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22282%22%20cy%3D%22204%22%20r%3D%222.74%22%20fill-opacity%3D%220.165%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221187%22%20cy%3D%22461%22%20r%3D%222.28%22%20fill-opacity%3D%220.121%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221130%22%20cy%3D%2256%22%20r%3D%220.87%22%20fill-opacity%3D%220.192%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221865%22%20cy%3D%22839%22%20r%3D%220.58%22%20fill-opacity%3D%220.286%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221128%22%20cy%3D%22269%22%20r%3D%220.81%22%20fill-opacity%3D%220.153%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221589%22%20cy%3D%22862%22%20r%3D%220.51%22%20fill-opacity%3D%220.233%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221887%22%20cy%3D%22709%22%20r%3D%220.61%22%20fill-opacity%3D%220.113%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221664%22%20cy%3D%22430%22%20r%3D%220.58%22%20fill-opacity%3D%220.199%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221635%22%20cy%3D%221048%22%20r%3D%221.18%22%20fill-opacity%3D%220.090%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22337%22%20cy%3D%22937%22%20r%3D%220.64%22%20fill-opacity%3D%220.167%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221680%22%20cy%3D%22201%22%20r%3D%220.84%22%20fill-opacity%3D%220.284%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221060%22%20cy%3D%22425%22%20r%3D%220.83%22%20fill-opacity%3D%220.297%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221861%22%20cy%3D%22241%22%20r%3D%223.04%22%20fill-opacity%3D%220.213%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22986%22%20cy%3D%22761%22%20r%3D%220.77%22%20fill-opacity%3D%220.188%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221577%22%20cy%3D%22730%22%20r%3D%221.41%22%20fill-opacity%3D%220.137%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221165%22%20cy%3D%22730%22%20r%3D%220.50%22%20fill-opacity%3D%220.171%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221074%22%20cy%3D%22234%22%20r%3D%221.00%22%20fill-opacity%3D%220.171%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22810%22%20cy%3D%22364%22%20r%3D%221.12%22%20fill-opacity%3D%220.105%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22568%22%20cy%3D%22308%22%20r%3D%222.72%22%20fill-opacity%3D%220.089%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22406%22%20cy%3D%2252%22%20r%3D%220.55%22%20fill-opacity%3D%220.218%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22518%22%20cy%3D%22783%22%20r%3D%221.00%22%20fill-opacity%3D%220.168%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22337%22%20cy%3D%22836%22%20r%3D%221.32%22%20fill-opacity%3D%220.141%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221470%22%20cy%3D%22853%22%20r%3D%221.42%22%20fill-opacity%3D%220.211%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22734%22%20cy%3D%22278%22%20r%3D%221.86%22%20fill-opacity%3D%220.244%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221269%22%20cy%3D%22915%22%20r%3D%222.70%22%20fill-opacity%3D%220.194%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221474%22%20cy%3D%221139%22%20r%3D%220.92%22%20fill-opacity%3D%220.139%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221285%22%20cy%3D%221126%22%20r%3D%221.54%22%20fill-opacity%3D%220.084%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22757%22%20cy%3D%22254%22%20r%3D%220.68%22%20fill-opacity%3D%220.179%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22182%22%20cy%3D%22469%22%20r%3D%220.60%22%20fill-opacity%3D%220.240%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221449%22%20cy%3D%22894%22%20r%3D%220.83%22%20fill-opacity%3D%220.262%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22224%22%20cy%3D%22556%22%20r%3D%220.92%22%20fill-opacity%3D%220.229%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%221226%22%20cy%3D%2256%22%20r%3D%221.99%22%20fill-opacity%3D%220.140%22%3E%3C%2Fcircle%3E%3Ccircle%20cx%3D%22303%22%20cy%3D%22453%22%20r%3D%220.61%22%20fill-opacity%3D%220.284%22%3E%3C%2Fcircle%3E%3C%2Fg%3E%3C%2Fsvg%3E"),
    radial-gradient(58% 46% at 86% 84%, rgba(62, 74, 92, 0.13), transparent 70%),
    radial-gradient(38% 32% at 8% 6%, rgba(62, 74, 92, 0.1), transparent 75%),
    linear-gradient(160deg, var(--slab-hi), var(--slab-lo));
  background-size: 140px 140px, 420px 420px, 100% 100%, cover, 100% 100%, 100% 100%, 100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 1px 0 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    inset -1px 0 0 rgba(0, 0, 0, 0.14),
    inset 0 0 30px rgba(44, 54, 70, 0.12),
    5px 6px 0 -1px var(--slab-edge),
    5px 6px 0 0 rgba(0, 0, 0, 0.28),
    0 16px 30px -14px rgba(0, 0, 0, 0.6);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
html[data-mode="marble"] .rel-card,
html[data-mode="marble"] .codex__row {
  --slab-hi: #E8EBEE;
  --slab-lo: #D7DCE1;
  --slab-edge: #ACB3BB;
}
/* heavy stone barely settles off-axis, squares up on hover */
.rel-grid .rel-card:nth-child(odd)  { transform: rotate(-0.25deg); }
.rel-grid .rel-card:nth-child(even) { transform: rotate(0.2deg); }
.rel-grid .rel-card:nth-child(3n)   { transform: rotate(-0.1deg); }
.codex .codex__row:nth-child(odd)  { transform: rotate(-0.12deg); }
.codex .codex__row:nth-child(even) { transform: rotate(0.1deg); }
/* terminal spinner wakes in the corner under the cursor */
.rel-card::before,
.codex__row::after {
  content: "|";
  position: absolute;
  top: 9px;
  right: 12px;
  width: 1ch;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1;
  color: color-mix(in oklab, var(--accent) 80%, #171B21);
  opacity: 0;
  transition: opacity 0.2s ease;
}
.rel-card--reserved::before { display: none; }
.rel-card:not(.rel-card--reserved):hover::before,
a.rel-card:focus-visible::before,
.codex__row:hover::after,
.codex__row:focus-within::after {
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .rel-card:not(.rel-card--reserved):hover::before,
  a.rel-card:focus-visible::before,
  .codex__row:hover::after,
  .codex__row:focus-within::after {
    animation: term-spin 0.55s steps(1) infinite;
  }
}
/* the raise */
.rel-card:not(.rel-card--reserved):hover,
.codex__row:hover,
.codex__row:focus-within {
  transform: translateY(-4px) rotate(0deg) scale(1.006);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 1px 0 0 rgba(255, 255, 255, 0.26),
    inset 0 -1px 0 rgba(0, 0, 0, 0.22),
    inset -1px 0 0 rgba(0, 0, 0, 0.14),
    inset 0 0 30px rgba(44, 54, 70, 0.12),
    7px 9px 0 -1px var(--slab-edge),
    7px 9px 0 0 rgba(0, 0, 0, 0.28),
    0 26px 42px -16px rgba(0, 0, 0, 0.65);
}
/* engraved lettering */
.rel-card__name,
.codex__title { color: var(--slab-ink); text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45); }
.rel-card__name a { color: inherit; text-decoration: none; }
.rel-card__name a:hover { color: color-mix(in oklab, var(--accent) 70%, #171B21); }
.rel-card__desc { color: var(--slab-faint); }
.rel-card__foot {
  color: var(--slab-faint);
  border-top: 1px solid rgba(24, 28, 34, 0.16);
  padding-top: 12px;
}
.rel-card .rel-card__arrow { color: var(--slab-faint); }
a.rel-card:hover .rel-card__arrow {
  color: color-mix(in oklab, var(--accent) 70%, #171B21);
  transform: translateX(4px);
}
.rel-card__git {
  color: var(--slab-ink);
  text-decoration: underline;
  text-decoration-color: rgba(24, 28, 34, 0.3);
  text-underline-offset: 3px;
}
.rel-card__git:hover { color: color-mix(in oklab, var(--accent) 70%, #171B21); text-decoration-color: currentColor; }
/* install box: copy button on top, command below */
.rel-card__term {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 2px 0 4px;
  max-width: none;
  background: rgba(24, 28, 34, 0.06);
  border: 1px solid rgba(24, 28, 34, 0.18);
  padding: 10px 12px;
}
.rel-card__term-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.rel-card__term-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--slab-faint);
}
.rel-card__term .term__copy {
  color: var(--slab-faint);
  border-color: rgba(24, 28, 34, 0.32);
  min-height: 26px;
  padding: 3px 9px;
}
.rel-card__term .term__copy:hover,
.rel-card__term .term__copy.is-copied {
  color: color-mix(in oklab, var(--accent) 70%, #171B21);
  border-color: color-mix(in oklab, var(--accent) 60%, #171B21);
}
.rel-card__term .term__cmd { color: var(--slab-ink); font-size: 12.5px; }
.term__copy--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px 7px;
}
.term__copy--icon svg { display: block; }
.rel-card__git { display: inline-flex; align-items: center; text-decoration: none; }
.rel-card__git svg { display: block; }
/* optional media slot on a card */
.rel-card__media { border: 1px solid rgba(24, 28, 34, 0.18); }
.rel-card__media img { display: block; width: 100%; height: auto; }
/* reserved slot: painted stamp on stone */
.rel-card--reserved { border: none; }
.rel-card--reserved .rel-card__name {
  align-self: flex-start;
  color: #A8333F;
  border: 2px solid rgba(168, 51, 63, 0.6);
  border-radius: 2px;
  padding: 4px 12px;
  transform: rotate(-3.5deg);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-shadow: none;
  opacity: 0.9;
}
/* research index rows ride the same stone, horizontally */
.codex { display: grid; gap: 16px; border-bottom: none; padding: 0; }
.codex__row { border-top: none; padding: 20px 24px 20px 28px; cursor: pointer; }
.rel-card--rich { cursor: pointer; }
.codex__date { color: var(--slab-faint); }
.codex__title a { color: color-mix(in oklab, var(--accent) 78%, #171B21); }
.codex__title a:hover { color: color-mix(in oklab, var(--accent) 95%, #171B21); }
.codex__desc { color: var(--slab-faint); }

/* ---------- short viewports: rail tightens instead of clipping ---------- */
@media (max-height: 720px) {
  .spine { padding: 16px 0; }
  .spine__line { margin-top: 12px; margin-bottom: 12px; }
  .spine__num { min-height: 32px; }
  .spine__current { margin-top: 10px; }
  .spine__pages { margin-top: 12px; }
  .spine__pages a { min-height: 28px; }
}

/* ---------- charts (40charts.js) ---------- */
.chart svg { display: block; width: 100%; height: auto; }

/* ===== deploy appendix (not in the design source): form states, hp, charts ===== */

/* honeypot field (web-agency inquiry form): off-screen for humans, present for bots */
.hp-field {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

/* inquiry status line — created by 40second.js inside .inquiry__foot;
   matches the .inquiry__alt mono look, hidden while empty so the resting
   layout is unchanged */
.inquiry__status {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
}
.inquiry__status:empty { display: none; }
.inquiry__status--err { color: var(--accent-ink); }

/* invalid field: mirrors the .field__input focus border (1px, accent) */
.field.err .field__input { border-color: var(--accent); }

/* sent state: the grid and the send row give way; the status line remains */
form.inquiry.sent .inquiry__grid,
form.inquiry.sent .inquiry__send,
form.inquiry.sent .inquiry__alt { display: none; }

/* chart vocabulary additions for 40charts.js — colors only via design tokens
   (the base .ch-grid/.ch-axis/.ch-label/.ch-title/.ch-dot live in the design
   source above) */
.chart .ch-stroke-accent  { stroke: var(--accent); }
.chart .ch-stroke-splotch { stroke: var(--splotch); }
.chart .ch-stroke-ochre   { stroke: var(--ochre); }
.chart .ch-stroke-moss    { stroke: var(--moss); }
.chart .ch-stroke-muted   { stroke: var(--muted); }
.chart .ch-fill-accent  { fill: var(--accent); }
.chart .ch-fill-splotch { fill: var(--splotch); }
.chart .ch-fill-ochre   { fill: var(--ochre); }
.chart .ch-fill-moss    { fill: var(--moss); }
.chart .ch-fill-muted   { fill: var(--muted); }
.chart .ch-ref  { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 4 5; }
.chart .ch-glow { opacity: 0.14; }