@layer reset, tokens, base, layout, components, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body, h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  img, svg, picture { max-width: 100%; display: block; }
  a { color: inherit; }
  table { border-collapse: collapse; width: 100%; }
  summary::-webkit-details-marker { display: none; }
}

@layer tokens {
  @font-face { font-family: "Caveat Brush"; src: url("/wp-content/themes/ziege-archiv/fonts/caveatbrush-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: "Gabarito"; src: url("/wp-content/themes/ziege-archiv/fonts/gabarito-latin-var.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
  @font-face { font-family: "Manrope"; src: url("/wp-content/themes/ziege-archiv/fonts/manrope-latin-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
  @font-face { font-family: "Manrope"; src: url("/wp-content/themes/ziege-archiv/fonts/manrope-latin-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
}

@layer tokens {
  :root {
    --field:        #0a0e1c;
    --field-deep:   #070a14;
    --field-lift:   #16225c;
    --field-glow:   #1c2f7a;
    --ink:          #eaf0ff;
    --ink-dim:      #c2cdea;
    --ink-faint:    #9aa8d4;
    --accent:       #ff7ae0;
    --accent-deep:  #e052bf;
    --accent-dim:   #d9a1cc;
    --rule:         rgba(234, 240, 255, 0.10);
    --rule-strong:  rgba(234, 240, 255, 0.26);
    --frost:        rgba(255, 255, 255, 0.038);
    --frost-lift:   rgba(255, 255, 255, 0.07);
    --frost-edge:   rgba(255, 255, 255, 0.115);

    --display: "Gabarito", "Trebuchet MS", sans-serif;
    --body:    "Manrope", "Segoe UI", sans-serif;

    --flank: 76px;
    --shell: 1180px;
    --measure: 68ch;
    --r: 3px;

    --step--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.88rem);
    --step-0:  clamp(1.00rem, 0.96rem + 0.19vw, 1.12rem);
    --step-1:  clamp(1.25rem, 1.16rem + 0.42vw, 1.50rem);
    --step-2:  clamp(1.62rem, 1.42rem + 0.95vw, 2.20rem);
    --step-3:  clamp(2.10rem, 1.68rem + 2.00vw, 3.40rem);
    --step-4:  clamp(2.90rem, 1.90rem + 4.70vw, 6.40rem);
  }
}

@layer base {
  body {
    min-width: 320px;
    margin: 0;
    background: var(--field);
    color: var(--ink);
    font: 400 var(--step-0)/1.62 var(--body);
    letter-spacing: 0.002em;
    overflow-x: hidden;
  }
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(64rem 46rem at 76% -10%, rgba(255, 122, 224, 0.10), transparent 60%),
      radial-gradient(70rem 52rem at 18% -4%, rgba(28, 47, 122, 0.72), transparent 64%),
      radial-gradient(46rem 40rem at 96% 46%, rgba(22, 34, 92, 0.60), transparent 66%),
      linear-gradient(102deg, transparent 34%, rgba(198, 216, 255, 0.10) 46%, rgba(198, 216, 255, 0.03) 52%, transparent 60%),
      repeating-linear-gradient(90deg, rgba(234, 240, 255, 0.028) 0 1px, transparent 1px 8.5rem);
  }
  body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.42;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  }
  h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; line-height: 1.02; letter-spacing: -0.022em; text-wrap: balance; }
  h1 { font-size: var(--step-4); }
  .cz-band h1 { max-width: none; font-size: clamp(1.85rem, 1.05rem + 2.1vw, 2.9rem); }
  h2 { font-size: clamp(1.85rem, 1.30rem + 1.75vw, 2.85rem); }
  h3 { font-size: var(--step-1); letter-spacing: -0.012em; }
  a { text-decoration-color: var(--accent-deep); text-underline-offset: 0.22em; }
  a:hover { text-decoration-color: var(--accent); }
  :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  ::selection { background: var(--accent); color: var(--field-deep); }
}

@layer layout {
  .cz-shell { position: relative; z-index: 1; margin-left: var(--flank); overflow-x: clip; }
  .cz-wrap { width: min(100% - 2.5rem, var(--shell)); margin-inline: auto; }
  .cz-prose { max-width: var(--measure); text-align: justify; hyphens: auto; }
  .cz-prose p + p { margin-top: 1.05em; }
  .cz-prose strong { color: #fff; font-weight: 700; }

  .cz-flank {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: var(--flank);
    display: flex; flex-direction: column; align-items: center; gap: 1.6rem;
    padding: 1.05rem 0 1.3rem;
    background: linear-gradient(180deg, var(--field-deep), #0c1436);
    border-right: 1px solid var(--rule);
    overflow-y: auto; scrollbar-width: none;
  }
  .cz-flank::-webkit-scrollbar { display: none; }
  .cz-flank__rule { position: absolute; top: 0; left: -1px; width: 2px; height: var(--read, 0%); background: var(--accent); transition: height 0.18s linear; }
  .cz-flank__nav { display: flex; flex-direction: column; align-items: center; gap: 1.22rem; }
  .cz-flank__nav a[aria-current="page"]::after { content: ""; display: block; width: 4px; height: 4px; margin: 0.45rem auto 0; border-radius: 50%; background: var(--accent); }
  .cz-flank__nav a {
    writing-mode: vertical-rl; transform: rotate(180deg);
    font: 700 0.68rem/1 var(--display);
    text-transform: uppercase; letter-spacing: 0.22em; white-space: nowrap;
    color: var(--ink-faint); text-decoration: none;
    transition: color 0.18s ease;
  }
  .cz-flank__nav a:hover, .cz-flank__nav a[aria-current="page"] { color: var(--accent); }
  .cz-flank__pos { margin-top: auto; writing-mode: vertical-rl; font: 700 0.62rem/1 var(--display); letter-spacing: 0.34em; text-transform: uppercase; color: var(--ink-faint); }

  .cz-bar { position: relative; z-index: 30; border-bottom: 1px solid var(--rule); background: rgba(4, 7, 18, 0.55); }
  .cz-bar__in { display: flex; align-items: center; justify-content: flex-end; gap: 0.95rem; min-height: 2.5rem; padding-block: 0.4rem; }
  .cz-bar__lb { font: 700 0.55rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-faint); }
  .cz-bar a {
    font: 700 0.6rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.15em;
    color: var(--ink-dim); text-decoration: none; white-space: nowrap;
    padding-bottom: 2px; border-bottom: 1px solid transparent;
    transition: color 0.18s ease, border-color 0.18s ease;
  }
  .cz-bar a:hover { color: var(--accent); border-bottom-color: var(--accent); }
  .cz-bar__gap { width: 1px; height: 0.85rem; background: var(--rule-strong); }

  .cz-band { position: relative; padding-block: clamp(3.4rem, 7vw, 6.6rem); }
  .cz-band--deep { background: linear-gradient(180deg, transparent, rgba(3, 6, 14, 0.78) 20%, rgba(3, 6, 14, 0.78) 80%, transparent); }
  .cz-band + .cz-band { border-top: 1px solid var(--rule); }
}

@layer components {
  .cz-mark { display: grid; place-items: center; gap: 0.4rem; text-decoration: none; }
  .cz-mark svg { width: 38px; height: 38px; padding: 3px; border: 1px solid var(--frost-edge); border-radius: 3px; background: var(--frost); }
  .cz-mark span { font: 700 0.48rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-faint); }

  .cz-eyebrow {
    display: inline-flex; align-items: center; gap: 0.6rem;
    font: 700 var(--step--1)/1 var(--display);
    text-transform: uppercase; letter-spacing: 0.24em; color: var(--accent);
  }
  .cz-eyebrow::before { content: ""; width: 2.2rem; height: 2px; background: var(--accent); }

  .cz-lede { max-width: 46ch; margin-top: 1.3rem; font-size: var(--step-1); line-height: 1.42; color: var(--ink-dim); }

  .cz-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(1.6rem, 4vw, 3.8rem) clamp(2rem, 5vw, 4.5rem); align-items: start; }
  .cz-hero > .cz-hero__head { grid-column: 1 / -1; }
  .cz-hero h1 { margin-top: 1.4rem; max-width: 30ch; font-size: clamp(2.35rem, 1.30rem + 3.5vw, 4.55rem); }
  .cz-stage h1 { margin-top: 1.2rem; max-width: 24ch; font-size: clamp(2.1rem, 1.10rem + 2.9vw, 3.55rem); }
  .cz-stage .cz-lede { max-width: 42ch; }
  .cz-stage .cz-note { margin-top: 1.8rem; }
  .cz-hero__side { align-self: start; }
  .cz-hero h1 em, .cz-stage h1 em { font-style: normal; color: var(--accent); }

  .cz-pitch { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
  .cz-pitch svg { position: absolute; top: 50%; left: -6%; width: 116%; height: 128%; transform: translateY(-50%); opacity: 1; }
  .cz-pitch line, .cz-pitch path, .cz-pitch circle, .cz-pitch rect, .cz-pitch ellipse { fill: none; stroke: rgba(234, 240, 255, 0.16); stroke-width: 1; vector-effect: non-scaling-stroke; }
  .cz-pitch .m { stroke: rgba(255, 122, 224, 0.42); stroke-width: 1.8; }
  .cz-pitch .s path { stroke: rgba(234, 240, 255, 0.13); }
  .cz-pitch .f path { stroke: rgba(234, 240, 255, 0.20); stroke-width: 1.3; }
  .cz-pitch .p { stroke: rgba(234, 240, 255, 0.215); }
  .cz-pitch .b circle { stroke: rgba(255, 122, 224, 0.4); stroke-width: 1.6; }
  .cz-pitch .d { stroke: rgba(234, 240, 255, 0.22); stroke-dasharray: 3 7; }

  .cz-stack { position: relative; display: grid; gap: 0.55rem; }
  .cz-stratum {
    position: relative;
    display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.4rem 1.2rem;
    padding: 0.95rem 1.15rem;
    background: var(--frost);
    border: 1px solid var(--frost-edge);
    border-left: 2px solid var(--rule-strong);
    border-radius: var(--r);
    backdrop-filter: blur(9px) saturate(1.15);
    transform: translateX(calc(var(--i, 0) * 0.85rem));
    transition: transform 0.24s ease, background 0.24s ease, border-color 0.24s ease;
  }
  .cz-stratum:hover, .cz-stratum:focus-within { background: var(--frost-lift); border-left-color: var(--accent); transform: translateX(calc(var(--i, 0) * 0.85rem + 0.5rem)); }
  .cz-stratum__club { grid-area: 1 / 1; font: 700 var(--step-0)/1.2 var(--display); letter-spacing: -0.01em; }
  .cz-stratum__years { grid-area: 2 / 1; font-variant-numeric: tabular-nums; font-size: var(--step--1); color: var(--ink-faint); letter-spacing: 0.06em; }
  .cz-stratum__score { grid-area: 1 / 2 / span 2 / 3; justify-self: end; }

  .cz-score { display: inline-grid; grid-template-columns: auto auto auto; align-items: baseline; gap: 0 0.5rem; justify-items: end; justify-content: end; font-family: var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
  .cz-score b { font-size: var(--step-2); font-weight: 800; }
  .cz-score i { font-style: normal; width: 1px; height: 1.05em; background: var(--rule-strong); transform: translateY(0.1em); }
  .cz-score s { text-decoration: none; font-size: var(--step-2); font-weight: 800; color: var(--accent); }
  .cz-score small { grid-column: 1 / -1; margin-top: 0.28rem; font: 700 0.58rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.20em; color: var(--ink-faint); }

  .cz-figure { font-family: var(--display); font-weight: 800; font-variant-numeric: tabular-nums; font-size: var(--step-4); line-height: 0.86; letter-spacing: -0.045em; color: var(--accent); }
  .cz-figure--ghost { color: transparent; -webkit-text-stroke: 1px var(--rule-strong); }

  .cz-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
  .cz-facts > div { background: var(--field); padding: 1rem 1.1rem; }
  .cz-facts dt { font: 700 0.62rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.20em; color: var(--ink-faint); }
  .cz-facts dd { margin-top: 0.5rem; font-family: var(--display); font-weight: 700; font-size: var(--step-1); font-variant-numeric: tabular-nums; }
  .cz-facts dd span { display: block; margin-top: 0.15rem; font: 400 var(--step--1)/1.4 var(--body); color: var(--ink-dim); letter-spacing: 0; }

  .cz-table { font-variant-numeric: tabular-nums; }
  .cz-table caption { text-align: left; font: 700 0.62rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.20em; color: var(--ink-faint); padding-bottom: 0.85rem; }
  .cz-table th { text-align: left; font: 700 0.62rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-faint); padding: 0 0.9rem 0.7rem 0; border-bottom: 1px solid var(--rule-strong); }
  .cz-table td { padding: 0.72rem 0.9rem 0.72rem 0; border-bottom: 1px solid var(--rule); }
  .cz-table td:first-child { color: var(--ink-faint); white-space: nowrap; }
  .cz-table th:last-child, .cz-table td:last-child { text-align: right; padding-right: 0; }
  .cz-table tr:hover td { background: rgba(255, 255, 255, 0.028); }
  .cz-table b { color: var(--accent); font-weight: 700; }
  .cz-scroll { overflow-x: auto; }

  .cz-honours { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 0.55rem; }
  .cz-honour { padding: 1rem 1.1rem; background: var(--frost); border: 1px solid var(--frost-edge); border-radius: var(--r); }
  .cz-honour b { display: block; font: 800 var(--step-1)/1 var(--display); font-variant-numeric: tabular-nums; }
  .cz-honour span { display: block; margin-top: 0.45rem; font-size: var(--step--1); color: var(--ink-dim); }

  .cz-cross { display: block; width: 100%; height: auto; overflow: visible; }
  .cz-cross path { fill: none; stroke-linecap: round; }
  .cz-cross .t { stroke: var(--accent); stroke-width: 2.4; stroke-dasharray: var(--len, 760); stroke-dashoffset: 0; }
  .cz-cross .b { transform-box: fill-box; transform-origin: center; }
  .cz-cross .g { stroke: var(--rule-strong); stroke-width: 1; }
  .cz-cross .b { fill: var(--accent); }
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .cz-cross .t { animation: cz-draw 1s linear both; animation-timeline: view(); animation-range: entry 12% cover 42%; }
      .cz-cross .b { animation: cz-pop 1s linear both; animation-timeline: view(); animation-range: entry 18% cover 46%; }
    }
  }
  @keyframes cz-draw { from { stroke-dashoffset: var(--len, 760); } to { stroke-dashoffset: 0; } }
  @keyframes cz-pop { from { opacity: 0; transform: scale(0.4); } to { opacity: 1; transform: scale(1); } }

  .cz-faq { display: grid; gap: 0.5rem; }
  .cz-faq details { background: var(--frost); border: 1px solid var(--frost-edge); border-radius: var(--r); }
  .cz-faq summary { display: flex; align-items: baseline; gap: 0.9rem; padding: 1rem 1.15rem; cursor: pointer; list-style: none; }
  .cz-faq summary::after { content: ""; margin-left: auto; width: 0.62rem; height: 0.62rem; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg) translateY(-0.12rem); transition: transform 0.2s ease; }
  .cz-faq details[open] summary::after { transform: rotate(225deg) translateY(-0.12rem); }
  .cz-faq h3 { font-size: var(--step-0); font-weight: 700; letter-spacing: -0.005em; }
  .cz-faq__a { padding: 0 1.15rem 1.25rem; color: var(--ink); max-width: none; text-align: justify; hyphens: auto; }

  .cz-partner { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-block: 1.4rem; }
  .cz-partner__label { font: 700 0.60rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-faint); }
  .cz-partner a { display: inline-block; margin-top: 0.9rem; }

  .cz-more { display: flex; width: fit-content; align-items: center; gap: 0.7rem; margin-top: 1.6rem; font: 700 var(--step--1)/1 var(--display); text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent); text-decoration: none; }
  .cz-more::after { content: ""; width: 1.9rem; height: 1px; background: var(--accent); transition: width 0.2s ease; }
  .cz-more:hover::after { width: 3.1rem; }

  .cz-foot { border-top: 1px solid var(--rule-strong); background: var(--field-deep); padding-block: 3.2rem 2.6rem; }
  .cz-foot__grid { display: grid; grid-template-columns: 1.5fr 0.9fr 1.1fr 0.9fr; gap: 2rem 2.6rem; }
  .cz-foot__brand { display: flex; flex-direction: column; gap: 0.85rem; }
  .cz-foot__logo { font: 800 1rem/1 var(--display); letter-spacing: -0.01em; }
  .cz-foot__logo::after { content: ""; display: block; width: 2.4rem; height: 2px; margin-top: 0.7rem; background: var(--accent); }
  .cz-foot__note { font: 400 0.68rem/1.5 var(--body); color: var(--ink-faint); padding-top: 0.7rem; border-top: 1px solid var(--rule); }
  .cz-foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 0.6rem; }
  .cz-foot__t { font: 700 0.56rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent); margin-bottom: 0.3rem; }
  .cz-foot a { color: var(--ink-dim); text-decoration: none; font-size: var(--step--1); }
  .cz-foot__col a { border-bottom: 1px solid transparent; transition: color 0.18s ease, border-color 0.18s ease; }
  .cz-foot__col a:hover { border-bottom-color: var(--accent); }
  .cz-foot a:hover { color: var(--accent); }
  .cz-foot p { font-size: var(--step--1); color: var(--ink-faint); max-width: 42ch; }
  .cz-foot .cz-search { margin-top: 0.5rem; }
  .cz-top {
    position: fixed; z-index: 30; right: clamp(1rem, 2.5vw, 2rem); bottom: clamp(1rem, 2.5vw, 2rem);
    display: grid; place-items: center; width: 2.9rem; height: 2.9rem;
    color: var(--accent); background: rgba(7, 10, 20, 0.86); border: 1px solid var(--frost-edge);
    border-radius: 50%; backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden; transform: translateY(0.6rem);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s, border-color 0.2s ease;
  }
  .cz-top.is-on { opacity: 1; visibility: visible; transform: none; }
  .cz-top svg { width: 1.15rem; height: 1.15rem; }
  .cz-top:hover { border-color: var(--accent); background: rgba(7, 10, 20, 0.96); }
  .cz-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

  .cz-search { display: flex; gap: 0.5rem; }
  .cz-search input { background: var(--frost); border: 1px solid var(--frost-edge); border-radius: var(--r); padding: 0.6rem 0.8rem; color: var(--ink); font: 400 var(--step--1) var(--body); min-width: 0; }
  .cz-search button { background: none; border: 1px solid var(--accent); border-radius: var(--r); color: var(--accent); padding: 0.6rem 0.95rem; font: 700 var(--step--1) var(--display); text-transform: uppercase; letter-spacing: 0.14em; cursor: pointer; }
}

