/* Estafette / the addressed letter. Existing envelope, ink, cuts and motion.
   Desktop only: compact layouts retain their own reading geometry. */
@media (min-width: 901px) and (min-height: 561px) {
  html #zineEstafetteApp {
    --est-letter-name: clamp(34px, 3vw, 46px);
    --est-word-size: clamp(40px, 4vw, 62px);
    --est-word-pair: clamp(34px, 3.25vw, 48px);
    grid-template-rows: 64px minmax(0, 1fr);
    gap: 8px;
    padding-bottom: 28px;
  }

  html #zineEstafetteApp .fs-desk {
    grid-column: 1;
    grid-row: 2;
    width: min(100%, calc((100svh - 196px) * 1.8), 1280px);
  }

  html #zineEstafetteApp .fs-letter {
    inset: 13% 10% 25%;
    padding: 32px 5% 28px;
    grid-template-rows: 58px minmax(0, 1fr);
    gap: 22px;
  }

  html #zineEstafetteApp .fs-estafette-paper[data-has-words="true"] .fs-letter {
    padding-top: 32px;
  }

  /* Roster is the address block; the count is a row of postage-sized slips.
     No duplicate heading or new paper panel inside the letter. */
  html #zineEstafetteApp .fs-setup {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(330px, 1fr);
    grid-template-rows: auto;
    column-gap: clamp(28px, 4vw, 64px);
    row-gap: 24px;
    align-items: center;
    width: 100%;
    max-width: 920px;
    text-align: left;
  }

  html #zineEstafetteApp .fs-setup-address,
  html #zineEstafetteApp .fs-setup-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 0;
  }

  html #zineEstafetteApp #estafetteGroup {
    align-self: stretch;
    margin: 0;
    font-size: clamp(32px, 3.2vw, 48px);
    line-height: 1.16;
    overflow-wrap: anywhere;
    white-space: pre-line;
    text-wrap: balance;
  }

  html #zineEstafetteApp #estafetteGroupAction {
    align-self: start;
    margin: 0;
    padding-inline: 0;
    font-size: var(--type-support);
    text-align: left;
  }

  html #zineEstafetteApp:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) #estafetteGroup {
    font-size: 30px;
    line-height: 1.2;
  }

  html #zineEstafetteApp .fs-count {
    align-self: stretch;
    margin: 0;
    min-width: 0;
  }

  html #zineEstafetteApp .fs-count legend {
    text-align: center;
    margin-bottom: 16px;
  }

  html #zineEstafetteApp .fs-count-options { gap: 10px; }
  html #zineEstafetteApp .fs-count .fs-choice {
    min-width: 0;
    width: 58px;
    min-height: 64px;
    padding: 12px 10px 16px;
    font-size: 34px;
  }

  html #zineEstafetteApp .fs-setup .fs-profile {
    justify-content: center;
    align-self: center;
    gap: 12px;
  }

  html #zineEstafetteApp .fs-profile .fs-choice {
    padding-inline: 20px;
    min-height: 52px;
    font-size: var(--type-choice);
  }

  /* One fixed address track, irrespective of the current name or word count.
     The native width fitter owns long names; letters keep their full height. */
  html #zineEstafetteApp .fs-player {
    width: 54%;
    box-sizing: border-box;
    height: 52px;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 0;
    margin: 0;
    font-size: var(--fs-fit, var(--est-letter-name));
  }

  html #zineEstafetteApp .fs-estafette-words {
    gap: 12px 36px;
    padding-block: 2px;
  }
  html #zineEstafetteApp .fs-estafette-words .fs-word { padding-inline: 0; }
  html #zineEstafetteApp .fs-estafette-words .fs-word-text {
    font-size: var(--fs-fit, var(--est-word-pair));
  }
  html #zineEstafetteApp:is([data-word-count="2"], [data-word-count="3"], [data-word-count="4"]) .fs-estafette-words .fs-word-text {
    font-size: var(--fs-fit, var(--est-word-size));
  }

  /* Symmetric reserves keep Start/Pass on the letter's centreline when Stop
     appears. Controls stay outside the cloned handoff letter. */
  html #zineEstafetteApp .fs-controls {
    grid-column: 1;
    grid-row: 2;
    align-self: end;
    margin-bottom: clamp(52px, 8svh, 84px);
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px) minmax(0, 1fr);
    gap: 20px;
    width: min(100%, 1024px);
    justify-self: center;
  }
  html #zineEstafetteApp #estafetteMainAction {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
  }
  html #zineEstafetteApp #estafetteStopAction {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
    min-width: 106px;
  }

  @media (forced-colors: none) {
    /* The photograph already carries its broad environmental shade. Keep
       one close contact beneath it; the loose letter sits one level higher. */
    html #zineEstafetteApp .fs-paper-art {
      filter: var(--wp-shadow-slip);
    }
    html #zineEstafetteApp .fs-letter:not(.fs-departure) {
      filter: var(--wp-shadow-paper);
    }
    html #zineEstafetteApp .fs-letter::before { filter: none; }
  }

  @media (max-height: 800px) {
    html #zineEstafetteApp {
      --est-letter-name: 34px;
      --est-word-size: 42px;
      --est-word-pair: 36px;
      grid-template-rows: 56px minmax(0, 1fr);
    }
    html #zineEstafetteApp .fs-letter {
      padding: 20px 5% 20px;
      grid-template-rows: 48px minmax(0, 1fr);
      gap: 12px;
    }
    html #zineEstafetteApp .fs-estafette-paper[data-has-words="true"] .fs-letter { padding-top: 20px; }
    html #zineEstafetteApp .fs-player { height: 46px; }
    html #zineEstafetteApp .fs-setup { column-gap: 28px; row-gap: 16px; }
    html #zineEstafetteApp .fs-setup-address,
    html #zineEstafetteApp .fs-setup-options { gap: 14px; }
    html #zineEstafetteApp #estafetteGroup { font-size: 32px; }
    html #zineEstafetteApp:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) #estafetteGroup { font-size: 24px; }
    html #zineEstafetteApp .fs-count legend { margin-bottom: 10px; }
    html #zineEstafetteApp .fs-count .fs-choice { width: 52px; min-height: 54px; font-size: 30px; }
    html #zineEstafetteApp .fs-estafette-words { gap: 8px 30px; }
  }

  /* At the desktop threshold, do not let the height-based prop width squeeze
     the address into a sliver next to five postage choices. */
  @media (max-width: 1100px) {
    html #zineEstafetteApp .fs-desk { width: 100%; }
    html #zineEstafetteApp .fs-setup {
      grid-template-columns: minmax(0, 1fr) 292px;
      column-gap: 24px;
    }
    html #zineEstafetteApp .fs-count-options { gap: 8px; }
    html #zineEstafetteApp .fs-count .fs-choice { width: 48px; }
    html #zineEstafetteApp .fs-profile .fs-choice { font-size: 24px; padding-inline: 16px; }
    html #zineEstafetteApp:is([data-player-count="5"], [data-player-count="6"], [data-player-count="7"], [data-player-count="8"]) #estafetteGroup { font-size: 22px; }
  }
}