/* ----- fonts ----- */
    @import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@400;700&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@500;700;900&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;1,8..60,400&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400..900;1,9..40,400..900&display=swap');
    /* ----- reset & base ----- */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    html { scroll-behavior: smooth; }

    /* ----- wrapper & palette ----- */
    .carbon_content-wrapper {
      --ink: #17140f;
      --ink-2: #0e0c0a;
      --paper: #f2e8ce;
      --gold: #f2b705;
      --ember: #d9711f;
      --ember-bright: #ff9a3d;
      --bg-main: #193d64;
      --text-primary: #ffffff;
      --text-muted: #c0cbd8;
      --stamp-red: #8f1e1e;
      --border-color: #2e4c6b;
      --paper-white: #ffffff;

      --navy-deep: var(--ink-2);
      --navy-mid: var(--ink);
      --rain-blue: var(--gold);
      --slate: var(--text-muted);
      --slate-dim: #8a8172;
      --line: var(--border-color);

      --font-serif: 'Morion', 'Lora', Georgia, serif;
      --font-display: 'Morion', Georgia, serif;
      --font-mono: 'IBM Plex Mono', monospace;
      --font-comic: 'Bangers', cursive;
      --ease: cubic-bezier(0.34, 1.56, 0.64, 1);

      --bubble__radius--1: 48% 42% 50% 47% / 48% 45% 48% 50%;
      --bubble__radius--2: 54% 70% 60% 52% / 62% 60% 60% 49%;
      --bubble__radius--3: 60% 39% 54% 50% / 42% 49% 45% 56%;
      --bubble__radius--4: 48% 42% 50% 47% / 48% 45% 48% 50%;
      --bubble__radius--5: 49% 40% 51% 46% / 52% 48% 49% 55%;
      --bubble__radius--6: 46% 47% 47% 53% / 50% 43% 50% 48%;
      --bubble__radius--7: 56% 44% 55% 49% / 44% 47% 50% 54%;
      --bubble__radius--square: 0%;
      --bubble__radius--circle: 100%;

      --bubble__padding--l: 3.125rem 3.5rem 3.125rem 3.5rem;
      --bubble__padding--m: 1.75rem 1.875rem 2rem 1.875rem;
      --bubble__padding--s: 1.375rem 1.75rem 1.625rem 1.75rem;
      --bubble__padding--xs: 1rem 2rem;
      --bubble__padding--xxs: 0.5rem 0.5rem;

      --outlines: #000;
      --fill: #fff;

      background-color: var(--bg-main);
      color: var(--text-primary);
      font-family: var(--font-serif);
      font-size: clamp(16px, 1.2vw, 17px);
      line-height: 1.65;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
      overflow: hidden;
      margin-bottom: 5rem;
      width: 100vw;
    }
    .carbon_content-wrapper *,
    .carbon_content-wrapper *::before,
    .carbon_content-wrapper *::after {
      margin: 0; padding: 0; box-sizing: border-box;
    }

    

    .carbon_content-wrapper .hero-title {
      font-family: 'DM Sans', sans-serif;
      text-transform: uppercase;
      letter-spacing: 0.01em;
      line-height: 0.95;
    }
    .carbon_content-wrapper .mono { font-family: 'IBM Plex Mono', monospace; letter-spacing: 0.04em; }
    a { color: inherit; }
    .carbon_content-wrapper .wrap { max-width: 1120px; margin: 0 auto; padding: 0 32px; }

    /* ----- reveal animation ----- */
    .carbon_content-wrapper .reveal {
      opacity: 0;
      transform: translateY(25px);
      transition: opacity 0.8s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.8s cubic-bezier(0.215, 0.61, 0.355, 1);
      will-change: transform, opacity;
    }
    .carbon_content-wrapper .reveal.in { opacity: 1; transform: translateY(0); }

    /* ----- hero ----- */
    .carbon_content-wrapper .hero {
      position: relative;
      height: 100vh;
      height: 100svh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      overflow: hidden;
      margin-bottom: -1px;
      background: linear-gradient(180deg, rgba(14,12,10,0) 0%, rgba(14,12,10,0.6) 70%, var(--ink-2) 100%),
                  linear-gradient(to bottom, rgba(14,12,10,1) 0%, rgba(63,29,8,1) 100%);
    }
    .carbon_content-wrapper #rain-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
    }
    .carbon_content-wrapper .hero-body {
      position: relative;
      z-index: 3;
      padding: 0 32px 64px;
      text-align: center;
    }
    .carbon_content-wrapper .hero h1 {
      font-size: clamp(48px, 10vw, 132px);
      font-weight: 900;
      background: linear-gradient(135deg, #f2b705, #ff9a3d);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-align: center;
    }
    .carbon_content-wrapper .hero-sub {
      margin-top: 28px;
      max-width: 560px;
      font-size: 18px;
      color: var(--slate);
      font-weight: 400;
      margin-left: auto;
      margin-right: auto;
    }
    .carbon_content-wrapper .hero-eyebrow {
      font-family: 'IBM Plex Mono', monospace;
      font-size: 13px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--gold);
      max-width: 74ch;
      margin: 18px auto;
    }
    .carbon_content-wrapper .scroll-cue {
      position: absolute;
      bottom: 24px;
      left: 50%;
      z-index: 3;
      font-family: 'IBM Plex Mono', monospace;
      font-size: 11px;
      color: var(--slate-dim);
      letter-spacing: 0.1em;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .carbon_content-wrapper .scroll-cue::after {
      content: "";
      width: 1px; height: 34px;
      background: linear-gradient(var(--gold), transparent);
      animation: drip 1.8s infinite;
    }
    @keyframes drip {
      0% { transform: translateY(-10px); opacity: 0; }
      30% { opacity: 1; }
      100% { transform: translateY(10px); opacity: 0; }
    }

    /* ----- story container ----- */
    .carbon_content-wrapper .story-container {
      max-width: 740px;
      margin: 0 auto;
      padding: 0 1.25rem;
    }
    .carbon_content-wrapper .intro-block {
      padding: clamp(4rem, 10vw, 7rem) 0;
      text-align: center;
      border-bottom: 1px solid var(--border-color);
    }
    .carbon_content-wrapper .scene-section {
      position: relative;
      padding: clamp(2rem, 8vw, 3rem) 0;
    }
    .carbon_content-wrapper .meta-eyebrow {
      font-family: var(--font-mono);
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.15em;
      color: var(--text-primary);
      margin-bottom: 0.75rem;
    }
    .carbon_content-wrapper .scene-title {
      font-family: var(--font-display);
      font-size: clamp(1.6rem, 5vw, 2.2rem);
      margin: 0 0 1.5rem 0;
      font-weight: 500;
      letter-spacing: -.005rem;
      line-height: 1.875rem;
    }
    .carbon_content-wrapper .scene-img {
      position: relative;
      width: 100%;
      margin: 2.5rem 0;
      overflow: visible;
    }
    .carbon_content-wrapper .scene-img img {
      width: 100%;
      height: auto;
      display: block;
      border-radius: 4px;
    }
    .carbon_content-wrapper .narrative-text {
      color: var(--text-primary);
      font-size: clamp(1.05rem, 2vw, 1.2rem);
      margin-bottom: 2rem;
    }

    /* ----- speech bubble system ----- */
    .carbon_content-wrapper .bubble {
      text-align: center;
      background-color: var(--fill);
      color: var(--outlines);
      hyphens: manual;
      font-family: 'Comic Neue', cursive;
      text-transform: uppercase;
      font-size: 0.95rem;
      font-weight: 700;
      line-height: 1.4;
      box-shadow: 0 0 0 0 var(--outlines);
      position: relative;
      z-index: 2;
    }
    .carbon_content-wrapper .bubble--sm { font-size: 0.8rem; padding: var(--bubble__padding--s); border-radius: var(--bubble__radius--3); max-width: 18rem; }
    .carbon_content-wrapper .bubble--md { font-size: 0.95rem; padding: var(--bubble__padding--m); border-radius: var(--bubble__radius--4); max-width: 22rem; }
    .carbon_content-wrapper .bubble--lg { font-size: 1.1rem; padding: var(--bubble__padding--l); border-radius: var(--bubble__radius--2); max-width: 26rem; }
    .carbon_content-wrapper .bubble--xl { font-size: 1.25rem; padding: var(--bubble__padding--l); border-radius: var(--bubble__radius--1); max-width: 30rem; }

    .carbon_content-wrapper .bubble-tail-container {
      position: absolute;
      width: fit-content;
      height: max-content;
      display: flex;
      flex-direction: column;
      align-items: center;
      z-index: 10;
      transform: translate(-50%, -50%);
      pointer-events: none;
      width: max-content;
      max-width: 48%;
      transition: left 0.2s ease-out, top 0.2s ease-out;
      will-change: left, top;
    }
    .carbon_content-wrapper .bubble-tail-container .bubble,
    .carbon_content-wrapper .bubble-tail-container .tail {
      opacity: 0;
      transform: scale(0.7) translateY(10px);
      transition: opacity 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
      will-change: transform, opacity;
    }
    .carbon_content-wrapper .bubble-tail-container.visible-bubble .bubble,
    .carbon_content-wrapper .bubble-tail-container.visible-bubble .tail {
      opacity: 1;
      transform: scale(1) translateY(0);
    }
    .carbon_content-wrapper .bubble-tail-container.visible-bubble .tail[data-tail-direction="left"] {
      transform: scaleX(-1) scale(1) translateY(0);
    }
    .carbon_content-wrapper .bubble-tail-container .bubble {
      filter: drop-shadow(0.125rem 0.125rem 0rem var(--outlines)) drop-shadow(0.0625rem -0.0625rem 0rem var(--outlines)) drop-shadow(-0.0625rem 0.0625rem 0rem var(--outlines));
    }
    .carbon_content-wrapper .tail {
      width: 120px;
      margin-top: -0.5rem;
      flex-shrink: 0;
      transition: transform 0.3s ease;
      z-index: 15;
    }
    .carbon_content-wrapper .tail path {
      fill: var(--fill);
      stroke: var(--outlines);
      stroke-width: 6;
      stroke-linejoin: round;
    }
    .carbon_content-wrapper .bubble-tail-container svg.tail {
      filter: drop-shadow(0.046875rem 0rem 0rem var(--outlines));
      max-width: 8rem;
      margin: 0 auto;
    }
    .carbon_content-wrapper .tail[data-tail-direction="left"] { transform: scaleX(-1); }
    .carbon_content-wrapper .tail[data-tail-direction="right"] { transform: scaleX(1); }
    .carbon_content-wrapper .tail[data-tail-direction="up"] { transform: scaleY(-1); }
    .carbon_content-wrapper .tail[data-tail-direction="down"] { transform: scaleY(1); }

    @media (max-width:768px) {
      .carbon_content-wrapper .bubble { font-size: 0.75rem !important; padding: var(--bubble__padding--s) !important; max-width: 14rem !important; }
      .carbon_content-wrapper .tail { width: 80px; }
      .carbon_content-wrapper .bubble-tail-container svg.tail { max-width: 5rem; }
    }
    @media (max-width:480px) {
      .carbon_content-wrapper .bubble { font-size: 0.65rem !important; padding: var(--bubble__padding--xs) !important; max-width: 11rem !important; }
      .carbon_content-wrapper .tail { width: 60px; }
      .carbon_content-wrapper .bubble-tail-container svg.tail { max-width: 4rem; }
    }