@layer utilities {
  .cz-stack-lg > * + * { margin-top: clamp(1.6rem, 3vw, 2.6rem); }
  .cz-stack-md > * + * { margin-top: 1.2rem; }
  .cz-stack-md > .cz-scroll + .cz-prose,
  .cz-stack-md > .cz-viz + .cz-prose,
  .cz-stack-md > figure + .cz-prose,
  .cz-stack-md > .cz-prose + .cz-scroll,
  .cz-stack-md > .cz-honours + .cz-prose { margin-top: clamp(2rem, 3.6vw, 3.2rem); }
  .cz-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr); gap: clamp(1.8rem, 4vw, 3.6rem); align-items: start; }
  .cz-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (min-width: 1100px) and (max-height: 1000px) {
  .cz-flank__pos { display: none; }
}

@media (min-width: 1100px) and (max-height: 880px) {
  .cz-flank__nav { gap: 0.9rem; }
  .cz-flank__nav a { font-size: 0.6rem; letter-spacing: 0.08em; }
}

@media (max-width: 1099px) {
  :root { --flank: 0px; }
  .cz-shell { margin-left: 0; }
  .cz-flank {
    position: sticky; inset: 0 0 auto 0; width: 100%;
    flex-direction: row; align-items: center; gap: 1rem;
    padding: 0.7rem 1.25rem; border-right: 0; border-bottom: 1px solid var(--rule);
  }
  .cz-flank__nav { flex-direction: row; align-items: center; gap: 1.05rem; overflow-x: auto; scrollbar-width: none; }
  .cz-flank__nav a { writing-mode: horizontal-tb; transform: none; letter-spacing: 0.12em; font-size: 0.68rem; }
  .cz-flank__pos { display: none; }
  .cz-bar__in { justify-content: flex-start; overflow-x: auto; scrollbar-width: none; }
  .cz-bar__in::-webkit-scrollbar { display: none; }
  .cz-flank__rule { top: auto; bottom: -1px; left: 0; width: var(--read, 0%); height: 2px; }
  .cz-hero, .cz-split { grid-template-columns: 1fr; }
  .cz-stratum { transform: none; }
  .cz-stratum:hover, .cz-stratum:focus-within { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

@layer components {
  .cz-score--lead { justify-items: start; justify-content: start; }
  .cz-score--lead b, .cz-score--lead s { font-size: clamp(2.4rem, 1.6rem + 2.6vw, 4rem); }
  .cz-score--lead i { height: 1.15em; }

  .cz-plate { position: relative; border: 1px solid var(--frost-edge); border-radius: var(--r); overflow: hidden; background: var(--field-deep); }
  .cz-plate img { width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
  .cz-plate--tall { aspect-ratio: 4 / 5; }
  .cz-plate--wide { aspect-ratio: 16 / 9; }
  .cz-plate figcaption { position: absolute; inset: auto 0 0 0; padding: 0.7rem 0.95rem; background: linear-gradient(0deg, rgba(9, 16, 46, 0.92), transparent); font: 700 0.60rem/1.3 var(--display); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-dim); }
  .cz-hero__plate { position: relative; margin-top: 1.8rem; }
  
}

@layer components {
  .cz-liga { padding: 1.3rem 1.4rem; background: var(--frost); border: 1px solid var(--frost-edge); border-radius: var(--r); backdrop-filter: blur(9px); }
  .cz-liga__rank { display: flex; align-items: baseline; gap: 0.7rem; margin-top: 0.7rem; }
  .cz-liga__rank b { font: 800 var(--step-4)/0.86 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.045em; color: var(--accent); }
  .cz-liga__rank span { font-size: var(--step--1); color: var(--ink-dim); }
  .cz-liga__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.2rem; margin-top: 1.2rem; padding-top: 1.1rem; border-top: 1px solid var(--rule); }
  .cz-liga__grid dt { font: 700 0.60rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-faint); }
  .cz-liga__grid dd { margin-top: 0.35rem; font: 700 var(--step-1)/1 var(--display); font-variant-numeric: tabular-nums; }
  .cz-liga__grid dd span { font-size: var(--step--1); color: var(--ink-dim); }
  .cz-liga__src { margin-top: 1.1rem; font-size: var(--step--1); line-height: 1.5; color: var(--ink-faint); }

  .cz-crest { border: 1px solid var(--frost-edge); border-radius: var(--r); background: var(--frost); padding: 1rem; }
  .cz-crest svg { width: 100%; height: auto; }
  .cz-crest figcaption { margin-top: 0.8rem; font: 700 0.60rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-faint); }

  .cz-stand { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.7rem; border: 1px solid var(--frost-edge); border-radius: var(--r); font: 700 0.62rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-faint); }
  .cz-stand b { color: var(--accent); font-weight: 700; }

  .cz-next { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.55rem; }
  .cz-next a { display: block; padding: 1rem 1.15rem; background: var(--frost); border: 1px solid var(--frost-edge); border-left: 2px solid var(--rule-strong); border-radius: var(--r); text-decoration: none; transition: border-color 0.2s ease, background 0.2s ease; }
  .cz-next a:hover { border-left-color: var(--accent); background: var(--frost-lift); }
  .cz-next b { display: block; font: 700 var(--step-0)/1.2 var(--display); }
  .cz-next span { display: block; margin-top: 0.4rem; font-size: var(--step--1); color: var(--ink-dim); }
}

