/* ==========================================================================
   TKCH v2 — section compositions and product visuals.
   Owner: Claude 1. Order: hero → RelayDen → projects (shared) → LOLSKINSFORUS →
   Firefox Session MCP → SygnalistaFB → OpusLokalny → team.
   ========================================================================== */

/* Shared inner width for my sections */
.hero__inner, .hero__reel ol, .relay__head, .relay-story, .relay-arch, .relay-stats, .relay-spec, .relay-cta,
.project__inner, .team__inner {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ======================================================================
   HERO
   ====================================================================== */
.hero {
  position: relative;
  overflow: clip;
  padding-top: calc(var(--header-h) + clamp(2rem, 1rem + 4vw, 5rem));
  --bg-art:
    radial-gradient(60vw 40vw at 82% 38%, rgb(46 99 255 / 0.22), transparent 70%),
    radial-gradient(40vw 30vw at 8% 100%, rgb(255 91 31 / 0.12), transparent 70%);
}
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 5.4fr) minmax(0, 6.6fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  min-height: min(78vh, 860px);
}
.hero__copy { position: relative; z-index: 2; display: grid; gap: clamp(1.25rem, 1rem + 1vw, 2rem); align-content: center; }
.hero__lead { color: var(--fg-muted); max-width: 40ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }

/* Stack of real windows. Positions are relative to the stage; the RelayDen window is the anchor. */
.hero__stage {
  position: relative;
  aspect-ratio: 16 / 11.5;
  margin-right: calc(var(--gutter) * -1 - max(0px, (100vw - var(--maxw) - 2 * var(--gutter)) / 2));
}
.hero__win { position: absolute; margin: 0; }
.hero__win--relay {
  left: 0;
  top: 13%;
  width: min(92%, 1040px);
  z-index: 3;
}
.hero__win--deck {
  left: 30%;
  top: 0;
  width: 66%;
  z-index: 1;
  opacity: 0.8;
  filter: saturate(1.1) brightness(0.72);
}
.hero__win--opus {
  left: 60%;
  top: 56%;
  width: 46%;
  z-index: 2;
  opacity: 0.9;
  filter: brightness(0.8);
}
.hero__win--relay.glow::before {
  inset: -18% -10%;
  background: radial-gradient(closest-side, rgb(46 99 255 / 0.55), transparent 72%);
}

/* Floating delivery card (real RelayDen vocabulary) */
.hero__toast {
  position: absolute;
  left: -5%;
  bottom: 2%;
  z-index: 4;
  display: grid;
  gap: 0.45rem;
  width: min(23rem, 70%);
  padding: 0.95rem 1.05rem 1rem;
  border-radius: 14px;
  background: rgb(9 13 26 / 0.86);
  border: 1px solid rgb(126 162 255 / 0.28);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.7), 0 0 0 1px rgb(255 255 255 / 0.03) inset;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #e9eeff;
}
.hero__toast::before {
  content: "";
  position: absolute;
  inset: 0 18px auto;
  height: 2px;
  border-radius: 2px;
  background: var(--spectrum);
}
.hero__toast-head { font-family: var(--mono); font-size: 0.6875rem; color: rgb(233 238 255 / 0.66); }
.hero__toast-head b { color: #ffb08a; font-weight: 500; }
.hero__toast-text { font-size: 0.9375rem; line-height: 1.4; font-weight: 550; }
.hero__toast-states { display: flex; flex-wrap: wrap; gap: 0.35rem; }

/* Project reel at the bottom of the hero */
.hero__reel { position: relative; z-index: 2; margin-top: clamp(3rem, 2rem + 4vw, 6rem); padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.hero__reel ol {
  list-style: none;
  margin-block: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.75rem;
}
.hero__reel a {
  --c: var(--fg);
  position: relative;
  display: grid;
  gap: 0.2rem;
  height: 100%;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 12px;
  background: rgb(255 255 255 / 0.04);
  text-decoration: none;
  overflow: hidden;
  transition: background-color var(--dur-s), transform var(--dur-m) var(--ease-out);
}
.hero__reel a::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--c);
  transition: width var(--dur-m) var(--ease-out);
}
.hero__reel a:hover { background: rgb(255 255 255 / 0.08); transform: translateY(-2px); }
.hero__reel a:hover::before { width: 6px; }
.hero__reel a[data-c="relay"] { --c: var(--c-cobalt-soft); }
.hero__reel a[data-c="deck"] { --c: var(--c-gold); }
.hero__reel a[data-c="probe"] { --c: var(--c-cyan); }
.hero__reel a[data-c="archive"] { --c: #ff8a9a; }
.hero__reel a[data-c="reel"] { --c: var(--c-mint); }
.hero__reel-n { font-family: var(--mono); font-size: 0.6875rem; color: var(--c); }
.hero__reel b { font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.hero__reel span:last-child { font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.35; }

@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: 1fr; min-height: 0; }
  .hero__stage { margin-right: calc(var(--gutter) * -1); aspect-ratio: 16 / 12; margin-top: 1rem; }
  .hero__win--relay { width: 94%; top: 10%; }
  .hero__toast { left: 2%; bottom: -2%; }
}
@media (max-width: 900px) {
  .hero__reel ol {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: 0.5rem;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  .hero__reel ol::-webkit-scrollbar { display: none; }
  .hero__reel li { flex: 0 0 min(15rem, 70vw); scroll-snap-align: start; }
}
@media (max-width: 640px) {
  /* Phone: one real window in normal flow, the delivery card tucked under it */
  .hero__stage { aspect-ratio: auto; margin-right: 0; margin-top: 0.5rem; }
  .hero__win { position: relative; }
  .hero__win--deck, .hero__win--opus { display: none; }
  .hero__win--relay { width: 100%; top: 0; }
  .hero__toast { position: relative; left: auto; bottom: auto; width: auto; margin: -2.25rem 0.75rem 0; }
}


/* ======================================================================
   RELAYDEN
   ====================================================================== */
.relay {
  position: relative;
  overflow: clip;
  padding-block: var(--section-y);
  --bg-art:
    radial-gradient(70vw 40vw at 50% 0%, rgb(46 99 255 / 0.26), transparent 70%),
    radial-gradient(50vw 30vw at 100% 60%, rgb(124 92 255 / 0.12), transparent 70%);
}
.relay__head { display: grid; gap: 1.5rem; }
.relay__title {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.75rem);
  margin-left: -0.04em;
}
.relay__title img { width: 0.72em; height: 0.72em; flex: none; filter: drop-shadow(0 0 40px rgb(46 99 255 / 0.55)); }
.relay__intro { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; }
.relay__intro .lede { max-width: 52ch; font-size: var(--fs-lg); line-height: 1.35; letter-spacing: -0.01em; }
.relay__meta { font-family: var(--mono); font-size: var(--fs-sm); color: var(--fg-muted); justify-self: end; }
@media (max-width: 860px) {
  .relay__intro { grid-template-columns: 1fr; }
  .relay__meta { justify-self: start; }
}

