/* V23 diagram only. No desktop rule, new text or separate motion engine.
   The CSS marker explicitly opts the shared controller into mobile geometry. */
@media (max-width: 800px) {
  .assembled-ferment .diagram-scene {
    --v23-diagram-layout: radial;
    --v23-core-size: clamp(170px, min(calc(100vw - 150px), calc(100svh - 644px)), 260px);
    width: 100%;
    max-width: 540px;
    min-height: calc(var(--v23-core-size) + 600px);
    overflow: visible;
  }

  .assembled-ferment .diagram-brand {
    left: calc(50% - 42px);
    top: 28px;
    width: 84px;
    max-width: none;
  }

  .assembled-ferment .diagram-core {
    width: var(--v23-core-size);
    height: var(--v23-core-size);
    left: 50%;
    top: calc(242px + var(--v23-core-size) / 2 + 52px);
  }

  .assembled-ferment .ring-one { inset: -13px; }
  .assembled-ferment .ring-two { inset: -26px; }
  .assembled-ferment .ring-three { inset: -39px; }
  .assembled-ferment .ring-four { inset: -52px; }

  .assembled-ferment .diagram-label {
    padding: 0;
    min-height: 0;
    max-width: none;
    font: 400 12px/1.6 Poppins, Arial, sans-serif;
    touch-action: pan-y;
  }

  .assembled-ferment .diagram-label h3 {
    font: 400 18px/1.3 Amiri, Georgia, serif;
    margin: 0 0 6px;
  }

  .assembled-ferment .diagram-label p {
    font: 400 12px/1.6 Poppins, Arial, sans-serif;
    max-width: none;
    margin: 0;
    text-align: inherit;
  }

  /* Character and blend explain the product; taste, table and history follow. */
  .assembled-ferment .label-0,
  .assembled-ferment .label-4 {
    top: 150px;
    width: min(220px, calc((100% - 64px) / 2));
  }

  .assembled-ferment .label-0 {
    --v23-leader-side: right;
    left: 24px;
    text-align: right;
  }

  .assembled-ferment .label-4 {
    --v23-leader-side: left;
    left: auto;
    right: 24px;
    text-align: left;
  }

  .assembled-ferment .label-1,
  .assembled-ferment .label-2,
  .assembled-ferment .label-3 {
    top: calc(var(--v23-core-size) + 388px);
    width: calc((100% - 68px) / 3);
  }

  .assembled-ferment .label-1 {
    --v23-leader-side: right;
    left: 24px;
    text-align: right;
  }

  .assembled-ferment .label-2 {
    --v23-leader-side: left;
    left: calc(34px + (100% - 68px) / 3);
    text-align: center;
  }

  .assembled-ferment .label-3 {
    --v23-leader-side: left;
    left: calc(44px + 2 * (100% - 68px) / 3);
    text-align: left;
  }

  .assembled-ferment .diagram-note {
    left: 24px;
    top: calc(var(--v23-core-size) + 524px);
    width: calc(100% - 48px);
    max-width: none;
    font: 400 24px/1.25 Amiri, Georgia, serif;
    text-align: center;
  }
}