@layer components {
  .cz-stage { position: relative; min-height: min(86vh, 52rem); display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, 0.68fr); gap: clamp(1.6rem, 3vw, 3.2rem); align-items: center; }
  .cz-stage__art { position: absolute; inset: -7rem -8rem -5rem 22%; z-index: -1; pointer-events: none; overflow: hidden; }
  .cz-stage__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10, 14, 28, 0.92) 0%, rgba(10, 14, 28, 0.52) 16%, transparent 42%, transparent 62%, rgba(10, 14, 28, 0.55) 82%, rgba(10, 14, 28, 0.88) 100%); }
  .cz-stage__art picture { display: block; height: 100%; }
  .cz-stage__art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; opacity: 1; mix-blend-mode: screen; filter: saturate(0.55) contrast(1.3) brightness(1.25) hue-rotate(-8deg); mask-image: radial-gradient(76% 88% at 52% 42%, #000 26%, rgba(0,0,0,.55) 58%, transparent 82%); -webkit-mask-image: radial-gradient(76% 88% at 52% 42%, #000 26%, rgba(0,0,0,.55) 58%, transparent 82%); }

  .cz-numeral { position: absolute; z-index: -1; top: -3rem; right: 30%; pointer-events: none; font: 800 clamp(12rem, 24vw, 25rem)/0.78 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 2.5px rgba(255, 122, 224, 0.62); filter: drop-shadow(0 0 3.5rem rgba(255, 122, 224, 0.18)); }
  .cz-numeral__note { position: absolute; z-index: 1; top: 1.4rem; right: 30%; transform: translateX(9.5rem); max-width: 11rem; font: 700 0.56rem/1.6 var(--display); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-faint); }

  .cz-wordmark { position: absolute; z-index: 0; left: 28%; bottom: 0.5rem; width: min(40rem, 46%); pointer-events: none; }
  .cz-wordmark text { font: 400 178px "Caveat Brush", var(--display); letter-spacing: 0.005em; fill: #fff; fill-opacity: 0.96; }
  .cz-wordmark path { fill: none; stroke: var(--accent); stroke-width: 11; stroke-linecap: round; filter: drop-shadow(0 0 1.4rem rgba(255, 122, 224, 0.35)); }

  .cz-rail { border-left: 1px solid var(--rule); padding: 1.1rem 0 1.1rem clamp(1rem, 2vw, 1.6rem); background: linear-gradient(90deg, rgba(7, 10, 20, 0.62), rgba(7, 10, 20, 0.28)); backdrop-filter: blur(3px); }
  .cz-rail__row { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; gap: 0.9rem; padding: 0.72rem 0; border-bottom: 1px solid var(--rule); text-decoration: none; transition: background 0.2s ease; }
  .cz-rail__row:first-of-type { border-top: 1px solid var(--rule); }
  .cz-rail__row:hover { background: rgba(255, 255, 255, 0.035); }
  .cz-rail__mark { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--frost-edge); border-radius: 2px; background: var(--frost); font: 700 0.62rem/1 var(--display); letter-spacing: 0.08em; color: var(--ink-faint); }
  .cz-rail__club { font: 700 0.86rem/1.25 var(--display); }
  .cz-rail__meta { display: block; margin-top: 0.15rem; font: 400 0.66rem/1 var(--body); font-variant-numeric: tabular-nums; color: var(--ink-faint); letter-spacing: 0.05em; }
  .cz-rail__num { text-align: right; font: 800 1.46rem/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
  .cz-rail__num s { text-decoration: none; color: var(--accent); }
  .cz-rail__num i { font-style: normal; color: var(--ink-faint); font-weight: 400; margin: 0 0.18rem; }
  .cz-rail__num small { display: block; margin-top: 0.22rem; font: 700 0.52rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-faint); }

  .cz-note { border-left: 2px solid var(--accent); padding: 0.2rem 0 0.2rem 1rem; }
  .cz-note b { display: block; font: 800 var(--step-1)/1.1 var(--display); font-variant-numeric: tabular-nums; }
  .cz-note span { display: block; margin-top: 0.5rem; font-size: var(--step--1); line-height: 1.55; color: var(--ink-dim); max-width: 26ch; }

  .cz-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.6rem; }
  .cz-tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 0.45rem; height: 13rem; padding: 1.1rem 1.2rem; overflow: hidden; background: var(--field-deep); border: 1px solid var(--frost-edge); border-radius: var(--r); text-decoration: none; }
  .cz-tile > .cz-tile__art { display: block; position: absolute; inset: 0 0 auto; height: 62%; overflow: hidden; z-index: 0; opacity: 0.9; }
  .cz-tile__art:has(img) { opacity: 0.85; }
  .cz-tile__art picture { display: block; height: 100%; }
  .cz-tile__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
  .cz-tile__art svg { display: block; width: 100%; height: 100%; }
  .cz-tile__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--field-deep) 6%, rgba(16, 26, 69, 0.72) 34%, rgba(16, 26, 69, 0.10) 78%); }
  .cz-tile > * { position: relative; z-index: 1; }
  .cz-tile__label { font: 700 0.56rem/1.4 var(--display); text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-faint); }
  .cz-tile__val { font: 800 var(--step-2)/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
  .cz-tile__val em { font-style: normal; color: var(--accent); }
  .cz-tile::after { content: ""; position: absolute; z-index: 1; right: 1.1rem; bottom: 1.1rem; width: 0.72rem; height: 0.72rem; border-top: 2px solid var(--accent); border-right: 2px solid var(--accent); transform: rotate(45deg); opacity: 0.7; transition: transform 0.2s ease; }
  .cz-tile:hover::after { transform: rotate(45deg) translate(3px, -3px); opacity: 1; }
  .cz-tile__art { transition: opacity 0.3s ease; }
  .cz-tile:hover .cz-tile__art, .cz-tile:focus-visible .cz-tile__art { opacity: 1; }
  .cz-tile__art .cz-art__star, .cz-tile__art .cz-art__ring, .cz-tile__art .cz-art__dot,
  .cz-tile__art .cz-art__start, .cz-tile__art .cz-art__tip {
    transform-box: fill-box; transform-origin: center;
    transition: transform 0.34s cubic-bezier(0.2, 0.7, 0.3, 1), opacity 0.34s ease;
  }
  .cz-tile__art .cz-art__line, .cz-tile__art .cz-art__route { transition: stroke-width 0.3s ease, opacity 0.3s ease; }
  .cz-tile:hover .cz-art__star, .cz-tile:focus-visible .cz-art__star { transform: scale(1.14) rotate(-6deg); }
  .cz-tile:hover .cz-art__ring, .cz-tile:focus-visible .cz-art__ring { transform: scale(1.16); opacity: 0.55; }
  .cz-tile:hover .cz-art__ring + .cz-art__ring, .cz-tile:focus-visible .cz-art__ring + .cz-art__ring { transform: scale(1.3); }
  .cz-tile:hover .cz-art__dot, .cz-tile:focus-visible .cz-art__dot { transform: scale(1.42); }
  .cz-tile:hover .cz-art__dot:nth-of-type(2) { transition-delay: 0.06s; }
  .cz-tile:hover .cz-art__dot:nth-of-type(3) { transition-delay: 0.12s; }
  .cz-tile:hover .cz-art__dot:nth-of-type(4) { transition-delay: 0.18s; }
  .cz-tile:hover .cz-art__route, .cz-tile:focus-visible .cz-art__route { opacity: 1; stroke-width: 2.2; }
  .cz-tile:hover .cz-art__line, .cz-tile:focus-visible .cz-art__line { stroke-width: 4; opacity: 1; }
  .cz-tile:hover .cz-art__tip, .cz-tile:focus-visible .cz-art__tip { transform: translateX(5px); }
  .cz-tile:hover .cz-art__start, .cz-tile:focus-visible .cz-art__start { transform: scale(1.35); }
}