/* Story.
   Default (no JS, reduced motion, touch, < 1000 px): four steps in normal flow, each with a crop
   of the real screenshot. With the motion system (html.motion-on): one window on the left that
   GSAP pins and zooms through the four facts, steps stacked on the right. */
.relay-story { margin-top: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.relay-story__stage { display: none; }
.relay-story__steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem var(--gutter);
}
.relay-step { display: grid; align-content: start; gap: 0.9rem; }
.relay-step__n { font-family: var(--mono); font-size: var(--fs-sm); color: var(--accent); }
.relay-step p { color: var(--fg-muted); max-width: 46ch; }
.relay-step code { color: var(--fg); }
.relay-step__states { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.relay-step__crop {
  order: -1;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-window);
}
.relay-step__crop img { width: 100%; height: 100%; object-fit: cover; }
.relay-step__crop--1 img { object-position: 60% 18%; transform: scale(1.5); transform-origin: 62% 22%; }
.relay-step__crop--2 img { object-position: 30% 40%; transform: scale(2.2); transform-origin: 34% 36%; }
.relay-step__crop--3 img { object-position: 50% 55%; transform: scale(1.9); transform-origin: 49% 57%; }
.relay-step__crop--4 img { object-position: 0% 70%; transform: scale(1.9); transform-origin: 0% 72%; }
.relay-story__note { margin-top: 1.5rem; font-size: var(--fs-sm); color: var(--fg-muted); max-width: 60ch; }
@media (max-width: 700px) { .relay-story__steps { grid-template-columns: 1fr; } }

/* Side-by-side variant (desktop, fine pointer, motion allowed): the product window stays put with
   CSS position: sticky while the four steps scroll past it natively on the right. The focus frame
   walks to the part of the real UI each step talks about; step 3 swaps to the delivery popover.
   No pin, no scrub: the page scrolls exactly as fast as the reader does. */
@media (min-width: 1000px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .relay-story {
    display: grid;
    grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
  }
  .relay-story__stage {
    display: block;
    position: sticky;
    top: calc(var(--header-h) + max(20px, (100vh - var(--header-h) - 38vw) / 2));
    /* never taller than the space under the header (window = 34 px bar + 16:10 screenshot) */
    max-width: calc((100vh - var(--header-h) - 40px - 34px) * 1.6);
  }
  .relay-story__shots { position: relative; overflow: hidden; }
  .relay-story__shot { display: block; }
  .relay-story__shot--delivery { position: absolute; inset: 0; opacity: 0; transition: opacity 0.5s var(--ease-out); }
  .relay-story__window[data-step="3"] .relay-story__shot--delivery { opacity: 1; }
  /* One fixed frame per step, cross-faded: nothing moves or resizes, so no layout shift. */
  .relay-story__focus {
    display: block;
    position: absolute;
    border-radius: 10px;
    box-shadow: 0 0 0 2px var(--c-cobalt-soft), 0 0 0 9999px rgb(3 6 16 / 0.5), 0 0 40px 4px rgb(46 99 255 / 0.45);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s var(--ease-out);
  }
  .relay-story__focus[data-f="1"] { left: 18.5%; top: 14.8%; width: 77.5%; height: 15.6%; }
  .relay-story__focus[data-f="2"] { left: 21.6%; top: 33.6%; width: 31.6%; height: 3.8%; }
  .relay-story__focus[data-f="3"] { left: 37.3%; top: 40.4%; width: 24.2%; height: 33.6%; }
  .relay-story__focus[data-f="4"] { left: 0.4%; top: 46.4%; width: 16.8%; height: 44.8%; }
  .relay-story__window[data-step="1"] .relay-story__focus[data-f="1"],
  .relay-story__window[data-step="2"] .relay-story__focus[data-f="2"],
  .relay-story__window[data-step="3"] .relay-story__focus[data-f="3"],
  .relay-story__window[data-step="4"] .relay-story__focus[data-f="4"] { opacity: 1; }
  .relay-story__steps { grid-template-columns: 1fr; gap: 0; }
  .relay-step {
    min-height: 58vh;
    align-content: center;
    padding-block: 2rem;
    transition: opacity 0.45s var(--ease-out);
  }
  .js .relay-step:not([data-active]) { opacity: 0.35; }
  /* The last fact sits high in its box, so the window stays while it is read and lets go right after. */
  .relay-step:last-child { align-content: start; padding-top: 12vh; }
  .relay-step__crop { display: none; }
}

