/* V76 — one continuous presentation after the preserved television opening.
   Load after the existing chapter styles. No home, global or motion-controller rules.

   Narrative: navy signature -> ivory technical sequence -> navy creative system
   -> ivory application rules -> the existing collection -> credentials/panorama/close.
   Content determines chapter height; only the collection retains its own pinning.
   The protection diagram keeps its geometry in a separate light theme.
   Demonstration backgrounds, signature themes and all product/art transforms survive.
*/

/* Remove the inherited one-screen chapter scaffold, including legacy fixed heights. */
#main > :is(#encontro, #construcao, #protecao, #assinatura, #cor, #tipografia, #linguagem, #usos, #credenciais, #escala, #encerramento).v61-chapter {
  --flow-pad: clamp(24px, 5vw, 92px);
  --flow-top: 112px;
  --flow-bottom: clamp(52px, 7vw, 100px);
  --flow-seam: 0px;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: var(--flow-top) var(--flow-pad) var(--flow-bottom);
}

/* Metadata identifies a chapter without rebuilding a slide header. */
#main > :is(#encontro, #construcao, #protecao, #assinatura, #cor, #tipografia, #linguagem, #usos, #credenciais, #escala, #encerramento).v61-chapter :is(.id-meta, .kn-scene-header) {
  margin-bottom: clamp(24px, 3.2vw, 46px);
  padding-bottom: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}
#main > :is(#encontro, #construcao, #protecao, #assinatura, #cor, #tipografia, #linguagem, #usos, #credenciais, #escala, #encerramento).v61-chapter :is(.id-meta, .kn-scene-header, .id-motion-meta)::after {
  content: none;
  display: none;
}
#main > :is(#encontro, #construcao, #protecao, #assinatura, #cor, #tipografia, #linguagem, #usos, #credenciais, #escala, #encerramento).v61-chapter .id-note {
  padding-top: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

/* Reuse the existing curtain progress variables as a diffuse light sweep.
   The former cyan edge, rectangular wash and shadow are deliberately absent.
   No overflow is added to the collection or any sticky ancestor. */
#main > :is(#encontro, #construcao, #protecao, #assinatura, #cor, #tipografia, #linguagem, #usos, #credenciais, #escala, #encerramento).v61-chapter.id-scene35::before,
#main > #aplicacoes.v61-collection.id-scene35::before {
  inset: 0 8% auto;
  height: min(74svh, 660px);
  max-height: 100%;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  background: radial-gradient(ellipse at 64% 60%, #36c9ff14 0%, #244cff09 36%, transparent 70%);
  filter: blur(28px);
  transform: translate3d(0, var(--id35-curtain, -104%), 0);
  opacity: calc(var(--id35-curtain-alpha, 1) * .55);
  pointer-events: none;
}

/* Seams occupy reserved bottom space, never the artwork or the reading area. */
#main > :is(#encontro, #assinatura, #linguagem, #usos, #credenciais, #escala).v61-chapter::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: auto 0 0;
  height: var(--flow-seam);
  background: linear-gradient(to bottom, var(--flow-from), var(--flow-to));
  pointer-events: none;
}

/* The first chapter extends the opening's navy field, with the light behind the mark. */
#main > #encontro.v61-chapter {
  --flow-top: clamp(112px, 10vw, 160px);
  --flow-bottom: clamp(170px, 18vw, 250px);
  --flow-seam: clamp(120px, 12vw, 180px);
  --flow-from: #06142c;
  --flow-to: #f4efe6;
  --v61-muted: #bdcce0;
  background: linear-gradient(180deg, #03070c, transparent 180px), radial-gradient(ellipse at 25% 36%, #244cff25, transparent 55%), #06142c;
  color: #f4efe6;
  grid-template-rows: auto auto;
}
#main > #encontro.v61-chapter .id-anatomy ol {
  border: 0;
  padding-top: 12px;
  gap: clamp(20px, 3vw, 48px);
}
#main > #encontro.v61-chapter .id-anatomy-art {
  min-height: 0;
  height: clamp(280px, 32vw, 440px);
}
#main > #encontro.v61-chapter .id-heading > p {
  color: #bdcce0;
}