@media (max-width: 1099px) {
  .cz-stage { grid-template-columns: 1fr; min-height: 0; }
  .cz-stage__art { inset: auto -1rem -2rem 20%; }
  .cz-numeral { left: auto; right: -0.5rem; top: -2rem; font-size: clamp(9rem, 40vw, 16rem); }
  .cz-numeral__note { display: none; }
  .cz-wordmark { position: static; width: 100%; margin: 1.6rem 0 0; }
  .cz-rail { border-left: 0; padding-left: 0; }
}

@layer components {
  .cz-split { align-items: stretch; }
  .cz-split > * { min-width: 0; }
  .cz-prose--wide { max-width: none; }
  .cz-prose--wide p { max-width: none; }

  .cz-partner-card { display: flex; flex-direction: column; gap: 1.15rem; padding: 1.3rem 1.4rem; background: var(--frost); border: 1px solid var(--frost-edge); border-radius: var(--r); }
  .cz-partner-card__logo { display: block; padding: 0.9rem 1.1rem; background: rgba(255, 255, 255, 0.045); border: 1px solid var(--rule); border-radius: 2px; }
  .cz-partner-card__logo img { width: 100%; height: auto; }
  .cz-partner-card p { font-size: var(--step--1); line-height: 1.6; color: var(--ink-dim); }
  .cz-partner-card__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8rem 1rem; padding-top: 1.05rem; border-top: 1px solid var(--rule); }
  .cz-partner-card__meta dt { font: 700 0.56rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-faint); }
  .cz-partner-card__meta dd { margin-top: 0.35rem; font: 700 var(--step--1)/1.3 var(--display); }

  .cz-panel { padding: 1.3rem 1.4rem; background: rgba(7, 10, 20, 0.78); border: 1px solid var(--frost-edge); border-radius: var(--r); backdrop-filter: blur(3px); }
  .cz-panel h2, .cz-panel h3 { font-size: var(--step-0); letter-spacing: -0.012em; }
  .cz-panel > * + * { margin-top: 1.05rem; }
  .cz-ledger { display: grid; gap: 0; }
  .cz-ledger div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.62rem 0; border-bottom: 1px solid var(--rule); }
  .cz-ledger div:last-child { border-bottom: 0; }
  .cz-ledger dt { font-size: var(--step--1); color: var(--ink-dim); }
  .cz-ledger dd { font: 700 var(--step-0)/1 var(--display); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .cz-ledger dd em { font-style: normal; color: var(--accent); }
  .cz-panel__foot { font-size: var(--step--1); line-height: 1.55; color: var(--ink-dim); }

  .cz-timeline { position: relative; padding-left: 1.5rem; }
  .cz-timeline::before { content: ""; position: absolute; top: 0.4rem; bottom: 0.4rem; left: 3px; width: 1px; background: var(--rule-strong); }
  .cz-timeline li { position: relative; padding: 0.62rem 0; border-bottom: 1px solid var(--rule); }
  .cz-timeline li:last-child { border-bottom: 0; }
  .cz-timeline li::before { content: ""; position: absolute; top: 1.05rem; left: -1.5rem; width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); }
  .cz-timeline li[data-now]::before { background: var(--accent); box-shadow: 0 0 0 4px rgba(255, 122, 224, 0.14); }
  .cz-timeline b { display: block; font: 700 var(--step--1)/1.2 var(--display); font-variant-numeric: tabular-nums; color: var(--accent); letter-spacing: 0.06em; }
  .cz-timeline span { display: block; margin-top: 0.22rem; font-size: var(--step--1); }
}