/* Architecture map */
.relay-arch { margin-top: clamp(4rem, 3rem + 4vw, 7rem); }
.relay-arch__head { display: grid; gap: 1rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.relay-arch__map {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.relay-arch__wires {
  position: absolute;
  inset: 2.2rem 0 0;
  width: 100%;
  height: calc(100% - 2.2rem);
  fill: none;
  stroke: rgb(126 162 255 / 0.35);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
  pointer-events: none;
}
.relay-arch__wires path { stroke-dasharray: 4 6; vector-effect: non-scaling-stroke; }
@media (prefers-reduced-motion: no-preference) {
  .relay-arch__wires path { animation: wire 1.6s linear infinite; }
}
@keyframes wire { to { stroke-dashoffset: -20; } }
.relay-arch__col { position: relative; z-index: 1; display: grid; gap: 0.6rem; }
.relay-arch__col--core { padding-top: 2.4rem; }
.relay-arch__label { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 0.4rem; }
.relay-arch__col--core .relay-arch__label { margin-top: -2.4rem; }
.arch-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgb(12 18 36 / 0.92);
  color: var(--fg);
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
  transition: border-color var(--dur-s), background-color var(--dur-s), opacity 0.35s, transform 0.35s var(--ease-out);
}
.arch-node small { font-family: var(--mono); font-size: 0.7rem; font-weight: 400; color: var(--accent); }
.arch-node:hover { border-color: var(--accent); transform: translateY(-1px); }
.arch-node--core { min-height: 76px; background: linear-gradient(180deg, rgb(46 99 255 / 0.28), rgb(46 99 255 / 0.12)); border-color: rgb(126 162 255 / 0.5); font-size: 1.05rem; }
.arch-node[aria-expanded="true"] { border-color: var(--accent); background: rgb(46 99 255 / 0.32); }
.relay-arch__map[data-focus] .arch-node:not([data-lit]) { opacity: 0.35; }
.relay-arch__detail {
  margin-top: 2rem;
  max-width: 62ch;
  min-height: 7.5rem;
  padding: 1.25rem 1.4rem;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
}
.relay-arch__detail h4 { font-size: var(--fs-md); margin-bottom: 0.5rem; letter-spacing: -0.01em; }
.relay-arch__detail p { color: var(--fg-muted); }
.relay-arch__detail code { color: var(--fg); }
@media (max-width: 900px) {
  .relay-arch__map { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .relay-arch__wires { display: none; }
  .relay-arch__col--core { padding-top: 0; }
  .relay-arch__col--core .relay-arch__label { margin-top: 0; }
}
@media (max-width: 520px) {
  .relay-arch__map { grid-template-columns: 1fr; gap: 1.5rem; }
  .relay-arch__col { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
  .relay-arch__label { grid-column: 1 / -1; margin-bottom: 0; }
  .arch-node { min-height: 48px; padding: 0.6rem 0.75rem; font-size: 0.875rem; }
  .arch-node--core { min-height: 56px; }
}

/* Stats */
.relay .relay-stats {
  list-style: none;
  padding-inline: var(--gutter);
  margin-block: clamp(3rem, 2rem + 3vw, 5rem) 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2rem var(--gutter);
}
.relay-stats .stat { padding-top: 1.25rem; border-top: 2px solid var(--line); }
.relay-stats .stat:first-child { border-top-color: var(--c-cobalt-soft); }
@media (max-width: 760px) { .relay .relay-stats { grid-template-columns: 1fr 1fr; } }

/* Spec details */
.relay-spec { margin-top: clamp(3rem, 2rem + 3vw, 5rem); }
.relay-spec summary,
.project__how summary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  transition: border-color var(--dur-s);
}
.relay-spec summary::-webkit-details-marker, .project__how summary::-webkit-details-marker { display: none; }
.relay-spec summary:hover, .project__how summary:hover { border-color: var(--fg); }
.relay-spec summary svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); }
.relay-spec[open] summary svg { transform: rotate(180deg); }
.relay-spec__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
  gap: 2.5rem var(--gutter);
  margin-top: 2rem;
}
.relay-spec__body h4 { font-family: var(--mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 1rem; }
.relay-spec__dl { display: grid; }
.relay-spec__dl div { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.relay-spec__dl dt { color: var(--fg-muted); }
.relay-spec__dl dd { font-family: var(--mono); font-size: var(--fs-xs); text-align: right; }
.relay-spec__tools { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.relay-spec__tools li { font-family: var(--mono); font-size: var(--fs-xs); padding: 0.35em 0.7em; border-radius: 8px; background: var(--surface-2); }
.relay-spec__limits { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.75rem; color: var(--fg-muted); font-size: var(--fs-sm); }
@media (max-width: 900px) { .relay-spec__body { grid-template-columns: 1fr; } }

.relay-cta {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: 2rem;
}
.relay-cta .h-sub { max-width: 22ch; }

/* ======================================================================
   PROJECTS — shared
   ====================================================================== */
.projects { background: var(--c-ink); }
.projects-head h2 { font-size: var(--fs-2xl); font-weight: 800; line-height: 0.95; letter-spacing: -0.045em; }
.projects-head p { margin-top: 1.25rem; max-width: 52ch; font-size: var(--fs-md); color: rgb(244 241 234 / 0.7); }
.projects-head {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin-inline: auto;
  padding: var(--section-y) var(--gutter) clamp(2.5rem, 4vw, 4rem);
}

.project { position: relative; overflow: clip; padding-block: clamp(4rem, 2.5rem + 5vw, 7.5rem); }
.project__name {
  font-size: clamp(3rem, 1rem + 7vw, 8.5rem);
  font-weight: 800;
  line-height: 0.88;
  letter-spacing: -0.055em;
  overflow-wrap: anywhere;
}
.project__text { color: var(--fg-muted); max-width: 54ch; }
.project__caption { margin-top: 0.9rem; font-size: var(--fs-sm); color: var(--fg-muted); max-width: 70ch; }
.project__facts { display: flex; flex-wrap: wrap; align-items: end; gap: 1.5rem 2.5rem; }
.project__facts--row { margin-top: clamp(3rem, 2rem + 3vw, 4.5rem); padding-top: 2rem; border-top: 1px solid var(--line); }
.project__facts--row .tags { margin-left: auto; max-width: 28rem; justify-content: flex-end; }
.project__how { margin-top: 2rem; }
.project__how summary { font-size: var(--fs-sm); }
.flow { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; counter-reset: flow; }
.flow li { position: relative; display: grid; gap: 0.2rem; padding: 0.9rem 1.2rem 1rem 0; border-top: 2px solid var(--accent); }
.flow li + li { padding-left: 1.2rem; }
.flow li + li::before { content: "→"; position: absolute; left: -0.4rem; top: 0.85rem; color: var(--accent); font-size: 0.9rem; }
.flow b { font-weight: 650; }
.flow span { font-family: var(--mono); font-size: 0.75rem; color: var(--fg-muted); }
@media (max-width: 760px) {
  .flow { grid-auto-flow: row; }
  .flow li, .flow li + li { padding-left: 0; }
  .flow li + li::before { display: none; }
}

.project__head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 1.25rem clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(2.25rem, 1.5rem + 2.5vw, 4rem); }
.project__head .eyebrow { grid-column: 1 / -1; }
.project__head .project__name { grid-column: 1; font-size: clamp(2.75rem, 0.8rem + 5.2vw, 6.75rem); }
.project__head-text { grid-column: 2; display: grid; gap: 1rem; }
@media (max-width: 900px) {
  .project__head { grid-template-columns: 1fr; }
  .project__head-text { grid-column: 1; }
}

.shot { position: relative; }

/* ---------- 02 LOLSKINSFORUS ---------- */
.project--deck {
  --bg-art:
    radial-gradient(60vw 40vw at 85% 30%, rgb(214 67 160 / 0.22), transparent 70%),
    radial-gradient(40vw 30vw at 70% 100%, rgb(231 179 75 / 0.14), transparent 70%);
}
.project__inner--split {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center;
}
.project__copy { display: grid; gap: 1.5rem; align-content: start; }
.project__copy .callouts { margin-top: 0.5rem; }
.project--deck .project__name { font-size: clamp(2.4rem, 0.4rem + 4.3vw, 4.6rem); color: var(--c-gold); overflow-wrap: normal; }
.project__visual { margin: 0; }
.project__visual--bleed { margin-right: calc(var(--gutter) * -1 - max(0px, (100vw - var(--maxw) - 2 * var(--gutter)) / 2)); }
.project__visual--bleed .window { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.marker--lol-1 { left: 6.4%; top: 20.6%; }
.marker--lol-2 { left: 71.2%; top: 39.8%; }
.marker--lol-3 { left: 20.5%; top: 71.4%; }
@media (max-width: 1000px) {
  .project__inner--split { grid-template-columns: 1fr; }
  .project__visual--bleed { order: -1; margin-right: calc(var(--gutter) * -1); }
}

/* ---------- 03 Firefox Session MCP ---------- */
.project--probe {
  --bg-art:
    radial-gradient(50vw 30vw at 15% 40%, rgb(44 224 194 / 0.12), transparent 70%);
}
.project--probe .project__name { color: var(--fg); }
.probe__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.probe__steps button {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 46px;
  padding: 0.4rem 1.1rem 0.4rem 0.45rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--fg-muted);
  font-weight: 600;
  transition: background-color var(--dur-s), color var(--dur-s), border-color var(--dur-s);
}
.probe__steps button span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--fg);
}
.probe__steps button:hover { color: var(--fg); border-color: var(--fg-muted); }
.probe__steps button[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
.probe__steps button[aria-selected="true"] span { background: var(--accent-fg); color: var(--accent); }

.probe__panel {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
  grid-template-areas: "browser term" "say say";
  align-items: start;
  gap: 1rem 1.25rem;
}
html:not(.js) .probe__panel + .probe__panel { margin-top: 2.5rem; }
.probe__browser { grid-area: browser; align-self: start; background: #f5f5f4; }
.probe__browser .window__bar { background: #e9e9e7; color: #45474b; border-bottom-color: #d8d8d5; }
.probe__browser .window__bar .dots i { background: #c4c4c1; }
.probe__url { padding: 0.15rem 0.7rem; border-radius: 6px; background: #fff; }
.probe__browser picture { position: relative; }
.probe__hit {
  position: absolute;
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--c-cyan), 0 0 0 6px rgb(44 224 194 / 0.25);
  pointer-events: none;
}
.probe__hit--pay { left: 10.8%; top: calc(34px + 64.5% * 0.905); width: 17.5%; height: 10.5%; }
.probe__hit--error { left: 10.5%; top: calc(34px + 79% * 0.905); width: 30%; height: 7.5%; box-shadow: 0 0 0 2px #ff6b5e, 0 0 0 6px rgb(255 107 94 / 0.25); }
.probe__hit--ok { box-shadow: 0 0 0 2px #3fc98a, 0 0 0 6px rgb(63 201 138 / 0.25); }
.probe__term {
  grid-area: term;
  margin: 0;
  padding: 1.15rem 1.3rem;
  border-radius: var(--radius-window);
  background: #061012;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-window);
  font-family: var(--mono);
  font-size: 0.78rem;
  line-height: 1.7;
  color: #b9d6d0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
}
.probe__term .p { color: var(--c-cyan); }
.probe__term .c { color: rgb(185 214 208 / 0.55); }
.probe__term .e { color: #ff8f84; }
.probe__term .k { color: #7cf0c0; }
.probe__say { grid-area: say; font-size: var(--fs-md); font-weight: 550; letter-spacing: -0.01em; }
.probe__say code { color: var(--accent); }
@media (max-width: 900px) {
  .probe__panel { grid-template-columns: 1fr; grid-template-areas: "say" "browser" "term"; }
  .probe__steps { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; }
  .probe__steps button { flex: none; }
}

/* Modules bar */
.modules { margin-top: clamp(3.5rem, 2.5rem + 3vw, 5.5rem); }
.modules__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.modules__presets { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.modules__presets button {
  min-height: 40px;
  padding: 0.3rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--fg);
  font-family: var(--mono);
  font-size: var(--fs-xs);
}
.modules__presets button span { color: var(--fg-muted); margin-left: 0.25rem; }
.modules__presets button[aria-pressed="true"] { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
.modules__presets button[aria-pressed="true"] span { color: var(--accent-fg); }
.modules__bar { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; min-height: 92px; }
.modules__bar li {
  flex: var(--w, 1) 1 0;
  min-width: 0;
  display: grid;
  align-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.5rem;
  border-radius: 6px;
  background: var(--surface);
  border-top: 3px solid var(--accent);
  overflow: hidden;
  transition: opacity 0.4s var(--ease-out), filter 0.4s, background-color 0.4s;
}
.modules__bar li[data-off] { opacity: 0.22; filter: grayscale(1); border-top-color: var(--line); }
.modules__bar b { font-family: var(--mono); font-weight: 400; font-size: 0.6875rem; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modules__bar span { font-size: var(--fs-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.modules__bar [data-w="27"] { --w: 27; } .modules__bar [data-w="19"] { --w: 19; } .modules__bar [data-w="16"] { --w: 16; }
.modules__bar [data-w="15"] { --w: 15; } .modules__bar [data-w="9"] { --w: 9; } .modules__bar [data-w="8"] { --w: 8; }
.modules__bar [data-w="7"] { --w: 7; } .modules__bar [data-w="4"] { --w: 5; } .modules__bar [data-w="3"] { --w: 5; }
.modules__bar [data-w="2"] { --w: 5; } .modules__bar [data-w="1"] { --w: 5; }
.modules__count { margin-top: 1rem; color: var(--fg-muted); font-size: var(--fs-sm); }
.modules__count b { color: var(--fg); }
@media (max-width: 760px) {
  .modules__bar { flex-wrap: wrap; }
  .modules__bar li { flex: 1 1 calc(25% - 3px); }
  .modules__bar span { font-size: var(--fs-base); }
}

/* ---------- 04 SygnalistaFB ---------- */
.project--archive .project__name { color: var(--fg); }
.project--archive .project__name::after { content: ""; display: inline-block; width: 0.16em; height: 0.16em; margin-left: 0.06em; background: var(--accent); }
.compare { margin: 0; }
.compare__frame {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  border-radius: var(--radius-window);
  overflow: hidden;
  box-shadow: var(--shadow-window);
}
.compare__pane { padding: clamp(1rem, 2.5vw, 1.75rem); min-width: 0; }
.compare__pane--before { background: #1b1a1f; color: #c9c4ba; }
.compare__pane--after { background: #fffdf8; color: #16161a; }
.compare__arrow {
  position: relative;
  display: grid;
  place-items: center;
  width: 3.25rem;
  background: linear-gradient(90deg, #1b1a1f 50%, #fffdf8 50%);
}
.compare__arrow::before {
  content: "";
  position: absolute;
  inset: 0 50%;
  width: 2px;
  margin-left: -1px;
  background: var(--accent);
}
.compare__arrow span {
  position: relative;
  writing-mode: vertical-rl;
  padding: 0.9rem 0.45rem;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}
.compare__label { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1rem; font-family: var(--mono); font-size: 0.6875rem; opacity: 0.8; }
.compare__label span { padding: 0.2em 0.6em; border-radius: 999px; }
.compare__pane--before .compare__label span { background: rgb(255 143 132 / 0.18); color: #ffb3aa; }
.compare__pane--after .compare__label span { background: rgb(200 35 58 / 0.1); color: #9c1427; }
.compare__code, .compare__text {
  margin: 0;
  font-family: var(--mono);
  font-size: clamp(0.7rem, 0.64rem + 0.22vw, 0.82rem);
  line-height: 1.75;
  white-space: pre-wrap;
  word-break: break-word;
}
.compare__code mark { background: rgb(255 107 94 / 0.22); color: #ffb3aa; border-radius: 3px; padding: 0 0.1em; }
.compare__switch { display: none; gap: 0.25rem; padding: 0.25rem; margin-bottom: 1rem; border-radius: 999px; background: var(--surface-2); }
.compare__switch button { min-height: 40px; padding: 0.35rem 1.1rem; border: 0; border-radius: 999px; background: transparent; font-weight: 600; }
.compare__switch button[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
@media (max-width: 860px) {
  /* the switch exists only with JS, decided by CSS so it is there from the first render */
  .js .compare__switch { display: inline-flex; }
  .compare__frame { grid-template-columns: 1fr; }
  .compare__arrow { display: none; }
  .js .compare__frame[data-show="before"] .compare__pane--after,
  .js .compare__frame[data-show="after"] .compare__pane--before { display: none; }
}
.project__split-2 {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  margin-top: clamp(4rem, 3rem + 4vw, 7rem);
}
.offline-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: start;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-family: var(--mono);
  font-size: var(--fs-sm);
}
.offline-badge span { width: 9px; height: 9px; border-radius: 50%; background: #3fc98a; box-shadow: 0 0 0 4px rgb(63 201 138 / 0.25); }
@media (max-width: 900px) {
  .project__split-2 { grid-template-columns: 1fr; }
  .compare__frame { min-height: 30rem; }
}

/* ---------- 05 OpusLokalny ---------- */
.project--reel {
  --bg-art:
    radial-gradient(50vw 30vw at 80% 20%, rgb(95 227 161 / 0.12), transparent 70%),
    radial-gradient(40vw 30vw at 0% 90%, rgb(255 176 32 / 0.08), transparent 70%);
}
.project--reel .project__name { color: var(--fg); }
.reel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.32fr);
  grid-template-areas: "app phone" "tl tl";
  gap: 1.5rem clamp(1.5rem, 3vw, 3rem);
  align-items: end;
}
.reel__app { grid-area: app; }
.reel__phone { grid-area: phone; margin: 0; align-self: center; }
.reel__phone picture {
  display: block;
  border-radius: 22px;
  overflow: hidden;
  border: 6px solid #1d1914;
  box-shadow: 0 40px 80px -30px rgb(0 0 0 / 0.8), 0 0 60px -10px rgb(95 227 161 / 0.25);
}
.reel__phone-cap { margin-top: 0.75rem; font-family: var(--mono); font-size: var(--fs-xs); color: var(--fg-muted); text-align: center; }
.reel__timeline {
  grid-area: tl;
  margin: 0;
  padding: 1.25rem;
  border-radius: var(--radius-window);
  background: var(--surface);
  border: 1px solid var(--line);
}
.reel__status { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
.reel__status span { padding: 0.3em 0.75em; border-radius: 999px; background: var(--surface-2); font-family: var(--mono); font-size: 0.6875rem; color: var(--fg-muted); }
.reel__status .reel__gpu { color: var(--accent-fg); background: var(--accent); }
.reel__tracks { position: relative; display: grid; gap: 6px; }
.reel__track { position: relative; display: flex; align-items: center; gap: 4px; height: 38px; padding-left: 44px; }
.t-label { position: absolute; left: 0; width: 36px; font-family: var(--mono); font-size: 0.625rem; color: var(--fg-muted); }
.reel__track--video i { height: 100%; border-radius: 4px; background: linear-gradient(135deg, #2a3b55, #1c2737); flex: 1; }
.reel__track--video i:nth-child(3) { flex: 1.6; background: linear-gradient(135deg, #3b2f55, #262037); }
.reel__track--video i:nth-child(4) { flex: 0.8; }
.reel__track--wave svg { width: 100%; height: 100%; fill: rgb(95 227 161 / 0.55); }
.reel__words { list-style: none; margin: 0; padding: 0; display: flex; gap: 3px; width: 100%; height: 100%; }
.reel__words li {
  flex: 1 1 auto;
  display: grid;
  place-items: center;
  border-radius: 4px;
  background: var(--surface-2);
  font-size: 0.6875rem;
  font-weight: 650;
  text-transform: uppercase;
  color: var(--fg-muted);
  overflow: hidden;
  white-space: nowrap;
  transition: background-color 0.25s, color 0.25s;
}
.reel__words li[data-active] { background: var(--accent); color: var(--accent-fg); }
.reel__playhead {
  position: absolute;
  top: -6px;
  bottom: -6px;
  left: calc(44px + (100% - 44px) * var(--ph, 0.36));
  width: 2px;
  background: #fff;
  box-shadow: 0 0 12px rgb(255 255 255 / 0.6);
  transition: left 0.3s var(--ease-out);
}
.reel__playhead::before { content: ""; position: absolute; top: -6px; left: -5px; border: 6px solid transparent; border-top-color: #fff; }
.reel__scrub { display: flex; align-items: center; gap: 1rem; margin-top: 1rem; font-size: var(--fs-sm); color: var(--fg-muted); }
.reel__scrub input { flex: 1; accent-color: var(--accent); min-height: 44px; }
.reel__caption-preview { margin-top: 0.25rem; font-family: var(--mono); font-size: var(--fs-sm); }
@media (max-width: 900px) {
  .reel { grid-template-columns: 1fr 0.55fr; grid-template-areas: "app app" "phone ." "tl tl"; }
  .reel__phone { max-width: 190px; justify-self: end; margin: -5rem 0.5rem 0 0; grid-column: 1 / -1; position: relative; z-index: 2; }
  .reel__words li { font-size: 0.5625rem; }
}
@media (max-width: 560px) {
  .reel__tracks { overflow-x: auto; }
  .reel__track { min-width: 560px; }
}

/* ======================================================================
   TEAM
   ====================================================================== */
.team { padding-block: var(--section-y); position: relative; }
.team__head { display: grid; gap: 1.25rem; max-width: 52rem; margin-bottom: clamp(3rem, 2rem + 4vw, 6rem); }
.people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* equal portraits: one team, no lead photo */
  gap: clamp(2rem, 3vw, 3rem);
  align-items: end;
}
.person { display: grid; gap: 1.25rem; }
.person:nth-child(2) { transform: translateY(-3rem); }
.person:nth-child(3) { transform: translateY(2rem); }
.portrait {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface-2);
  box-shadow: var(--shadow-window);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.person:hover .portrait img { transform: scale(1.03); }
.portrait--field {
  --tone: var(--c-cobalt);
  display: grid;
  place-items: end start;
  background:
    radial-gradient(120% 80% at 100% 0%, rgb(255 255 255 / 0.25), transparent 60%),
    var(--tone);
  color: #fff;
}
.person[data-tone="cobalt"] .portrait--field { --tone: var(--c-cobalt); }
.portrait--field::before {
  /* grain */
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.18;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.portrait__initial {
  position: absolute;
  right: -0.08em;
  bottom: -0.2em;
  font-size: clamp(12rem, 8rem + 12vw, 22rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.08em;
  color: rgb(255 255 255 / 0.92);
  mix-blend-mode: soft-light;
}
.portrait__tag {
  position: relative;
  margin: 1.1rem;
  padding: 0.35em 0.75em;
  border-radius: 999px;
  background: rgb(0 0 0 / 0.22);
  font-family: var(--mono);
  font-size: var(--fs-xs);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.person__body { display: grid; gap: 0.5rem; }
.person__role { font-family: var(--mono); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.person__name { font-size: var(--fs-xl); font-weight: 750; letter-spacing: -0.035em; line-height: 1; }
.person--feature .person__name { font-size: clamp(2.25rem, 1.4rem + 3vw, 4.25rem); }
.person__bio { color: var(--fg-muted); max-width: 40ch; }
@media (max-width: 1000px) {
  .people { grid-template-columns: 1fr 1fr; }
  .person--feature { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
  .person:nth-child(2), .person:nth-child(3) { transform: none; }
}
@media (max-width: 600px) {
  .people { grid-template-columns: 1fr; }
  .person--feature { grid-template-columns: 1fr; }
  /* a person without a photo yet collapses to a small tile; photos stay full width */
  .person:has(.portrait--field) { grid-template-columns: 112px minmax(0, 1fr); align-items: center; }
  .person .portrait__initial { font-size: 7rem; }
  .person .portrait__tag { display: none; }
}

/* ---------- Compact fact line (FF MCP, Opus) ---------- */
.factline {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 2rem;
  margin-top: clamp(2rem, 1.5rem + 2vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}
.factline b { color: var(--fg); font-size: var(--fs-lg); font-weight: 750; letter-spacing: -0.03em; margin-right: 0.25rem; font-variant-numeric: tabular-nums; }
.factline__tags { margin-left: auto; font-family: var(--mono); font-size: var(--fs-xs); }
@media (max-width: 760px) { .factline__tags { margin-left: 0; } }

@media (max-width: 899px) {
  .probe__term { max-height: 17rem; }
}

/* Sections with their own light: art layers over the theme colour */
.hero, .relay, .project--deck, .project--probe, .project--reel { background: var(--bg-art), var(--bg); }

/* RelayDen final frame: numbers and the alpha CTA together; the deep material folds away */
.relay-final {
  width: 100%;
  max-width: calc(var(--maxw) + 2 * var(--gutter));
  margin: clamp(4rem, 3rem + 3vw, 6rem) auto 0;
  padding-inline: var(--gutter);
}
.relay-final .relay-stats, .relay-final .relay-cta { padding-inline: 0; max-width: none; }
.relay-final .relay-stats { margin-top: 0; }
.relay-final .relay-cta { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.relay-more { margin-top: clamp(2rem, 1.5rem + 2vw, 3rem); }
.relay-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.5rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  transition: border-color var(--dur-s);
}
.relay-more > summary::-webkit-details-marker { display: none; }
.relay-more > summary:hover { border-color: var(--fg); }
.relay-more > summary svg { width: 16px; height: 16px; transition: transform 0.3s var(--ease-out); }
.relay-more[open] > summary svg { transform: rotate(180deg); }
.relay-more .relay-arch { margin-top: 2.5rem; padding-inline: 0; max-width: none; }
.relay-more .relay-spec__body { margin-top: 3rem; }

/* With the motion system the scroll tweens are GSAP's; CSS smooth scrolling would fight them
   (ScrollToPlugin would see the position lag and cancel itself). */
html.motion-on { scroll-behavior: auto; }

/* ======================================================================
   SECTION SEAMS — neighbouring sections meet in one soft colour ramp. The
   ramp is split across the boundary: the bottom padding of one section eases
   towards the midpoint colour, the top padding of the next eases away from it.
   Static CSS only: no motion, no JS, no layout change (one absolutely
   positioned layer per section, under the grain and all content, painted
   only inside the paddings, so text and images are never tinted).
   ====================================================================== */
:where(.hero, .relay, .project, .work, .team, .caps, .contact, .site-footer) {
  --seam-from: var(--bg);         /* background of the previous section */
  --seam-next: var(--bg);         /* background of the next section */
  --seam-to: transparent;         /* sections with --bg-art glows: the ramp fades out over the art */
  --seam-h: var(--section-y);     /* = padding, so the ramp never sits behind text */
  --seam-short: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
  --seam-h-top: var(--seam-h);
  --seam-h-bottom: var(--seam-h);
  --seam-top: color-mix(in oklab, var(--seam-from) 50%, var(--bg));
  --seam-bottom: color-mix(in oklab, var(--seam-next) 50%, var(--bg));
}
:is(.work, .team, .caps, .contact, .project--archive, .site-footer) { --seam-to: var(--bg); } /* flat fields */
.site-footer { --seam-h: clamp(3rem, 6vw, 5rem); }

/* previous section → --seam-from */
:is([data-theme="ink"], .projects-head) + :is(.relay, .project, .work, .team, .caps, .contact) { --seam-from: var(--c-ink); }
:is([data-theme="paper"], [data-theme="archive"]) + :is(.project, .work, .team, .caps, .contact) { --seam-from: var(--c-paper); }
[data-theme="signal"] + :is(.project, .team, .caps, .contact) { --seam-from: var(--c-signal); }
[data-theme="deck"] + .project { --seam-from: var(--c-plum); }
[data-theme="probe"] + .project { --seam-from: var(--c-probe); }
.projects:has(> [data-theme="reel"]:last-child) + .work { --seam-from: var(--c-reel); }
main:has(> [data-theme="paper"]:last-child) + .site-footer { --seam-from: var(--c-paper); }
/* the projects intro has no ramp of its own: start from its colour */
.projects-head + .project { --seam-top: var(--seam-from); }
/* The hero only fades out at the bottom. Its warm glow sits on the bottom edge, so the ramp is
   taller here and takes the glow down to black before RelayDen's blue begins. */
.hero { --seam-h-top: 0px; --seam-h-bottom: clamp(6rem, 3rem + 9vw, 12rem); }
.hero:has(+ .relay) { --seam-next: #05070f; } /* RelayDen's --bg, so both halves meet on the same colour */

/* next section → --seam-next */
:is(.relay, .project, .work, .team, .caps, .contact):has(+ :is([data-theme="ink"], .projects)) { --seam-next: var(--c-ink); }
:is(.project, .work, .team, .caps, .contact):has(+ :is([data-theme="paper"], [data-theme="archive"])) { --seam-next: var(--c-paper); }
.projects:has(+ [data-theme="signal"]) > .project:last-child { --seam-next: var(--c-signal); }
.project:has(+ [data-theme="probe"]) { --seam-next: var(--c-probe); }
.project:has(+ [data-theme="reel"]) { --seam-next: var(--c-reel); }
main:has(+ [data-theme="ink"]) > :is(.contact, .caps, .team, .work):last-child { --seam-next: var(--c-ink); }

/* Light against dark (and signal against paper): a long ramp passes through a flat grey band, so
   these seams stay short, a soft edge of about 56–72 px in total rather than a fog. */
:is([data-theme="paper"], [data-theme="archive"]) + :is([data-theme="ink"], [data-theme="reel"], [data-theme="probe"], [data-theme="deck"]),
:is([data-theme="ink"], [data-theme="reel"], [data-theme="probe"], [data-theme="deck"]) + :is([data-theme="paper"], [data-theme="archive"]),
[data-theme="signal"] + :is([data-theme="paper"], [data-theme="archive"]),
main:has(> :is([data-theme="paper"], [data-theme="archive"]):last-child) + .site-footer[data-theme="ink"] { --seam-h-top: var(--seam-short); }
:is([data-theme="paper"], [data-theme="archive"]):has(+ :is([data-theme="ink"], [data-theme="reel"], [data-theme="probe"], [data-theme="deck"])),
:is([data-theme="ink"], [data-theme="reel"], [data-theme="probe"], [data-theme="deck"]):has(+ :is([data-theme="paper"], [data-theme="archive"])),
[data-theme="signal"]:has(+ :is([data-theme="paper"], [data-theme="archive"])),
main:has(+ .site-footer[data-theme="ink"]) > :is([data-theme="paper"], [data-theme="archive"]):last-child { --seam-h-bottom: var(--seam-short); }

:is(.hero, .relay, .project, .work, .team, .caps, .contact, .site-footer) { position: relative; isolation: isolate; }
:is(.hero, .relay, .project, .work, .team, .caps, .contact, .site-footer)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;                    /* under the film grain (-1) and all content */
  pointer-events: none;
  /* each half is one side of a smoothstep, so the whole seam has no visible start, end or line */
  background:
    linear-gradient(to bottom in oklab,
      var(--seam-top),
      color-mix(in oklab, var(--seam-top) 63%, var(--seam-to)) 25%,
      color-mix(in oklab, var(--seam-top) 31%, var(--seam-to)) 50%,
      color-mix(in oklab, var(--seam-top) 9%, var(--seam-to)) 75%,
      var(--seam-to)) top / 100% var(--seam-h-top) no-repeat,
    linear-gradient(to top in oklab,
      var(--seam-bottom),
      color-mix(in oklab, var(--seam-bottom) 63%, var(--seam-to)) 25%,
      color-mix(in oklab, var(--seam-bottom) 31%, var(--seam-to)) 50%,
      color-mix(in oklab, var(--seam-bottom) 9%, var(--seam-to)) 75%,
      var(--seam-to)) bottom / 100% var(--seam-h-bottom) no-repeat;
}