/* Construction, protection and signature belong to one open technical field. */
#main > :is(#construcao, #protecao, #assinatura).v61-chapter {
  --v61-rule: #06142c24;
  --v61-muted: #42556e;
  --flow-top: 104px;
  --flow-bottom: clamp(42px, 5vw, 76px);
  background: #f4efe6;
  color: #06142c;
  grid-template-rows: none;
  align-content: start;
}
#main > #construcao.v61-chapter {
  background: radial-gradient(ellipse at 80% 56%, #36c9ff0d, transparent 62%), #f4efe6;
}
#main > :is(#construcao, #protecao).v61-chapter .id-diagram-art {
  height: auto;
  min-height: 0;
  aspect-ratio: 1440 / 780;
  align-self: center;
}
#main > #construcao.v61-chapter .v36-measure-strip {
  border: 0;
  padding-top: 10px;
}
#main > #protecao.v61-chapter {
  --flow-top: 100px;
  --flow-bottom: clamp(48px, 6vw, 90px);
}
#main > #protecao.v61-chapter .id-diagram-art {
  /* The light diagram matches the chapter field and remains readable in the modal. */
  aspect-ratio: 1440 / 780;
  padding: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
}
#main > #protecao.v61-chapter .id-diagram-art img {
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}
#main > #protecao.v61-chapter :is(.id-meta, .v36-technical-head > p, .id-note, .v36-protection-rule p) {
  color: #42556e;
}
#main > #protecao.v61-chapter .v36-protection-rule p > span {
  color: #42556e;
}
#main > #protecao.v61-chapter :is(.v36-technical-head h2, .v36-protection-rule p b) {
  color: #06142c;
}
#main > #protecao.v61-chapter .v36-unit,
#main > #protecao.v61-chapter .v36-rule-status {
  color: #244cff;
}
#main > #protecao.v61-chapter .v36-protection-rule {
  border: 0;
  padding-top: 10px;
}
#main > #assinatura.v61-chapter {
  --flow-top: 100px;
  --flow-bottom: clamp(170px, 15vw, 220px);
  --flow-seam: clamp(110px, 10vw, 160px);
  --flow-from: #f4efe6;
  --flow-to: #06142c;
  row-gap: 30px;
}
#main > #assinatura.v61-chapter :is(.v36-expression-note, .id-reduction) {
  border: 0;
  background: transparent;
  box-shadow: none;
}
#main > #assinatura.v61-chapter .v36-expression-note {
  padding-top: 8px;
}

/* Palette, type and graphic language now share a dark creative-system field.
   The palette swatches and contrast specimens keep their actual color pairs. */
#main > :is(#cor, #tipografia, #linguagem).v61-chapter {
  --v61-muted: #bdcce0;
  --v61-rule: #f4efe626;
  background: #06142c;
  color: #f4efe6;
}
#main > #cor.v61-chapter {
  --flow-top: 120px;
  --flow-bottom: clamp(52px, 6vw, 88px);
}
#main > #cor.v61-chapter :is(.color-spectrum, .v37-gradient-frame) {
  border: 0;
  box-shadow: none;
}
#main > #cor.v61-chapter .v37-contrast-heading {
  border: 0;
}
#main > #tipografia.v61-chapter {
  --flow-top: 100px;
  --flow-bottom: clamp(56px, 7vw, 100px);
  background: radial-gradient(ellipse at 75% 28%, #244cff17, transparent 58%), #06142c;
}
#main > #tipografia.v61-chapter :is(.id-type-main, .v37-glyph, .v37-character-strip, .id-type-roles, .id-type-roles > div, .v37-weight-specimen) {
  border: 0;
  background: transparent;
  box-shadow: none;
}
#main > #tipografia.v61-chapter :is(.id-type-main h2, .id-type-roles h3, .id-alphabet) {
  color: #f4efe6;
}
#main > #tipografia.v61-chapter .id-type-aa {
  color: #36c9ff;
}
#main > #tipografia.v61-chapter :is(.id-meta, .v37-type-label, .id-type-main p, .v37-glyph > span:last-child, .v37-character-strip > span, .id-type-roles p, .id-type-roles > div > span:first-child, .v37-support-heading > span, .v37-weight-specimen, .id-note) {
  color: #bdcce0;
}
#main > #tipografia.v61-chapter .id-status {
  border: 0;
  padding: 0;
  background: transparent;
  color: #bdcce0;
}
#main > #tipografia.v61-chapter .v37-character-strip {
  padding-block: clamp(20px, 3vw, 42px);
}
#main > #linguagem.v61-chapter {
  --flow-top: 100px;
  --flow-bottom: clamp(175px, 16vw, 240px);
  --flow-seam: clamp(120px, 11vw, 170px);
  --flow-from: #06142c;
  --flow-to: #f4efe6;
  background: radial-gradient(ellipse at 82% 35%, #244cff19, transparent 57%), #06142c;
}
#main > #linguagem.v61-chapter .id-grade-rule {
  border: 0;
  padding-top: 10px;
}