@layer components {
  .cz-viz { margin-top: 1.9rem; border: 1px solid var(--rule); border-radius: var(--r); background: linear-gradient(180deg, rgba(255, 255, 255, 0.028), rgba(7, 10, 20, 0.22)); padding: clamp(1rem, 2.4vw, 1.7rem) clamp(0.9rem, 2vw, 1.5rem) 0.9rem; }
  .cz-viz svg { display: block; width: 100%; height: auto; overflow: visible; }
  .cz-viz figcaption { margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); font: 700 0.60rem/1.4 var(--display); text-transform: uppercase; letter-spacing: 0.17em; color: var(--ink-faint); }

  .cz-viz__base, .cz-viz__lane { stroke: var(--rule-strong); stroke-width: 1; }
  .cz-viz__tick, .cz-viz__grid, .cz-viz__stem { stroke: var(--rule); stroke-width: 1; }
  .cz-viz__yr, .cz-viz__cc, .cz-viz__cnt, .cz-viz__lane-lb, .cz-viz__row-sub, .cz-viz__val-sub { font: 700 11px/1 var(--display); letter-spacing: 0.13em; text-transform: uppercase; fill: var(--ink-faint); }
  .cz-viz__cnt { fill: var(--rule-strong); }
  .cz-viz__val { font: 800 17px/1 var(--display); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; fill: var(--ink); }
  .cz-viz__row-lb { font: 700 14px/1 var(--display); fill: var(--ink); }
  .cz-viz__bar { fill: rgba(255, 122, 224, 0.16); stroke: rgba(255, 122, 224, 0.42); stroke-width: 1; }
  .cz-viz__bar-in { fill: var(--accent); fill-opacity: 0.72; }
  .cz-viz__span { fill: rgba(255, 122, 224, 0.2); stroke: rgba(255, 122, 224, 0.5); stroke-width: 1; }
  .cz-viz__span--now { fill: var(--accent); fill-opacity: 0.78; stroke: var(--accent); }
  .cz-viz__pip { fill: var(--field-deep); stroke: var(--accent); stroke-width: 1.6; }
  .cz-viz__pip-n { font: 800 9px/1 var(--display); fill: var(--accent); }
  .cz-viz__seg:hover .cz-viz__bar { fill: rgba(255, 122, 224, 0.26); }

  .cz-viz__key { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.55rem 1.1rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
  .cz-viz__key li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.4rem; padding-bottom: 0.4rem; border-bottom: 1px solid var(--rule); }
  .cz-viz__key span { font: 700 0.72rem/1.3 var(--display); letter-spacing: 0.02em; }
  .cz-viz__key b { font: 800 1rem/1 var(--display); font-variant-numeric: tabular-nums; color: var(--accent); }
  .cz-viz__key i { grid-column: 1 / -1; font: 400 0.62rem/1 var(--body); font-style: normal; letter-spacing: 0.06em; color: var(--ink-faint); }

  .cz-scroll { overflow-x: auto; scrollbar-width: thin; }
}

