.carbon_content-wrapper {
  --bg: #fbfaf8;
  --ink: #2e2c2a;
  --mute: #6f6a64;
  --wash: #bdb8b1;
  --red: #a3202c;
  --hazmat: #ee6a2c;
  --deep: #16302f;
  --deepink: #e9efe9;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 200 1.1875rem/1.75rem "Morion", "Source Serif 4", Georgia, serif;
  overflow-x: clip;
}
.carbon_content-wrapper *,
.carbon_content-wrapper *::before,
.carbon_content-wrapper *::after {
  box-sizing: inherit;
}
.carbon_content-wrapper html {
  scroll-padding-top: env(safe-area-inset-top, 0px);
}
.carbon_content-wrapper .sans {
  font-family: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
}
.carbon_content-wrapper a {
  color: var(--red);
}
.carbon_content-wrapper :focus-visible {
  outline: 3px solid var(--hazmat);
  outline-offset: 3px;
}

/* ---------- HERO ---------- */
.carbon_content-wrapper .hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(1rem, 4vw, 3.5rem);
}
.carbon_content-wrapper .hero-img {
  width: min(92vw, 1000px);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
}
.carbon_content-wrapper .hero-img img {
  display: block;
  width: 100%;
  height: auto;
  filter: url(#torn);
}
.carbon_content-wrapper .wash-wrap {
  position: relative;
  z-index: 2;
  margin-top: clamp(-9rem, -14vw, -3.5rem);
  padding: clamp(5rem, 14vw, 11rem) 1.25rem clamp(2.5rem, 6vw, 4.5rem);
  text-align: center;
}
.carbon_content-wrapper .wash {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 0, #000 62%, transparent 100%);
  mask-image: linear-gradient(#000 0, #000 62%, transparent 100%);
  animation: bleed 2.6s cubic-bezier(.2, .7, .2, 1) both;
}
@keyframes bleed {
  from {
    opacity: 0;
    transform: translateY(60px) scaleY(.7);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.carbon_content-wrapper .wash path {
  fill: none;
  stroke: var(--wash);
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.carbon_content-wrapper .wash .r {
  stroke: var(--red);
  opacity: .22;
}
.carbon_content-wrapper h1 {
  font: 700 clamp(2rem, 5.4vw, 2.65rem)/1.12 "Roboto", "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  margin: 0 auto;
  max-width: 19ch;
  text-wrap: balance;
}
.carbon_content-wrapper .by {
  margin: clamp(1.5rem, 4vw, 3rem) 0 0;
  font: 400 .95rem/1.85 "Roboto", "Source Sans 3", system-ui, sans-serif;
  color: var(--mute);
}
.carbon_content-wrapper .by b {
  color: var(--ink);
  font-weight: 700;
}

/* ---------- ARTICLE ---------- */
.carbon_content-wrapper main {
  padding: 0 1.25rem;
}
.carbon_content-wrapper .col {
  max-width: 680px;
  margin: 0 auto;
}
.carbon_content-wrapper .col p {
  margin: 0 0 1.35em;
}
.carbon_content-wrapper .col h2 {
  font: 700 clamp(1.5rem, 3.4vw, 2rem)/1.2 "Roboto", "Source Sans 3", system-ui, sans-serif;
  margin: 2.2em 0 .6em;
}
.carbon_content-wrapper .lede {
  font-size: 1.3rem;
  line-height: 1.55;
}
.carbon_content-wrapper figure {
  margin: 2.5rem auto;
  max-width: 900px;
}
.carbon_content-wrapper figure .art {
  background: var(--deep);
  border-radius: 6px;
  overflow: hidden;
  filter: url(#torn);
}
.carbon_content-wrapper figure svg {
  display: block;
  width: 100%;
  height: auto;
}
.carbon_content-wrapper figcaption {
  font: 400 .9rem/1.5 "Source Sans 3", system-ui, sans-serif;
  color: var(--mute);
  margin-top: .7rem;
  max-width: 680px;
}
.carbon_content-wrapper ol.steps {
  padding-left: 1.3em;
  margin: 0 0 1.4em;
}
.carbon_content-wrapper ol.steps li {
  margin-bottom: .8em;
  padding-left: .3em;
}
.carbon_content-wrapper ol.steps li::marker {
  color: var(--red);
  font-weight: 700;
}
.carbon_content-wrapper blockquote {
  margin: 2em 0;
  padding: .2em 0 .2em 1.2rem;
  border-left: 4px solid var(--red);
  font-size: 1.25rem;
  line-height: 1.5;
}

/* ---------- VIDEO SECTION (dark bleed) ---------- */
.carbon_content-wrapper .deep {
  position: relative;
  background: var(--deep);
  color: var(--deepink);
  margin: 4rem -1.25rem 0;
  padding: clamp(3rem, 8vw, 6rem) 1.25rem 4rem;
}
.carbon_content-wrapper .deep .edge {
  position: absolute;
  left: 0;
  right: 0;
  top: -70px;
  height: 90px;
  width: 100%;
}
.carbon_content-wrapper .deep .edge path {
  fill: var(--deep);
}
.carbon_content-wrapper .deep h2 {
  color: var(--deepink);
}
.carbon_content-wrapper .video {
  max-width: 900px;
  margin: 1.5rem auto 0;
  border-radius: 6px;
  overflow: hidden;
  background: #000;
  position: relative;
}
.carbon_content-wrapper .video canvas {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;
}
.carbon_content-wrapper .cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 56px;
  padding: .6rem 1rem;
  font: 600 1rem/1.35 "Source Sans 3", system-ui, sans-serif;
  background: linear-gradient(transparent, rgba(0, 0, 0, .7));
  color: #fff;
}
.carbon_content-wrapper .ctl {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .6rem .9rem;
  background: #0a0f0f;
  font: 600 .9rem "Source Sans 3", system-ui, sans-serif;
}
.carbon_content-wrapper .ctl button {
  background: var(--hazmat);
  color: #1a0c04;
  border: 0;
  border-radius: 999px;
  min-width: 5.2rem;
  padding: .45rem 1rem;
  font: inherit;
  cursor: pointer;
}
.carbon_content-wrapper .ctl input {
  flex: 1;
  accent-color: var(--hazmat);
}
.carbon_content-wrapper .ctl output {
  color: #b8c4c0;
  min-width: 3.2rem;
  text-align: right;
}
.carbon_content-wrapper .credits {
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem 0 3rem;
  font: 400 .85rem/1.6 "Source Sans 3", system-ui, sans-serif;
  color: var(--deepink);
  opacity: .8;
}
.carbon_content-wrapper .deep .col p {
  color: var(--deepink);
}
.carbon_content-wrapper {
  --c1: #8a5a1e;
  --c2: #8a2a6b;
  --c3: #5b2a86;
  --c4: #1f2a63;
}
@media (prefers-color-scheme: dark) {
  .carbon_content-wrapper:not([data-theme="light"]) {
    --c1: #e6bb72;
    --c2: #ec92c6;
    --c3: #bda0f4;
    --c4: #a3b4ff;
  }
}
.carbon_content-wrapper[data-theme="dark"] {
  --c1: #e6bb72;
  --c2: #ec92c6;
  --c3: #bda0f4;
  --c4: #a3b4ff;
}
.carbon_content-wrapper .ice {
  margin: 4.5rem auto 0;
}
.carbon_content-wrapper .ice .col {
  text-align: center;
}
.carbon_content-wrapper .ice-wrap {
  position: relative;
  container-type: inline-size;
  max-width: 1100px;
  margin: 3.5rem auto 0;
}
.carbon_content-wrapper .ice-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1100/620;
}
.carbon_content-wrapper .note {
  position: absolute;
  margin: 0;
  font: 400 clamp(.78rem, 1.6cqw, 1.1rem)/1.36 "Source Sans 3", system-ui, sans-serif;
  color: var(--ink);
}
.carbon_content-wrapper .note b {
  display: block;
  font-weight: 700;
  font-size: 1.08em;
}
.carbon_content-wrapper .note.l {
  width: 27%;
}
.carbon_content-wrapper .note.l b {
  font-size: 1.2em;
  color: inherit;
}
.carbon_content-wrapper .note.l1 {
  top: 5%;
  left: 5%;
}
.carbon_content-wrapper .note.l2 {
  top: 40%;
  color: var(--c4);
}
.carbon_content-wrapper .note.l3 {
  top: 70%;
  left: 5%;
  color: var(--c1);
}
.carbon_content-wrapper .note.r {
  width: 26%;
}
.carbon_content-wrapper .note.r b {
  color: inherit;
}
.carbon_content-wrapper .n1 {
  left: 72%;
  top: 4%;
  color: var(--c1);
}
.carbon_content-wrapper .n2 {
  left: 76%;
  top: 40%;
  color: var(--c2);
}
.carbon_content-wrapper .n3 {
  left: 75%;
  top: 52%;
  color: var(--c3);
}
.carbon_content-wrapper .n4 {
  left: 70%;
  top: 80%;
  color: var(--c4);
  width: 33%;
}
.carbon_content-wrapper .src {
  max-width: 680px;
  margin: 1.4rem auto 0;
  font: 400 .85rem/1.5 "Source Sans 3", system-ui, sans-serif;
  color: var(--mute);
}
@container (max-width:700px) {
  .carbon_content-wrapper .note {
    position: static;
    width: auto !important;
    margin: 1rem 0 0;
    padding-left: .8rem;
    border-left: 3px solid currentColor;
    font-size: 1rem;
  }
  .carbon_content-wrapper .note.l {
    color: var(--ink);
  }
}
.carbon_content-wrapper .ice-wrap {
  isolation: isolate;
}
.carbon_content-wrapper .ice-wrap::before {
  content: "";
  position: absolute;
  inset: -6% -4%;
  z-index: -1;
  filter: blur(40px);
  background: radial-gradient(circle at 30% 30%, rgba(247, 201, 72, .35), transparent 50%),
              radial-gradient(circle at 70% 40%, rgba(240, 120, 180, .3), transparent 50%),
              radial-gradient(circle at 50% 80%, rgba(120, 140, 240, .3), transparent 55%);
}
.carbon_content-wrapper .ice-lbl {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
}
.carbon_content-wrapper .row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1rem, 5vw, 4rem);
  align-items: center;
  max-width: 1000px;
  margin: clamp(3.5rem, 9vw, 7rem) auto;
}
.carbon_content-wrapper .row.rev .fig {
  order: 2;
}
.carbon_content-wrapper .fig {
  position: relative;
  isolation: isolate;
  justify-self: center;
  width: min(100%, 360px);
}
.carbon_content-wrapper .fig img {
  display: block;
  width: 100%;
  height: auto;
}
.carbon_content-wrapper .fig::before {
  content: "";
  position: absolute;
  inset: -12% -22%;
  z-index: -1;
  filter: blur(34px);
  background: radial-gradient(circle at 30% 35%, rgba(247, 201, 72, .6), transparent 52%),
              radial-gradient(circle at 72% 58%, rgba(240, 120, 180, .5), transparent 55%),
              radial-gradient(circle at 45% 88%, rgba(130, 110, 240, .4), transparent 60%);
}
.carbon_content-wrapper .fig::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  left: -26%;
  top: 6%;
  background: rgba(150, 140, 220, .28);
}
.carbon_content-wrapper .row.rev .fig::after {
  left: auto;
  right: -26%;
  background: rgba(240, 150, 180, .3);
}
.carbon_content-wrapper .txt {
  max-width: 30rem;
}
.carbon_content-wrapper .txt h3 {
  font: 400 clamp(1.8rem, 4.2vw, 3rem)/1.15 "Source Serif 4", Georgia, serif;
  margin: 0 0 1.1rem;
}
.carbon_content-wrapper .txt p {
  margin: 0;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink);
}
.carbon_content-wrapper .txt small {
  display: block;
  margin-top: .9rem;
  font: 400 .8rem "Source Sans 3", system-ui, sans-serif;
  color: var(--mute);
}
@media (max-width:760px) {
  .carbon_content-wrapper .row {
    grid-template-columns: 1fr;
  }
  .carbon_content-wrapper .row.rev .fig {
    order: 0;
  }
  .carbon_content-wrapper .fig {
    width: min(70%, 300px);
  }
}
.carbon_content-wrapper .stick {
  --n: 4;
  position: relative;
  height: calc(var(--n) * 85vh + 100vh);
  margin: 5rem -1.25rem 0;
}
.carbon_content-wrapper .stick-in {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--bg);
}
.carbon_content-wrapper .slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 2vh 1.25rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility .9s;
}
.carbon_content-wrapper .slide.on {
  opacity: 1;
  visibility: visible;
}
.carbon_content-wrapper .art,
.carbon_content-wrapper .ov {
  grid-area: 1/1;
}
.carbon_content-wrapper .art {
  position: relative;
  isolation: isolate;
}
.carbon_content-wrapper .art img {
  display: block;
  height: min(80vh, 92vw);
  width: auto;
  max-width: 100%;
  transform: translateY(calc((.5 - var(--lp, 0)) * 44px));
  transition: transform .25s linear;
}
.carbon_content-wrapper .art::before {
  content: "";
  position: absolute;
  inset: -14% -30%;
  z-index: -1;
  filter: blur(36px);
  background: radial-gradient(circle at 30% 35%, rgba(247, 201, 72, .5), transparent 52%),
              radial-gradient(circle at 70% 60%, rgba(240, 120, 180, .42), transparent 55%),
              radial-gradient(circle at 45% 90%, rgba(130, 110, 240, .38), transparent 60%);
}
.carbon_content-wrapper .ov {
  position: relative;
  z-index: 2;
  width: min(88vw, 640px);
  padding: 1.3rem 1.7rem;
  background: var(--ovbg);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: var(--ink);
  font: 400 clamp(1.1rem, 2.2vw, 1.45rem)/1.55 "Morion", "Source Serif 4", Georgia, serif;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s .15s, transform .9s .15s;
}
.carbon_content-wrapper .slide.on .ov {
  opacity: 1;
  transform: none;
}
.carbon_content-wrapper .ov b {
  display: block;
  margin-bottom: .4rem;
  font: 700 .75rem/1 "Source Sans 3", system-ui, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red);
}
.carbon_content-wrapper .s1 .ov {
  justify-self: center;
  align-self: center;
}
.carbon_content-wrapper .s2 .ov {
  justify-self: start;
  align-self: end;
  margin-bottom: 6vh;
}
.carbon_content-wrapper .s3 .ov {
  justify-self: end;
  align-self: start;
  margin-top: 8vh;
}
.carbon_content-wrapper .s4 .ov {
  justify-self: center;
  align-self: end;
  margin-bottom: 5vh;
}
.carbon_content-wrapper .dots {
  position: absolute;
  right: clamp(.7rem, 2.5vw, 2rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  display: grid;
  gap: .7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.carbon_content-wrapper .dots li {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid #1830e0;
  transition: background .4s;
}
.carbon_content-wrapper .dots li.on {
  background: #1830e0;
}
.carbon_content-wrapper {
  --ovbg: rgba(248, 247, 244, .74);
}
@media (prefers-color-scheme: dark) {
  .carbon_content-wrapper:not([data-theme="light"]) {
    --ovbg: rgba(24, 23, 22, .74);
  }
}
.carbon_content-wrapper[data-theme="dark"] {
  --ovbg: rgba(24, 23, 22, .74);
}
@media (prefers-reduced-motion: reduce) {
  .carbon_content-wrapper .stick {
    height: auto;
  }
  .carbon_content-wrapper .stick-in {
    position: relative;
    height: auto;
  }
  .carbon_content-wrapper .slide {
    position: relative;
    opacity: 1;
    visibility: visible;
    padding: 3rem 1.25rem;
  }
  .carbon_content-wrapper .ov {
    opacity: 1;
    transform: none;
  }
  .carbon_content-wrapper .dots {
    display: none;
  }
  .carbon_content-wrapper .art img {
    transform: none;
  }
}
.carbon_content-wrapper .conn {
  max-width: 680px;
  margin: clamp(3rem, 7vw, 5rem) auto;
  text-align: left;
}
.carbon_content-wrapper .conn::before {
  content: "";
  display: block;
  width: 96px;
  height: 5px;
  margin-bottom: 1.4rem;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--red), #8a5cf0 70%, transparent);
  opacity: .75;
}
.carbon_content-wrapper .conn p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.6;
}
.carbon_content-wrapper .shot {
  position: relative;
  isolation: isolate;
  width: min(1180px, calc(100vw - 2.5rem));
  max-width: none;
  margin: 4rem 0 4rem 50%;
  transform: translateX(-50%);
}
.carbon_content-wrapper .shot::before {
  content: "";
  position: absolute;
  inset: -22% -30%;
  z-index: -2;
  filter: blur(55px);
  background: radial-gradient(ellipse at 27% 42%, rgba(247, 214, 110, .55), transparent 52%),
              radial-gradient(ellipse at 80% 52%, rgba(232, 168, 214, .48), transparent 55%);
}
.carbon_content-wrapper .shot-art {
  position: relative;
  width: min(80%, 880px);
  margin: 0 auto;
}
.carbon_content-wrapper .shot-art::before {
  content: "";
  position: absolute;
  inset: 3% -15% 0;
  z-index: -1;
  opacity: .75;
  filter: url(#torn);
}
.carbon_content-wrapper .shot-art img {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/3;
  object-fit: contain;
}
.carbon_content-wrapper .shot figcaption {
  margin: 1.6rem auto 0;
  max-width: 680px;
}
@media (prefers-reduced-motion: reduce) {
  .carbon_content-wrapper .wash {
    animation: none;
  }
}