/* The rule demonstrations stay literal: correct navy and low-contrast cyan
   remain; geometry and cropping examples no longer need an extra paper card. */
#main > #usos.v61-chapter {
  --flow-top: 112px;
  --flow-bottom: clamp(160px, 14vw, 210px);
  --flow-seam: clamp(110px, 10vw, 150px);
  --flow-from: #f4efe6;
  --flow-to: #06142c;
  background: #f4efe6;
  color: #06142c;
}
#main > #usos.v61-chapter .v38-correct-use {
  border: 0;
  padding-bottom: 16px;
}
#main > #usos.v61-chapter :is(.id-stretched, .id-cropped) {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
#main > #usos.v61-chapter .id-misuse-grid {
  row-gap: clamp(38px, 5vw, 72px);
}

/* Credentials and the panorama get their own editorial pace, without pinning
   the ordinary panorama chapter or forcing it into another full-screen frame. */
#main > #credenciais.v61-chapter {
  --flow-top: 112px;
  --flow-bottom: clamp(165px, 14vw, 220px);
  --flow-seam: clamp(110px, 10vw, 160px);
  --flow-from: #06142c;
  --flow-to: #f4efe6;
  background: radial-gradient(ellipse at 48% 44%, #244cff1c, transparent 62%), #06142c;
  grid-template-rows: auto auto auto;
  gap: clamp(30px, 4vw, 54px);
}
#main > #escala.v61-chapter {
  --flow-top: 112px;
  --flow-bottom: clamp(155px, 14vw, 210px);
  --flow-seam: clamp(100px, 10vw, 150px);
  --flow-from: #f4efe6;
  --flow-to: #06142c;
  background: #f4efe6;
  color: #06142c;
}
#main > #escala.v61-chapter .scale-sticky {
  position: relative;
  inset: auto;
  height: auto;
  min-height: 0;
  max-height: none;
  padding: 0;
  grid-template-rows: auto auto auto;
  gap: clamp(26px, 4vw, 54px);
}
#main > #encerramento.v61-chapter {
  --flow-top: clamp(112px, 10vw, 160px);
  --flow-bottom: clamp(40px, 5vw, 72px);
  background: radial-gradient(ellipse at 26% 29%, #244cff23, transparent 58%), #06142c;
  color: #f4efe6;
  gap: clamp(30px, 4vw, 56px);
}
#main > #encerramento.v61-chapter .v38-summary-hero {
  min-height: 0;
  flex: none;
}
#main > #encerramento.v61-chapter .v38-system-strip {
  border: 0;
  padding-block: 12px;
}

@media (max-width: 700px) {
  #main > :is(#encontro, #construcao, #protecao, #assinatura, #cor, #tipografia, #linguagem, #usos, #credenciais, #escala, #encerramento).v61-chapter {
    --flow-pad: 24px;
    --flow-top: 100px;
  }
  #main > #encontro.v61-chapter .id-anatomy-art {
    height: auto;
    aspect-ratio: 2.12;
    padding-block: 18px;
  }
  #main > #protecao.v61-chapter .id-diagram-art {
    padding: 0;
    border-radius: 0;
  }
  #main > #tipografia.v61-chapter .v37-character-strip {
    padding-block: 24px;
  }
  #main > #encerramento.v61-chapter .v38-system-strip {
    padding-block: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #main > :is(#encontro, #construcao, #protecao, #assinatura, #cor, #tipografia, #linguagem, #usos, #credenciais, #escala, #encerramento).v61-chapter.id-scene35::before,
  #main > #aplicacoes.v61-collection.id-scene35::before {
    display: none;
  }
}

@media print {
  #main > :is(#encontro, #construcao, #protecao, #assinatura, #cor, #tipografia, #linguagem, #usos, #credenciais, #escala, #encerramento).v61-chapter {
    padding: 45px;
  }
  #main > :is(#encontro, #construcao, #protecao, #assinatura, #cor, #tipografia, #linguagem, #usos, #credenciais, #escala, #encerramento).v61-chapter::before,
  #main > :is(#encontro, #assinatura, #linguagem, #usos, #credenciais, #escala).v61-chapter::after,
  #main > #aplicacoes.v61-collection.id-scene35::before {
    display: none;
  }
}