@media (max-width: 899px) {
  .cz-viz--lanes svg, .cz-viz--axis svg, .cz-viz--pips svg { min-width: 640px; }
  .cz-viz--lanes, .cz-viz--axis, .cz-viz--pips { overflow-x: auto; scrollbar-width: thin; }
  .cz-viz--rows svg { min-width: 460px; }
  .cz-viz--rows { overflow-x: auto; scrollbar-width: thin; }
}

@media (max-width: 1099px) {
  .cz-flank__nav {
    mask-image: linear-gradient(90deg, transparent 0, #000 1.1rem, #000 calc(100% - 2.2rem), transparent 100%);
    scroll-snap-type: x proximity; scroll-padding-left: 1.1rem; padding-inline: 1.1rem;
  }
  .cz-flank__nav a { scroll-snap-align: start; }
}

@layer components {
  .cz-viz__chip rect { fill: rgba(255, 122, 224, 0.13); stroke: rgba(255, 122, 224, 0.45); stroke-width: 1; }
  .cz-viz__chip text { font: 700 8.5px/1 var(--display); text-transform: uppercase; letter-spacing: 0.09em; fill: var(--ink); }
  .cz-viz__chip:hover rect { fill: rgba(255, 122, 224, 0.24); }
}

@layer components {
  .cz-prose--wide { max-width: none; }
  .cz-prose--wide p { max-width: none; }

  .cz-head { margin-bottom: clamp(1.4rem, 2.6vw, 2.2rem); }
  .cz-head h2 { max-width: none; font-size: clamp(1.62rem, 0.92rem + 2.05vw, 2.48rem); }
  .cz-head .cz-eyebrow { margin-bottom: 0.7rem; }

  .cz-side { margin-top: 1.5rem; }
  .cz-side__t { font: 700 0.62rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.20em; color: var(--ink-faint); }
  .cz-count { display: grid; gap: 1px; margin-top: 0.85rem; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
  .cz-count > div { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.7rem; padding: 0.62rem 0.9rem; background: var(--field-deep); }
  .cz-count dt, .cz-count span { font: 400 var(--step--1)/1.3 var(--body); color: var(--ink-dim); }
  .cz-count dd { font: 800 1.05rem/1 var(--display); font-variant-numeric: tabular-nums; color: var(--ink); }
  .cz-count dd[data-now] { color: var(--accent); }

  .cz-meter { margin-top: 0.9rem; }
  .cz-meter__bar { display: flex; height: 2.2rem; border: 1px solid var(--frost-edge); border-radius: var(--r); overflow: hidden; }
  .cz-meter__seg { display: grid; place-items: center; font: 800 0.78rem/1 var(--display); font-variant-numeric: tabular-nums; color: var(--field-deep); }
  .cz-meter__seg:nth-child(1) { background: var(--accent); }
  .cz-meter__seg:nth-child(2) { background: rgba(255, 122, 224, 0.42); color: var(--ink); }
  .cz-meter__seg:nth-child(3) { background: rgba(255, 122, 224, 0.20); color: var(--ink); }
  .cz-meter__key { display: grid; gap: 0.35rem; margin: 0.8rem 0 0; padding: 0; list-style: none; }
  .cz-meter__key li { display: grid; grid-template-columns: 0.55rem 1fr auto; align-items: center; gap: 0.6rem; font: 400 var(--step--1)/1.3 var(--body); color: var(--ink-dim); }
  .cz-meter__key i { width: 0.55rem; height: 0.55rem; border-radius: 1px; }
  .cz-meter__key li:nth-child(1) i { background: var(--accent); }
  .cz-meter__key li:nth-child(2) i { background: rgba(255, 122, 224, 0.42); }
  .cz-meter__key li:nth-child(3) i { background: rgba(255, 122, 224, 0.20); }
  .cz-meter__key b { font: 700 var(--step--1)/1 var(--display); font-variant-numeric: tabular-nums; color: var(--ink); }

  .cz-index { display: grid; gap: 1px; margin-top: 0.85rem; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
  .cz-index a { display: block; padding: 0.7rem 0.95rem; background: var(--field-deep); text-decoration: none; transition: background 0.2s ease; }
  .cz-index a:hover { background: var(--frost-lift); }
  .cz-index b { display: block; font: 700 0.84rem/1.25 var(--display); color: var(--ink); }
  .cz-index span { display: block; margin-top: 0.18rem; font: 400 0.7rem/1.35 var(--body); color: var(--ink-faint); }

  .cz-hero__note { margin-bottom: 1.1rem; font: 700 0.58rem/1.65 var(--display); text-transform: uppercase; letter-spacing: 0.15em; color: var(--ink-faint); }
}

@layer components {
  .cz-tile__art--field {
    background:
      radial-gradient(circle at 62% 34%, rgba(255, 122, 224, 0.55) 0 6px, transparent 7px),
      radial-gradient(circle at 62% 34%, transparent 0 19px, rgba(255, 122, 224, 0.34) 19px 20.4px, transparent 21px),
      radial-gradient(circle at 24% 62%, transparent 0 8px, rgba(255, 122, 224, 0.5) 8px 10px, transparent 11px),
      repeating-linear-gradient(76deg, rgba(255, 122, 224, 0.13) 0 2px, transparent 2px 26px),
      repeating-linear-gradient(0deg, rgba(234, 240, 255, 0.07) 0 1px, transparent 1px 34px),
      linear-gradient(150deg, rgba(22, 34, 92, 0.9), var(--field-deep));
  }
}


@layer components {
  .cz-hero__note { padding-left: calc(clamp(1rem, 2vw, 1.6rem) + 1px); }
  .cz-hero__side .cz-rail { margin-top: 3.2rem; background: linear-gradient(90deg, rgba(7, 10, 20, 0.86), rgba(7, 10, 20, 0.62)); }
  .cz-numeral { top: -4.6rem; right: 36%; font-size: clamp(11rem, 20vw, 21rem); }
}

@media (max-width: 1099px) {
  .cz-hero__note { padding-left: 0; }
  .cz-hero__side .cz-rail { margin-top: 1.2rem; }
}

@layer components {
  .cz-honours { gap: 0.7rem; }
  .cz-honour {
    position: relative; overflow: hidden; padding: 1.15rem 1.15rem 1.45rem;
    background:
      repeating-linear-gradient(102deg, rgba(255, 122, 224, 0.045) 0 14px, transparent 14px 28px),
      linear-gradient(180deg, rgba(7, 10, 20, 0.72), rgba(4, 6, 14, 0.90));
    border: 1px solid var(--frost-edge); border-top: 2px solid rgba(234, 240, 255, 0.42);
    border-radius: var(--r); transition: border-color 0.22s ease, transform 0.22s ease;
  }
  .cz-honour::before {
    content: ""; position: absolute; right: -22px; bottom: -22px; width: 58px; height: 58px;
    border: 2px solid rgba(255, 122, 224, 0.78); border-radius: 50%; pointer-events: none;
  }
  .cz-honour::after {
    content: ""; position: absolute; right: -0.35rem; top: -0.35rem; width: 4.6rem; height: 3.4rem;
    background:
      repeating-linear-gradient(58deg, rgba(234, 240, 255, 0.32) 0 1px, transparent 1px 7px),
      repeating-linear-gradient(-58deg, rgba(234, 240, 255, 0.32) 0 1px, transparent 1px 7px);
    mask-image: linear-gradient(214deg, #000 12%, transparent 68%);
    pointer-events: none;
  }
  .cz-honour:hover { border-top-color: var(--accent); transform: translateY(-2px); }
  .cz-honour:hover::before { border-color: var(--accent); }
  .cz-honour b {
    position: relative; z-index: 1; padding-right: 2rem;
    font-size: clamp(1.5rem, 1.15rem + 0.9vw, 2rem); letter-spacing: -0.035em;
  }
  .cz-honour span { position: relative; z-index: 1; margin-top: 0.55rem; padding-top: 0.55rem; border-top: 1px solid var(--rule); }
}

@layer components {
  .cz-stratum__years { margin-top: 0; }
  .cz-split > figure.cz-stack-md { margin-top: 0.86rem; }
}

@media (max-width: 1099px) {
  .cz-split > figure.cz-stack-md { margin-top: 0; }
}

@layer components {
  .cz-weg { margin-top: 1.9rem; }
  .cz-weg__head { display: flex; align-items: baseline; gap: 0.65rem; }
  .cz-weg__t { font: 700 0.58rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.22em; color: var(--accent); }
  .cz-weg__span { font: 400 0.64rem/1 var(--body); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; color: var(--ink-faint); }
  .cz-weg__hint { margin-left: auto; font: 700 0.52rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-faint); }
  .cz-weg__axis { display: flex; align-items: flex-end; gap: 2px; margin-top: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); transition: border-color 0.2s ease; touch-action: pan-y; }
  .cz-weg__axis:hover { border-bottom-color: rgba(255, 122, 224, 0.42); }
  .cz-weg__stop { flex: 1 1 0; display: flex; justify-content: center; align-items: flex-end; padding-top: 0.7rem; text-decoration: none; }
  .cz-weg__stop i { position: relative; display: block; width: 3px; height: 1.05rem; background: var(--rule-strong); transform-origin: bottom; transition: background 0.18s ease, transform 0.18s ease; }
  .cz-weg__stop[data-era="trainer"] i { height: 0.58rem; }
  .cz-weg__stop[data-era-start] { margin-left: 0.85rem; }
  .cz-weg__stop[data-now] i { background: rgba(255, 122, 224, 0.5); }
  .cz-weg__stop[data-now] i::after, .cz-weg__stop.is-on i::after {
    content: ""; position: absolute; left: 50%; top: -0.52rem; transform: translateX(-50%);
    border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 5px solid var(--accent);
  }
  .cz-weg__stop:hover i, .cz-weg__stop.is-on i { background: var(--accent); transform: scaleY(1.45); }
  .cz-weg__stop:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
  .cz-weg__read { margin-top: 0.7rem; min-height: 3.1rem; }
  .cz-weg__read b { display: block; font: 800 0.82rem/1 var(--display); font-variant-numeric: tabular-nums; color: var(--accent); }
  .cz-weg__read span { display: block; margin-top: 0.3rem; font: 400 0.7rem/1.4 var(--body); color: var(--ink-dim); }
  .cz-weg__more { display: inline-block; font: 700 0.56rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.17em; color: var(--ink-dim); text-decoration: none; border-bottom: 1px solid var(--rule-strong); padding-bottom: 0.25rem; }
  .cz-weg__more:hover { color: var(--accent); border-bottom-color: var(--accent); }
  .cz-rail__row.is-on { background: rgba(255, 122, 224, 0.07); }
  .cz-rail__row.is-on .cz-rail__mark { border-color: var(--accent); color: var(--accent); }
  .cz-rail__row.is-on .cz-rail__club { color: var(--accent); }
}

@media (prefers-reduced-motion: no-preference) {
  .cz-weg__stop i { animation: cz-weg-sweep 0.5s ease-in-out 1; animation-delay: calc(0.35s + var(--i) * 45ms); }
  @keyframes cz-weg-sweep {
    0%, 100% { background: var(--rule-strong); }
    50% { background: var(--accent); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .cz-weg__stop i { transition: none; }
}
  }
}

@media (prefers-reduced-motion: reduce) {
  .cz-tile__art .cz-art__star, .cz-tile__art .cz-art__ring, .cz-tile__art .cz-art__dot,
  .cz-tile__art .cz-art__start, .cz-tile__art .cz-art__tip,
  .cz-tile__art .cz-art__line, .cz-tile__art .cz-art__route { transition: none; }
}

@layer components {
  .cz-ledger--rate dd { font-variant-numeric: tabular-nums; letter-spacing: 0; }
  .cz-ledger--rate .is-on dt, .cz-ledger--rate .is-on dd { color: var(--accent); }
  .cz-side__text > p { font-size: var(--step--1); line-height: 1.6; color: var(--ink-dim); }
  .cz-side__text > p + p { margin-top: 0.7rem; }
  .cz-facts--pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cz-fine { max-width: var(--measure); font-size: var(--step--1); line-height: 1.6; color: var(--ink-faint); text-align: justify; hyphens: auto; }
}

@media (max-width: 1099px) {
  .cz-foot__grid { grid-template-columns: 1fr 1fr; }
  .cz-foot__brand { grid-column: 1 / -1; }
}

@media (max-width: 599px) {
  .cz-foot__grid { gap: 1.6rem 1.4rem; }
  .cz-foot__col:last-child { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

@layer components {
  .cz-band--photo { position: relative; isolation: isolate; overflow: hidden; }
  .cz-band__photo { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .cz-band__photo picture, .cz-band__photo img { display: block; width: 100%; height: 100%; }
  .cz-band__photo img { object-fit: cover; object-position: 46% 58%; filter: saturate(0.62) contrast(1.22) brightness(1.02); }
  .cz-band__photo::after {
    content: ""; position: absolute; inset: 0;
    background:
      linear-gradient(90deg, rgba(7, 10, 20, 0.93) 0%, rgba(7, 10, 20, 0.78) 40%, rgba(10, 16, 40, 0.30) 100%),
      linear-gradient(0deg, var(--field-deep) 0%, rgba(10, 14, 28, 0.30) 26%, rgba(10, 14, 28, 0.12) 100%);
  }
  .cz-band--photo > .cz-wrap { position: relative; z-index: 1; }
  .cz-band__photo--right img { object-position: 72% 46%; filter: saturate(0.62) contrast(1.24) brightness(1.34); }
  .cz-band__photo--right::after {
    background:
      linear-gradient(90deg, rgba(7, 10, 20, 0.92) 0%, rgba(7, 10, 20, 0.66) 40%, rgba(10, 16, 40, 0.06) 100%),
      linear-gradient(0deg, rgba(10, 14, 28, 0.58) 0%, rgba(10, 14, 28, 0.10) 42%, rgba(10, 14, 28, 0.02) 100%);
  }
  .cz-band__photo--floor img { object-position: 50% 68%; filter: saturate(0.64) contrast(1.2) brightness(1.3); }
  .cz-band__photo--floor::after {
    background:
      linear-gradient(0deg, rgba(7, 10, 20, 0.30) 0%, rgba(7, 10, 20, 0.62) 22%, rgba(7, 10, 20, 0.90) 46%, rgba(7, 10, 20, 0.95) 100%),
      linear-gradient(90deg, rgba(7, 10, 20, 0.46) 0%, rgba(10, 16, 40, 0.14) 58%, rgba(10, 16, 40, 0.04) 100%);
  }
  .cz-band__photo--high img { object-position: 50% 22%; filter: saturate(0.58) contrast(1.14) brightness(1.58); }
  .cz-band__photo--mid img { object-position: 50% 58%; filter: saturate(0.58) contrast(1.14) brightness(1.58); }
  .cz-band__photo--base img { object-position: 50% 74%; filter: saturate(0.58) contrast(1.14) brightness(1.58); }
  .cz-band__photo--lift img { object-position: 50% 76%; filter: saturate(0.58) contrast(1.14) brightness(1.62); }
  .cz-band__photo--glow img { object-position: 50% 20%; filter: saturate(0.58) contrast(1.12) brightness(1.72); }
  .cz-band__photo--high::after, .cz-band__photo--mid::after, .cz-band__photo--base::after,
  .cz-band__photo--lift::after, .cz-band__photo--glow::after {
    background:
      linear-gradient(90deg, rgba(7, 10, 20, 0.95) 0%, rgba(7, 10, 20, 0.86) 38%, rgba(7, 10, 20, 0.48) 68%, rgba(10, 16, 40, 0.14) 100%),
      linear-gradient(0deg, rgba(10, 14, 28, 0.28) 0%, rgba(10, 14, 28, 0.06) 55%, rgba(10, 14, 28, 0.20) 100%);
  }
  .cz-band__photo--low img { object-position: 50% 74%; filter: saturate(0.66) contrast(1.22) brightness(1.28); }
  .cz-band__photo--low::after {
    background:
      linear-gradient(100deg, rgba(7, 10, 20, 0.96) 0%, rgba(7, 10, 20, 0.90) 34%, rgba(7, 10, 20, 0.52) 64%, rgba(7, 10, 20, 0.16) 100%),
      linear-gradient(0deg, rgba(10, 14, 28, 0.28) 0%, rgba(10, 14, 28, 0.40) 55%, rgba(10, 14, 28, 0.56) 100%);
  }
}

@media (min-width: 1100px) {
  .cz-band > .cz-wrap > .cz-prose {
    max-width: none; columns: 30rem 2; column-gap: clamp(2rem, 3.4vw, 3.6rem);
    orphans: 3; widows: 3;
  }
  .cz-band > .cz-wrap > .cz-prose > p { break-inside: avoid-column; }
  .cz-band > .cz-wrap > .cz-prose.cz-stack-md > p + p { margin-top: 0.9rem; }
}

@layer components {
  .cz-lane { border: 1px solid var(--frost-edge); border-radius: var(--r); padding: 1rem 1.1rem 1.1rem; background: rgba(7, 10, 20, 0.62); }
  .cz-lane svg { width: 100%; height: auto; }
  .cz-lane figcaption { margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--rule); font: 400 var(--step--1)/1.5 var(--body); color: var(--ink-dim); }
  .cz-band > .cz-wrap.cz-stack-md + .cz-wrap.cz-split { margin-top: clamp(1.8rem, 3vw, 3rem); }
  .cz-band > .cz-wrap.cz-head + .cz-wrap.cz-split { margin-top: clamp(1.4rem, 2.2vw, 2.2rem); }
  .cz-table tbody tr:last-child td { border-bottom-color: var(--rule-strong); }
  .cz-table tfoot td { padding-top: 0.85rem; font-weight: 700; color: var(--ink); border-bottom: 0; }
  .cz-table tfoot td:nth-child(2) { color: var(--accent); letter-spacing: 0.04em; }
  .cz-table td:nth-child(3), .cz-table td:nth-child(5) { color: var(--ink); font-weight: 700; }
  .cz-table td:nth-child(6) { color: var(--accent-dim); }
  .cz-table tr:hover td:first-child { color: var(--accent); }
}

@layer components {
  .cz-menu { display: none; }
  .cz-menu > summary { list-style: none; cursor: pointer; }
  .cz-menu > summary::-webkit-details-marker { display: none; }
  .cz-menu__bars { display: grid; gap: 4px; }
  .cz-menu__bars i { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 1px; transition: transform 0.2s ease, opacity 0.2s ease; }
  .cz-menu__lb { font: 700 0.6rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-faint); }
  .cz-menu__t { display: block; font: 700 0.62rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.2em; color: var(--accent); }
  .cz-menu__col { display: grid; }
  .cz-menu__col a { text-decoration: none; color: var(--ink); }
}

@media (max-width: 767px) {
  .cz-flank { justify-content: space-between; gap: 0.75rem; padding: 0.6rem 1.1rem; overflow: visible; }
  .cz-flank__nav, .cz-bar { display: none; }

  .cz-menu { display: block; position: relative; }
  .cz-menu > summary {
    display: flex; align-items: center; gap: 0.6rem;
    min-height: 44px; padding: 0 0.35rem;
  }
  .cz-menu[open] .cz-menu__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .cz-menu[open] .cz-menu__bars i:nth-child(2) { opacity: 0; }
  .cz-menu[open] .cz-menu__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .cz-menu__panel {
    position: absolute; top: calc(100% + 0.6rem); right: -1.1rem;
    width: min(19rem, calc(100vw - 1.6rem));
    max-height: calc(100vh - 5rem); overflow-y: auto;
    display: grid; gap: 1.35rem;
    padding: 1.25rem 1.3rem 1.4rem;
    background: #070b18; border: 1px solid var(--frost-edge); border-radius: var(--r);
    box-shadow: 0 24px 60px rgba(2, 4, 10, 0.72);
  }
  .cz-menu__col a {
    min-height: 44px; display: flex; align-items: center;
    font: 700 0.95rem/1.25 var(--display); letter-spacing: -0.005em;
    border-bottom: 1px solid var(--rule);
  }
  .cz-menu__col a:last-child { border-bottom: 0; }
  .cz-menu__col a[aria-current="page"] { color: var(--accent); }
  .cz-menu__t { margin-bottom: 0.35rem; }
}

@media (max-width: 1099px) {
  .cz-viz__yr, .cz-viz__cc, .cz-viz__cnt, .cz-viz__lane-lb,
  .cz-viz__row-sub, .cz-viz__val-sub { font-size: 12px; letter-spacing: 0.08em; }
  .cz-viz__chip text { font-size: 11px; letter-spacing: 0.05em; }
  .cz-lane text { font-size: 11px; letter-spacing: 0.06em; }
  .cz-viz__key i { font-size: 0.72rem; }
  .cz-viz__key span { font-size: 0.8rem; }
  .cz-viz figcaption, .cz-plate figcaption, .cz-lane figcaption, .cz-crest figcaption,
  .cz-table caption, .cz-table th { font-size: 0.72rem; letter-spacing: 0.1em; }
  .cz-facts dt, .cz-ledger dt, .cz-side__t, .cz-partner__label, .cz-liga__grid dt,
  .cz-partner-card__meta dt, .cz-tile__label, .cz-rail__mark, .cz-foot__t,
  .cz-weg__t, .cz-weg__hint, .cz-weg__span, .cz-weg__more,
  .cz-hero__note, .cz-honour span, .cz-mark span { font-size: 0.72rem; letter-spacing: 0.1em; }
  .cz-rail__meta, .cz-foot__note, .cz-fine { font-size: 0.8rem; }
  main small { font-size: 0.74rem; letter-spacing: 0.08em; }
  .cz-eyebrow, .cz-more { font-size: 0.74rem; }

  .cz-flank__nav a, .cz-bar a { min-height: 44px; display: inline-flex; align-items: center; }
  .cz-more { min-height: 44px; align-items: center; }
  .cz-foot__col a { min-height: 44px; display: flex; align-items: center; }
  .cz-foot__col { gap: 0; }
  .cz-search input, .cz-search button { min-height: 44px; }
  .cz-next a { min-height: 44px; }
  .cz-weg__stop { padding-inline: 3px; }

}

@media (max-width: 767px) {
  .cz-prose { text-align: left; hyphens: auto; }
  .cz-wrap { width: min(100% - 2.2rem, var(--shell)); }
  .cz-band { padding-block: clamp(2.6rem, 9vw, 3.6rem); }
}

@media (max-width: 1099px) {
  .cz-pitch { inset: 0 0 auto 0; height: 34rem; mask-image: linear-gradient(180deg, #000 0 56%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, #000 0 56%, transparent 100%); }
  .cz-pitch svg { top: 0; left: -16%; width: 132%; height: 100%; transform: none; }
}

@layer components {
  .cz-swipe {
    display: block; margin-top: 0.55rem; text-align: right;
    font: 700 0.7rem/1 var(--display); text-transform: uppercase; letter-spacing: 0.14em;
    color: var(--ink-faint);
  }
  .cz-swipe b { color: var(--accent); font-weight: 700; }
}