:root {
      --bg: #0a070a;
      --bg-alt: #120a0d;
      --surface: #1a0f13;
      --border: rgba(255, 255, 255, .08);
      --border-red: rgba(210, 60, 70, .4);
      --text: #f1eefb;
      --text-muted: #b9a9ae;
      --text-faint: #8d7077;
      --red: #e14a58;
      --cyan: #3bd0ff;
      --red-dim: rgba(225, 74, 88, .14);
      --font-display: 'Chakra Petch', ui-sans-serif, system-ui, sans-serif;
      --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0
    }

    html {
      color-scheme: dark
    }

    body {
      background: var(--bg);
      color: var(--text);
      font-family: var(--font-display);
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
      position: relative;
    }

    a {
      color: inherit;
      text-decoration: none
    }

    .wrap {
      max-width: 860px;
      margin: 0 auto;
      padding: 0 24px
    }

    /* fixed overlays: vignette (static), scanlines (motion-gated) */
    .vignette {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 48;
      background: radial-gradient(ellipse at 50% 40%, transparent 45%, rgba(0, 0, 0, .6) 100%);
    }

    .scan {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 50;
      mix-blend-mode: overlay;
      opacity: .6;
      background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 3px);
    }

    @media (prefers-reduced-motion:no-preference) {
      .scan {
        animation: scan-drift 9s linear infinite
      }
    }

    @keyframes scan-drift {
      0% {
        background-position: 0 0
      }

      100% {
        background-position: 0 240px
      }
    }

    .stripe {
      background: linear-gradient(90deg, #210b0e, #2c0e12 40%, #210b0e);
      border-bottom: 1px solid var(--border-red);
      color: var(--red);
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      text-align: center;
      padding: 8px 16px;
      position: relative;
      z-index: 1;
    }

    .stripe.bottom {
      border-bottom: none;
      border-top: 1px solid var(--border-red);
      margin-top: 22px
    }

    .back {
      display: inline-block;
      margin: 22px 0 0;
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-faint);
      letter-spacing: .04em;
      transition: color .2s;
    }

    .back:hover {
      color: var(--red);
      animation: mini-glitch .3s steps(2, jump-end) 1
    }

    .cien-logo {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-top: 32px;
      position: relative;
    }

    .cien-logo img {
      display: block;
      height: 30px;
      width: auto;
      filter: drop-shadow(0 0 18px rgba(225, 74, 88, .35));
    }

    .cien-logo small {
      font-family: var(--font-mono);
      font-weight: 400;
      font-size: 10px;
      letter-spacing: .22em;
      color: var(--text-faint);
      text-transform: uppercase;
    }

    @media (prefers-reduced-motion:no-preference) {
      .cien-logo img {
        animation: logo-drift 6s ease-in-out infinite alternate
      }
    }

    @keyframes logo-drift {
      from {
        transform: translate(0, 0)
      }

      to {
        transform: translate(1.5px, -1px)
      }
    }

    .eyebrow {
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--red);
      margin-bottom: 16px;
    }

    /* intro: cover block, one clean unit */
    .intro {
      padding: 40px 0 48px
    }

    .lede {
      margin-top: 20px;
      font-family: var(--font-mono);
      font-size: 14px;
      color: var(--text-faint);
    }

    .warn {
      margin-top: 24px;
      padding: 16px 18px;
      border: 1px solid var(--border-red);
      background: var(--red-dim);
      font-family: var(--font-mono);
      font-size: 12.5px;
      color: var(--red);
      position: relative;
      box-shadow: 0 0 24px -6px rgba(225, 74, 88, .5);
    }

    @media (prefers-reduced-motion:no-preference) {
      .warn {
        animation: warn-pulse 3.4s ease-in-out infinite
      }
    }

    @keyframes warn-pulse {

      0%,
      100% {
        box-shadow: 0 0 24px -6px rgba(225, 74, 88, .5)
      }

      50% {
        box-shadow: 0 0 34px -4px rgba(225, 74, 88, .85)
      }
    }

    /* article stack: one bordered document, articles as hairline-separated rows */
    .articles {
      counter-reset: art 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
      background: var(--border-red);
      border: 1px solid var(--border-red);
    }

    .article {
      counter-increment: art;
      background: var(--bg-alt);
      padding: 32px;
      position: relative;
      overflow: hidden;
      transition: background .25s, transform .3s cubic-bezier(.16, 1, .3, 1);
    }

    .article:hover {
      background: var(--surface);
      transform: translateY(-3px)
    }

    .article::after {
      content: counter(art, upper-roman);
      position: absolute;
      right: 20px;
      top: -8px;
      font-family: var(--font-mono);
      font-weight: 700;
      font-size: 80px;
      line-height: 1;
      color: rgba(225, 74, 88, .07);
      pointer-events: none;
    }

    .article-tag {
      position: relative;
      display: inline-block;
      font-family: var(--font-mono);
      font-size: 11px;
      letter-spacing: .14em;
      color: var(--red);
      border: 1px solid var(--border-red);
      padding: 4px 10px;
      margin-bottom: 16px;
    }

    .article-tag::before {
      content: "ART. " counter(art, upper-roman)
    }

    .article h2 {
      position: relative
    }

    .article p {
      position: relative
    }

    /* generic unstable text: continuous async RGB-slice glitch */
    .unstable {
      position: relative
    }

    .unstable::before,
    .unstable::after {
      content: attr(data-text);
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      pointer-events: none;
    }

    @media (prefers-reduced-motion:no-preference) {
      .unstable::before {
        color: var(--red);
        animation: u-a 2.6s steps(3, jump-end) infinite
      }

      .unstable::after {
        color: var(--cyan);
        animation: u-b 2.6s steps(3, jump-end) infinite
      }
    }

    @media (prefers-reduced-motion:reduce) {

      .unstable::before,
      .unstable::after {
        display: none
      }
    }

    @keyframes u-a {

      0%,
      80% {
        opacity: 0;
        clip-path: inset(0 0 100% 0);
        transform: translate(0)
      }

      82% {
        opacity: .75;
        clip-path: inset(0 0 70% 0);
        transform: translate(-4px, -1px)
      }

      86% {
        opacity: .75;
        clip-path: inset(35% 0 40% 0);
        transform: translate(3px, 1px)
      }

      90%,
      100% {
        opacity: 0;
        clip-path: inset(0 0 100% 0);
        transform: translate(0)
      }
    }

    @keyframes u-b {

      0%,
      78% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
        transform: translate(0)
      }

      81% {
        opacity: .75;
        clip-path: inset(55% 0 0 0);
        transform: translate(4px, 1px)
      }

      85% {
        opacity: .75;
        clip-path: inset(15% 0 45% 0);
        transform: translate(-3px, -1px)
      }

      89%,
      100% {
        opacity: 0;
        clip-path: inset(100% 0 0 0);
        transform: translate(0)
      }
    }

    .unstable.d1::before,
    .unstable.d1::after {
      animation-delay: -.7s
    }

    .unstable.d2::before,
    .unstable.d2::after {
      animation-delay: -1.5s
    }

    .unstable.d3::before,
    .unstable.d3::after {
      animation-delay: -2.1s
    }

    /* one-shot bigger tear, JS-triggered on random targets */
    .tear {
      position: relative
    }

    .tear.tear-burst::before,
    .tear.tear-burst::after {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    .tear.tear-burst::before {
      background: rgba(225, 74, 88, .16);
      animation: tear-a .3s steps(2, jump-end) 1 forwards
    }

    .tear.tear-burst::after {
      background: rgba(59, 208, 255, .12);
      animation: tear-b .3s steps(2, jump-end) 1 forwards
    }

    @keyframes tear-a {
      0% {
        clip-path: inset(20% 0 60% 0);
        transform: translateX(-10px)
      }

      50% {
        clip-path: inset(55% 0 15% 0);
        transform: translateX(8px)
      }

      100% {
        clip-path: inset(0 0 100% 0);
        transform: translateX(0)
      }
    }

    @keyframes tear-b {
      0% {
        clip-path: inset(60% 0 10% 0);
        transform: translateX(10px)
      }

      50% {
        clip-path: inset(10% 0 60% 0);
        transform: translateX(-8px)
      }

      100% {
        clip-path: inset(100% 0 0 0);
        transform: translateX(0)
      }
    }

    /* hover glitch: pure CSS, no JS needed */
    @keyframes mini-glitch {
      0% {
        transform: translate(0)
      }

      20% {
        transform: translate(-3px, 1px)
      }

      40% {
        transform: translate(3px, -1px)
      }

      60% {
        transform: translate(-2px, 0)
      }

      100% {
        transform: translate(0)
      }
    }

    .tag:hover {
      animation: mini-glitch .3s steps(2, jump-end) 1
    }

    h1 {
      font-family: var(--font-display);
      font-size: clamp(32px, 5vw, 52px);
      line-height: 1.08;
      font-weight: 700;
      letter-spacing: -.01em
    }

    h2 {
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 14px
    }

    p {
      color: var(--text-muted);
      font-size: 15.5px;
      max-width: 64ch;
      margin-bottom: 14px
    }

    p:last-child {
      margin-bottom: 0
    }

    .klauzula-box {
      position: relative;
      margin-top: 18px;
      padding: 18px 20px;
      background: var(--red-dim);
      border: 1px solid var(--border-red);
    }

    .tags {
      position: relative;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px
    }

    .tag {
      font-family: var(--font-mono);
      font-size: 11.5px;
      padding: 6px 11px;
      border: 1px solid var(--border-red);
      color: var(--red);
      cursor: default;
      transition: background .2s, color .2s;
    }

    .tag:hover {
      background: rgba(225, 74, 88, .16);
      color: var(--text)
    }

    .par {
      position: relative;
      display: block;
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--red);
      letter-spacing: .08em;
      margin-bottom: 8px
    }

    footer {
      border-top: 1px solid var(--border-red);
      padding: 56px 0 0;
      position: relative
    }

    .footer-meta {
      display: flex;
      justify-content: center;
      align-items: baseline;
      gap: 28px;
      flex-wrap: wrap;
      padding-bottom: 22px;
      font-family: var(--font-mono);
      font-size: 12px;
      color: var(--text-faint);
    }

    .footer-meta span:first-child {
      color: var(--text-muted);
      font-weight: 500
    }

    @media (max-width:520px) {
      .footer-meta {
        flex-direction: column;
        align-items: center;
        gap: 8px
      }
    }